/* 🔴 El atributo `hidden` lo gana CUALQUIER regla de clase que ponga display.
   El 3 de septiembre de 2026 eso dejo el aviso de "Haciendo el video..." a la
   vista antes de que Gustavo picara el boton, porque .trabajando pone
   display:flex y el navegador esconde con [hidden]{display:none} desde su
   propia hoja, que pierde contra cualquier autor.
   Se cierra la clase entera aqui, en lugar de regla por regla. */
[hidden] { display: none !important; }

/* pantallas/panel/estaticos/panel.css */
/*
 * Rediseño del 22 de agosto de 2026, pedido por Gustavo.
 *
 * TEMA CLARO POR OMISION, y ahi se aparta a proposito de la moda. La
 * referencia de 2026 dice oscuro primero, y para Isaac eso seria un error: el
 * abre esto EN LA CALLE, en Mexicali, entre visita y visita a los locales, y
 * con sol el modo oscuro se lee peor. Los dos temas estan hechos con cuidado y
 * manda lo que traiga su telefono, con el claro pensado para el sol en lugar de
 * tratado como el hermano feo.
 *
 * Lo demas si sigue la practica actual: superficies con elevacion en vez de
 * bordes gruesos, sombras suaves, esquinas redondas, y pensado primero para el
 * telefono. Ver la nota de la sesion en CLAUDE.md.
 *
 * Y la tipografia se queda en la del sistema a proposito. Traer una de fuera
 * significa que el dia que al local se le caiga el internet, el panel se pinta
 * con otra letra y todo se recorre. En el telefono y en la laptop la del
 * sistema ya es una letra moderna, asi que el trabajo va en la escala, el peso
 * y el espaciado.
 */
:root {
  color-scheme: light dark;

  --tinta: #191320;
  --suave: #6B6275;
  --tenue: #8F8799;
  --linea: #E6E1EB;
  --fondo: #F5F3F7;
  --superficie: #FFFFFF;
  --superficie-2: #FAF8FC;   /* lo que se levanta un escalon mas */
  --acento: #B81C5C;
  --acento-tinta: #FFFFFF;
  --acento-suave: #FBE9F1;
  --bien: #14764F;
  --bien-suave: #E3F3EC;
  --mal: #B33A31;
  --mal-suave: #F9E9E7;

  --radio: 14px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgba(25, 19, 32, 0.05),
            0 10px 28px -16px rgba(25, 19, 32, 0.22);
  --sombra-alta: 0 2px 6px rgba(25, 19, 32, 0.07),
                 0 18px 40px -18px rgba(25, 19, 32, 0.28);
}

/* La escala de superficies, y jamas un solo negro: el fondo es el piso, la
   tarjeta se levanta un escalon y lo que flota se levanta otro. Es lo que da
   profundidad sin dibujar bordes gruesos. */
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #F3F0F7;
    --suave: #A79FB2;
    --tenue: #7E7688;
    --linea: #2A2432;
    --fondo: #0C0A10;
    --superficie: #15121B;
    --superficie-2: #1D1926;
    --acento: #FF6199;
    --acento-tinta: #2A0716;
    --acento-suave: #2B1220;
    --bien: #46D6A0;
    --bien-suave: #10281F;
    --mal: #FF8577;
    --mal-suave: #2B1512;

    --sombra: 0 1px 2px rgba(0, 0, 0, 0.5),
              0 12px 32px -18px rgba(0, 0, 0, 0.8);
    --sombra-alta: 0 2px 8px rgba(0, 0, 0, 0.6),
                   0 22px 48px -20px rgba(0, 0, 0, 0.9);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--fondo);
  color: var(--tinta);
  font: 400 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 1rem 1rem 1.5rem;
  /* Sin tope, en un monitor de 2560 la pagina se desparramaba a lo ancho y las
     tarjetas de pantalla crecian con ella. Medido el 22 de agosto de 2026: una
     sola tarjeta llegaba a 1234 px de ancho por 2193 de alto. */
  max-width: 1100px;
  margin-inline: auto;
}

/* --- Encabezado y pestañas --- */

.encabezado { padding: 0.25rem 0 1rem; }

.titulo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

h1 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

h2 {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.pestanas {
  /* Abraza su contenido en la laptop, en lugar de estirarse a los 1100 px, que
     se veia flojo. En el telefono vuelve a ocupar el ancho completo, mas abajo. */
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.3rem;
  margin-bottom: 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 999px;
  box-shadow: var(--sombra);
  overflow-x: auto;
  scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }

.pestana {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;          /* objetivo tactil minimo */
  padding: 0 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--suave);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pestana .icono { font-size: 0.85em; opacity: 0.75; }
.pestana:hover { color: var(--tinta); background: var(--superficie-2); }
.pestana.activa {
  background: var(--acento);
  color: var(--acento-tinta);
}
.pestana.activa .icono { opacity: 1; }

.vista.oculta { display: none; }

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.pill {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3em 0.7em;

  border-radius: 3px;
  background: var(--linea);
}
.pill.bien { color: var(--bien); background: var(--bien-suave); }
.pill.mal  { color: var(--mal);  background: var(--mal-suave); }

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.9rem;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  box-shadow: var(--sombra);
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }

.tarjeta.elegida {
  border-color: var(--acento);
  box-shadow: var(--sombra-alta), 0 0 0 3px var(--acento-suave);
}

/* Dos renglones fijos, para que todas las tarjetas de una fila arranquen su
   miniatura a la MISMA altura. Con el lugar y el nombre juntos en un renglon,
   el titulo se partia en unas tarjetas y en otras no, y la fila se veia
   dispareja. */
.encabezado-tarjeta { min-height: 2.6em; }

.lugar {
  font-weight: 650;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.nombre {
  font-weight: 650;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

.tarjeta .nombre {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--tenue);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.miniatura {
  aspect-ratio: 9 / 16;
  border-radius: var(--radio-chico);
  background: #16121A;
  object-fit: cover;
  width: 100%;
}

.muerta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--mal);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.5rem;
  background: var(--fondo);
}

/* Lo que Isaac nota de la reconciliacion al arrancar: un video ya no se
   pierde por publicar con la pantalla apagada, le llega cuando la prendan.
   Va debajo del recuadro "Sin señal", como un renglon propio. */
.recados-esperando {
  margin-top: 0.4rem;
  text-align: center;
  color: var(--tenue);
  font-size: 0.72rem;
}

.zona {
  margin-top: 1.25rem;
  padding: 1.5rem 1.25rem;
  border: 2px dashed var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--suave);
  text-align: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.zona:hover { border-color: var(--acento); background: var(--superficie-2); }

.zona.encima {
  border-color: var(--acento);
  background: var(--acento-suave);
  color: var(--acento);
}

.aviso {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 5px;
  background: var(--superficie);
  border-left: 3px solid var(--acento);
  font-size: 0.9rem;
}

.oculto { display: none; }


/* El boton principal de cada seccion. Relleno y con el acento, para que se
   distinga de los secundarios de un vistazo. */
.agregar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--acento);
  color: var(--acento-tinta);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: filter 0.15s, box-shadow 0.15s, transform 0.15s;
}
.agregar:hover { filter: brightness(1.08); box-shadow: var(--sombra-alta); }
.agregar:active { transform: translateY(1px); }

/* El secundario va delineado, para que jamas compita con el principal. */
.agregar.mapa {
  background: transparent;
  color: var(--acento);
  border: 1px solid var(--linea);
  box-shadow: none;
}
.agregar.mapa:hover { border-color: var(--acento); background: var(--acento-suave); }

.vacio { color: var(--suave); font-size: 0.88rem; }

/* --- Controles de apagado, dentro de cada tarjeta --- */

/* Se parte en dos renglones cuando la tarjeta es angosta, y ahi esta el
   porque: el campo de la hora se planta en unos 130 px, que es su ancho
   minimo para el formato de reloj, asi que en una tarjeta de 189 px le
   quedaban 36 al boton, que necesita unos 80. El texto "Apagar" se salia de
   la tarjeta. Medido el 22 de agosto de 2026, y lo cazo Gustavo mirando. */
.apagado {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.hora-apagado {
  flex: 1 1 8rem;
  min-width: 0;              /* deja que encoja, en vez de empujar al boton */
  min-height: 44px;          /* objetivo tactil minimo */
  font-size: 1rem;
  padding: 0 0.4rem;
  border: 1px solid var(--linea);
  border-radius: 5px;
  background: var(--fondo);
  color: inherit;
}

.apagar {
  flex: 1 1 auto;            /* solo se lee completo, y al partirse ocupa el renglon */
  white-space: nowrap;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.7rem;
  font-size: 0.95rem;
  border: 1px solid var(--linea);
  border-radius: 5px;
  background: var(--fondo);
  color: var(--mal);
  cursor: pointer;
}
.apagar:hover { border-color: var(--mal); }

/* 🔴 Reiniciar es la mas SEGURA de las dos ordenes del panel: apagar deja la
   pantalla muerta hasta que alguien le de corriente, y esta vuelve sola en unos
   veinte segundos. Por eso se ve mas discreta, y jamas con el color de peligro.

   Entro el 24 de agosto de 2026, para aplicar una version nueva sin esperar al
   arranque del dia siguiente. Es lo unico que actualiza a una pantalla que
   jamas se apaga, como Acatlan.

   ⚠️ Los 44 pixeles son el minimo tactil, y una prueba los vigila: Isaac lo
   toca con el pulgar, parado en la calle. */
.reiniciar {
  flex: 1 1 auto;            /* al partirse ocupa su renglon, igual que Apagar */
  white-space: nowrap;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.7rem;
  font-size: 0.95rem;
  border: 1px solid var(--linea);
  border-radius: 5px;
  background: var(--fondo);
  color: var(--tinta);
  cursor: pointer;
}

.reiniciar:hover { border-color: var(--tinta); }

/* 🔴 En el telefono, el reloj del sistema trae Aceptar y Cancelar, y carece de
   una manera de vaciar el campo de la hora. Sin este boton, una hora ya puesta
   se queda para siempre. Lo cazo Gustavo el 23 de agosto de 2026, con la
   pantalla de casa de Isaac puesta a apagarse a las 03:58.

   Aparece solo cuando hay hora que quitar, asi que en las pantallas que se
   quedan prendidas el renglon se ve igual que antes. */
.quitar-apagado {
  flex: 1 1 auto;            /* al partirse ocupa su renglon, igual que Apagar */
  white-space: nowrap;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.7rem;
  font-size: 0.95rem;
  border: 1px solid var(--linea);
  border-radius: 5px;
  background: var(--fondo);
  color: inherit;
  cursor: pointer;
}
.quitar-apagado:hover { border-color: var(--tinta); }
.quitar-apagado[hidden] { display: none; }

/* --- El panel en vertical, para el celular --- */

/* auto-fit en vez de auto-fill: en un telefono angosto colapsa a una columna
   sola, y en la laptop sigue acomodando cuatro. Sin puntos de quiebre a mano,
   asi que sigue sirviendo cuando sean veinte pantallas en vez de cuatro. */
/* auto-fill y jamas auto-fit, y ahi estaba el defecto: con auto-fit las dos
   columnas se estiraban hasta llenar la ventana, asi que la miniatura se
   pintaba 6.9 veces mas grande que la imagen y se veia pixeleada. Con
   auto-fill el espacio que sobra queda vacio y las tarjetas conservan su
   tamano, con dos pantallas o con veinte. */
.rejilla {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Nada se desborda a lo ancho: es lo que se rompe primero en un telefono. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

@media (max-width: 480px) {
  body { padding: 0.7rem; }

  /* La rejilla se queda como esta: auto-fill reparte solo. Una columna a la
     fuerza en el telefono desperdiciaba el ancho, porque a 390 px caben dos
     tarjetas de 188, que es justo el tamaño con el que las miniaturas se ven
     bien. Lo cazo Gustavo mirando el 22 de agosto de 2026. En un telefono muy
     angosto, auto-fill cae a una sola columna por su cuenta. */

  /* Isaac lo va a abrir en la calle, entre visita y visita a los locales. */
  .nombre { font-size: 1.05rem; }
  .miniatura.muerta { font-size: 0.95rem; }

  /* La zona de soltar es tambien boton en el telefono, asi que necesita
     tamano de boton y decir que se puede tocar. */
  .zona { min-height: 88px; padding: 1rem; font-size: 1rem; }

  .apagado { flex-wrap: wrap; }
  .hora-apagado, .apagar, .quitar-apagado { min-height: 48px; }
}


/* La pantalla esta al aire y lo unico que fallo fue la foto: se dice, en vez de
   dejar un recuadro en blanco que se lee como si la pantalla estuviera muerta. */
.miniatura.sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.6rem;
  color: var(--tenue, #6b6b6b);
  background: var(--fondo);
  border: 1px dashed var(--linea);
  min-height: 120px;
}

/* --- El menu de que cliente es el anuncio, dentro de la zona de soltar --- */

.cliente-spot {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--suave);
  text-align: left;
  cursor: default;
}
.cliente-spot select {
  display: block;
  width: 100%;
  min-height: 44px;          /* objetivo tactil minimo */
  margin-top: 0.35rem;
  padding: 0.5rem;
  font-size: 0.95rem;
  border: 1px solid var(--linea);
  border-radius: 5px;
  background: var(--superficie);
  color: var(--tinta);
  cursor: pointer;
}

/* --- La pestana de Clientes --- */

.clientes { margin-top: 2rem; }
.clientes h2 { font-size: 1.1rem; letter-spacing: -0.01em; }

.lista-clientes { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }

/* Tres renglones en una rejilla de dos columnas: el nombre a la izquierda y el
   monto a la derecha, alineados entre un cliente y otro. En linea corrida, el
   dato de los anuncios caia en un renglon distinto segun el largo del nombre y
   nada casaba con nada. Lo cazo Gustavo mirando el 22 de agosto de 2026. */
.cliente {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 0.9rem;
  row-gap: 0.15rem;
  padding: 0.8rem 0.9rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: box-shadow 0.16s, border-color 0.16s, transform 0.16s;
}
.cliente:hover {
  box-shadow: var(--sombra-alta);
  border-color: var(--acento);
  transform: translateY(-1px);
}


.cliente .nombre {
  font-weight: 650;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.cliente .precio {
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
  /* Digitos de ancho fijo: es lo que hace que los montos se lean en columna
     en vez de bailar de un renglon a otro. */
  font-variant-numeric: tabular-nums;
}

/* Los dos renglones de abajo cruzan las dos columnas. */
.cliente .detalle,
.cliente .cobro {
  grid-column: 1 / -1;
  color: var(--suave);
  font-size: 0.85rem;
}
.cliente .cobro { color: var(--tenue); }
.cliente .dato { color: var(--suave); font-size: 0.85rem; }
.cliente.de-baja { opacity: 0.6; }

/* En vertical, que es como Isaac lo abre en el celular, cada dato va en su
   propio renglon en vez de apretarse en cuatro columnas. */
/* En el telefono se conservan las DOS columnas, a diferencia de las otras
   listas: el monto es lo que Isaac busca de un vistazo, y mandarlo a un renglon
   propio lo dejaba pareciendo un dato mas de los apagados. El nombre sabe
   partirse solo si es largo. Se quito la excepcion el 22 de agosto de 2026. */

/* --- La ficha del cliente, con sus tres bloques --- */

.ficha { display: grid; gap: 14px; margin-top: 14px; }
.ficha.oculto { display: none; }
.ficha fieldset {
  border: 1px solid var(--linea, #2a2f3d); border-radius: 10px; padding: 12px 14px;
}
.ficha label { display: block; margin: 8px 0; font-size: 0.9rem; }
.ficha input, .ficha select {
  display: block; width: 100%; padding: 8px; margin-top: 4px;
  min-height: 44px;          /* objetivo tactil minimo */
}
.casillas { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.casillas label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  min-height: 44px;          /* objetivo tactil minimo */
}
.casillas input {
  display: inline; width: 22px; height: 22px; margin: 0; flex: none;
}
.descuento { margin: 10px 0 0; font-weight: 600; }
.videos-cliente { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
/* El bloque de cobros de la ficha. Va con las variables del tema y jamas con
   colores fijos: Isaac abre el panel EN LA CALLE bajo distintas luces, que es
   justo cuando el tema del telefono cambia. Es la leccion de la franja de
   cobros, del 29 de agosto de 2026. */
.cobro-proximo { margin: 0 0 10px; font-weight: 600; color: var(--tinta); }
.cobros-avisados {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.9rem; color: var(--suave);
}
.video-cliente { display: flex; justify-content: space-between; gap: 12px; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.acciones .baja { margin-left: auto; }
/* Cancelar y Quitar/Dar de baja no traian clase con min-height propio; sin
   esto quedan al tamano de boton por omision del navegador, por debajo del
   minimo tactil. */
.acciones button { min-height: 44px; padding: 0 0.9rem; }

/* --- Las pantallas agrupadas por ubicacion --- */

/* #pantallas ya NO es la rejilla en si: cada grupo trae su propio
   encabezado y su propia rejilla, para que Isaac sepa de que lugar es cada
   tarjeta sin tener que leer cada nombre por separado. */
.lista-lugares { display: flex; flex-direction: column; gap: 1.4rem; }
.grupo-lugar {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--suave);
  margin-bottom: 0.6rem;
}

/* --- La pestana de Ubicaciones --- */

.ubicaciones { margin-top: 2rem; }
.ubicaciones h2 { font-size: 1.1rem; letter-spacing: -0.01em; }
.ubicaciones .barra { flex-wrap: wrap; row-gap: 0.6rem; }

/* El boton del perimetro se distingue del de alta con un borde punteado en
   vez de solido: los dos abren cosas distintas (un mapa contra un
   formulario), y aqui conviene que no se vean identicos. */
.agregar.mapa {
  border-style: dashed;
  background: none;
}

.lista-ubicaciones { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
/* Mismo patron que la lista de clientes: el lugar a la izquierda, lo que
   cuesta a la derecha, y lo secundario apagado debajo. */
.ubicacion {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 0.9rem;
  row-gap: 0.15rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: box-shadow 0.16s, border-color 0.16s, transform 0.16s;
}
.ubicacion:hover {
  box-shadow: var(--sombra-alta);
  border-color: var(--acento);
  transform: translateY(-1px);
}
.ubicacion .nombre {
  font-weight: 650;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.ubicacion .costo {
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ubicacion .abajo {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  color: var(--suave);
  font-size: 0.85rem;
}
.ubicacion .liga-mapa {
  color: var(--acento);
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;          /* objetivo tactil minimo */
  display: inline-flex;
  align-items: center;
}

/* Las dos columnas se conservan en el telefono, igual que en clientes. */

/* El campo de coordenadas, escondido detras de lo que explica para que
   sirve: el caso normal (teclear direccion y ya) jamas lo ve destapado. */
#uRescate summary {
  cursor: pointer;
  color: var(--suave);
  font-size: 0.85rem;
  min-height: 44px;          /* objetivo tactil minimo */
  display: flex;
  align-items: center;
}
#uRescate[open] summary { color: var(--acento); }
#uRescate input { margin-top: 6px; }

/* --- La pestana de Anuncios --- */

.anuncios { margin-top: 2rem; }
.anuncios h2 { font-size: 1.1rem; letter-spacing: -0.01em; }

.lista-anuncios { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
/* Mismo patron que la lista de clientes: lo que identifica a la izquierda, el
   dato que mas se busca a la derecha, y lo secundario apagado debajo. */
.anuncio {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 0.9rem;
  row-gap: 0.15rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: box-shadow 0.16s, border-color 0.16s, transform 0.16s;
}
.anuncio:hover {
  box-shadow: var(--sombra-alta);
  border-color: var(--acento);
  transform: translateY(-1px);
}
.anuncio .nombre {
  font-weight: 650;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  /* El nombre de archivo puede ser larguisimo y jamas debe empujar al cliente
     fuera de la tarjeta: se parte donde sea. */
  overflow-wrap: anywhere;
}
.anuncio .quien {
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
}
.anuncio .donde {
  grid-column: 1 / -1;
  color: var(--suave);
  font-size: 0.85rem;
}

/* Las dos columnas se conservan en el telefono, igual que en clientes: el
   cliente es lo que Isaac busca de un vistazo. Se quito la excepcion el 22 de
   agosto de 2026. */


/* --- Los campos, hechos para el dedo y para leerse con sol --- */

.ficha input,
.ficha select,
.hora-apagado,
#clienteSpot {
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-size: 0.95rem;
  padding: 0 0.7rem;
  min-height: 44px;          /* objetivo tactil minimo */
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ficha input:focus,
.ficha select:focus,
.hora-apagado:focus,
#clienteSpot:focus,
.pestana:focus-visible,
.agregar:focus-visible,
.tarjeta:focus-visible {
  outline: 0;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.ficha fieldset {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  padding: 1rem;
}

.ficha legend {
  font-weight: 650;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tenue);
  padding: 0 0.4rem;
}

.ficha label { color: var(--suave); font-size: 0.86rem; }

/* Cancelar y dar de baja van delineados: el que guarda es el unico relleno. */
.acciones button:not(.agregar) {
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--suave);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.acciones button:not(.agregar):hover { border-color: var(--suave); color: var(--tinta); }
.acciones .baja { color: var(--mal); }
.acciones .baja:hover { border-color: var(--mal); color: var(--mal); }

/* --- Las pestañas viajan al pie en el telefono, al alcance del pulgar --- */
@media (max-width: 620px) {
  body { padding-bottom: 5.5rem; }

  .pestanas {
    position: fixed;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.7rem;
    z-index: 20;
    margin: 0;
    box-shadow: var(--sombra-alta);
    /* Encima de la barra del navegador en los telefonos con muesca. */
    padding-bottom: max(0.3rem, env(safe-area-inset-bottom));
  }

  .pestanas { display: flex; }
  .pestana { flex: 1 1 auto; font-size: 0.8rem; padding: 0 0.5rem; }
  .pestana .icono { display: block; font-size: 1.05em; }
  .pestana { flex-direction: column; gap: 0.1rem; min-height: 50px; }
}

/* --- El letrero de "buscando", con sus puntos que laten --- */

.esperando {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--suave);
  font-size: 0.95rem;
}

.puntos i {
  font-style: normal;
  animation: latir 1.2s infinite;
}
.puntos i:nth-child(2) { animation-delay: 0.2s; }
.puntos i:nth-child(3) { animation-delay: 0.4s; }

@keyframes latir {
  0%, 60%, 100% { opacity: 0.25; }
  30%           { opacity: 1; }
}

/* Quien pidió menos movimiento lo recibe: los puntos se quedan quietos y el
   letrero se lee igual. */
@media (prefers-reduced-motion: reduce) {
  .puntos i { animation: none; opacity: 0.6; }
}

/* El cliente abierto se marca, para que se vea cual esta desplegado sin tener
   que mirar el formulario. Un segundo toque sobre el mismo lo cierra. */
.cliente.abierto {
  border-color: var(--acento);
  box-shadow: var(--sombra-alta), inset 3px 0 0 var(--acento);
}

/* --- Videos: el material, con su renglon propio --- */

.explica {
  color: var(--suave);
  font-size: 0.88rem;
  margin-bottom: 0.9rem;
}

.lista-videos { display: flex; flex-direction: column; gap: 0.5rem; }

.video {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.7rem;
  padding: 0.8rem 0.9rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra);
}
.video .nombre { flex-basis: 100%; font-weight: 650; }
.video .dato { color: var(--suave); font-size: 0.85rem; }

/* 🔴 El selector de orientación, del 27 de agosto de 2026. Nace del monitor de
   pantalla-92, que trae el micro HDMI del lado izquierdo y se gira al revés que
   los demás. Corregirlo pedía entrar por SSH, y el acuerdo del 10 de agosto
   promete manual para que Isaac o Adriel instalen pantallas nuevas ellos
   mismos.

   Ocupa su propio renglón dentro de la caja del apagado: ahí la prueba del
   mínimo táctil de 44 píxeles ya lo barre, y de paso la orientación queda
   separada de las dos órdenes que apagan y reinician. */
.orientacion {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Dice de que son los cuatro numeros, para que se entiendan sin tocarlos. */
.etiqueta-giro {
  font-size: 0.8rem;
  color: var(--tenue);
  white-space: nowrap;
}

/* 🔴 Un desplegable, y jamas botones. Gustavo lo pidio asi el 27 de agosto de
   2026 despues de dos intentos mios: cuatro cajas en el renglon DESBORDAN la
   tarjeta, y el 270 se salia cortado. Un desplegable ocupa lo mismo con
   cualquier cantidad de opciones, y encima en el telefono abre el selector
   nativo, que se toca mejor que cuatro cuadros de 44 pixeles. */
.giro {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;          /* objetivo tactil minimo */
  padding: 0 0.5rem;
  font-size: 0.95rem;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--tinta);
  cursor: pointer;
}

.giro:hover { border-color: var(--tinta); }

/* 🔴 La hora se aplica al presionar Guardar, y jamas al mover el campo, pedido
   por Gustavo el 27 de agosto de 2026. Aparece solo cuando hay algo que
   guardar, para que su presencia signifique "te falta apretar esto". */
.guardar-hora {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.7rem;
  font-size: 0.95rem;
  border: 1px solid var(--acento);
  border-radius: 5px;
  background: var(--acento);
  color: #fff;
  cursor: pointer;
}

/* 🔴 Cancelar, pedido por Gustavo el 27 de agosto de 2026. Sin el, quien teclea
   una hora y se arrepiente carece de salida, y en el telefono jamas es obvio
   como deshacerlo. Va al lado de Guardar y aparece con el. */
.cancelar-hora {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.7rem;
  font-size: 0.95rem;
  border: 1px solid var(--linea);
  border-radius: 5px;
  background: var(--fondo);
  color: var(--tinta);
  cursor: pointer;
}

.cancelar-hora:hover { border-color: var(--tinta); }

/* 🔴 El letrero de la hora, pedido por Gustavo el 27 de agosto de 2026: un
   campo de hora suelto carece de decir de que hora habla, y un tooltip jamas
   existe en un telefono, que es donde este panel se usa. Ocupa su renglon
   completo, arriba del campo. */
.letrero-hora {
  flex: 1 1 100%;
  font-size: 0.8rem;
  color: var(--tenue);
  margin-bottom: -0.1rem;
}

/* La versión que esa pantalla corre, pedida por Gustavo el 27 de agosto de
   2026. Va discreta, al lado del nombre: sirve para comparar de un vistazo cuál
   se quedó atrás, y jamás es lo que Isaac viene a mirar. */
.version-pantalla {
  font-size: 0.75rem;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------- la puerta del panel */

/* Escondida hasta que una llamada vuelva con un 401. */
.entrada { display: none; }

/* Con el panel entero detras: enseñar las tarjetas vacias mientras se pide
   contrasena se lee como que el sistema esta roto, y a Isaac le diria que
   perdio sus pantallas. */
body.pidiendo-contrasena > *:not(.entrada) { display: none; }

body.pidiendo-contrasena .entrada {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  margin: 12vh auto 0;
  padding: 0 20px;
}

.entrada h1 { margin: 0; font-size: 1.5rem; }
.entrada .recado { margin: 0; color: #555; line-height: 1.45; }

/* 44px es el minimo para tocar con el pulgar, y hay una prueba que lo vigila.
   Este panel se usa desde el celular, en la calle, entre visita y visita. */
.entrada input,
.entrada button {
  min-height: 44px;
  font-size: 1rem;
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
}

.entrada input { padding: 0 12px; border: 1px solid #bbb; }

.entrada button {
  border: 0;
  background: #1f3a5f;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.entrada button:disabled { opacity: .6; cursor: default; }

/* Salir y cambiar la contrasena van discretos: se usan una vez cada meses, y
   compiten de cerca con Apagar, que es la orden que de verdad duele. */
.encabezado .sesion { display: flex; gap: 8px; }

/* La liga del manual se ve y se toca igual que sus vecinos: los 44 px son el
   minimo para el pulgar, y hay una prueba que los vigila. Va con la misma
   caja que los botones para que el encabezado se lea como una sola fila. */
.encabezado .sesion .manual {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  color: #555;
  font-size: .85rem;
  text-decoration: none;
}

.encabezado .sesion button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: transparent;
  color: #555;
  font-size: .85rem;
  cursor: pointer;
}

/* La franja de cobros: lo que hay que cobrar esta semana.

   🔴 Corregido el 29 de agosto de 2026: la primera version traia colores
   fijos (#fff6e5, #f0d9a8, #6b4d10), y en tema oscuro se hubiera visto un
   parche crema fijo sobre un fondo casi negro. Isaac abre el panel EN LA
   CALLE, entre visita y visita, que es justo cuando el telefono cambia de
   tema solo. Ahora usa las variables del panel, con el mismo patron que ya
   usan sus hermanos mas cercanos, .aviso y .letrero-hora: superficie
   elevada, borde de acento a la izquierda, y el texto en la tinta de
   siempre, para que se lea como un aviso que llama la atencion sin gritar
   en los dos temas. */
/* Los clientes que cobran dentro de la semana llevan LA MISMA senal que la
   franja de arriba, y jamas un color propio: las dos cosas dicen lo mismo, y
   con dos colores distintos se leen como dos avisos diferentes. Lo pidio
   Gustavo el 1 de septiembre de 2026, con cinco cobros enfrente: la franja
   nombra al primero y dice "y 4 mas", asi que los otros cuatro habia que
   buscarlos leyendo fecha por fecha.
   El relleno de la izquierda se recorta los 2px que el borde engorda, para que
   el nombre siga alineado con el de las tarjetas sin marcar. */
.cliente.por-cobrar {
  border-left: 3px solid var(--acento);
  padding-left: calc(0.9rem - 2px);
}
.cliente.por-cobrar .cobro { color: var(--acento); }

.franja-cobros {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  background: var(--superficie);
  border-left: 3px solid var(--acento);
  color: var(--tinta);
  line-height: 1.45;
}

/* El generador de videos, desde el 2 de septiembre de 2026. */
.generar { width: 100%; margin-top: 10px; }
#formGenerar textarea, #formGenerar select, #formGenerar input[type="file"] {
  width: 100%; min-height: 44px; box-sizing: border-box;
}
label.calidad {
  display: block; min-height: 44px; padding: 10px 8px;
  border-bottom: 1px solid var(--linea, #e3e7ec);
}
label.calidad .que { font-weight: 700; }
label.calidad .cuantos { font-weight: 700; }
label.calidad small { display: block; color: var(--suave, #5c6875); }
#compuerta video { width: 100%; max-height: 55vh; background: #000; }

/* 🔴 El renglon abierto y su ficha se leen como UNA SOLA PIEZA.
   Gustavo, 2 de septiembre de 2026: "lo expandido se pierde con todo lo demas,
   no hay indicio de que realmente es algo expandido que corresponde al clic
   que uno dio. Es terriblemente confuso". La barra de acento del renglon baja
   por el costado de la ficha, asi que el ojo sigue el hilo sin leer nada. */
.abierto {
  border-color: var(--acento) !important;
  box-shadow: inset 4px 0 0 var(--acento);
}
.ficha.pegada {
  margin-top: 0;
  border-left: 4px solid var(--acento);
  border-radius: 0 10px 10px 0;
  padding: 12px 0 12px 12px;
  background: color-mix(in srgb, var(--acento) 5%, transparent);
}

/* El selector de calidad del generador: un desplegable, y jamas radios.
   Gustavo lo escogio el 2 de septiembre de 2026, con el mismo argumento con
   que escogio el del giro el 27 de agosto: ocupa lo mismo con cualquier
   cantidad de opciones, y en el telefono abre el selector nativo.
   ⚠️ Y por que los radios se veian gigantes: .ficha input pone width 100% y
   44px de alto, y #formGenerar lleva la clase ficha. */
#gCalidad select { width: 100%; min-height: 44px; }
.razon-de-calidad {
  margin: 6px 0 0; color: var(--suave); font-size: 0.88rem;
}

/* La espera del generador. Va PEGADA al boton, y jamas suelta abajo: lo que
   Gustavo reclamo el 2 de septiembre de 2026 es que su clic careciera de
   respuesta visible. */
.trabajando {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 0; padding: 12px 14px;
  border-left: 4px solid var(--acento);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--acento) 8%, transparent);
  font-size: 0.92rem;
}
.giro-espera {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--acento) 30%, transparent);
  border-top-color: var(--acento);
  animation: da-vueltas 0.9s linear infinite;
}
@keyframes da-vueltas { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .giro-espera { animation: none; }
}

/* Lo que quedo a medias, para que cerrar la pestaña deje de perder un video. */
/* ⚠️ Se llama asi y jamas .esperando: ese nombre YA lo usa el letrero de
   "buscando", con 2rem de relleno y texto centrado, y esta caja lo heredaba. */
.espera-de-video { cursor: pointer; }

/* 🔴 Un boton deshabilitado tiene que VERSE deshabilitado.
   Gustavo, 3 de septiembre de 2026: "dije que quiero que este deshabilitado el
   boton mientras se esta haciendo". Y SI lo estaba: medido en navegador,
   disabled true con el MISMO color y la MISMA opacidad que vivo. Un boton que
   se ve vivo y jamas responde es peor que uno que se ve muerto.
   Vale para todo el panel, y jamas solo para el generador. */
button:disabled,
fieldset:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.7);
}
fieldset:disabled { cursor: default; }