/* Hoja de estilo del panel.
 *
 * El panel dejó de ser una página de consulta y pasó a ser la herramienta que
 * el dueño abre cada día, así que se parece a una aplicación y no a un
 * documento: barra lateral con secciones, tarjetas sobre fondo gris.
 *
 * Un solo archivo, sin compilar y sin CDN: el panel tiene que abrir en el móvil
 * de alguien con mala cobertura.
 *
 * IDENTIDAD «TURNO» (28/08/2026). Sale del papelito numerado que dan en
 * cualquier clínica u oficina en México: un sistema que ordena una fila y te
 * dice que tu lugar está guardado. De ahí el papel en vez del blanco, la tinta
 * cálida en vez del gris azulado, y el rojo de sello. El porqué de cada
 * decisión está en `.claude/skills/diseno/SKILL.md`.
 */

/* La fuente se sirve desde NUESTRO dominio y no desde Google Fonts: por ahí
 * viajarían las IP de los pacientes de una clínica a un tercero, y hay un
 * abogado revisando la LFPDPPP. Es Archivo, licencia OFL —la licencia va al
 * lado del archivo, que es lo que esa licencia exige—, variable en peso y en
 * ANCHURA: con un archivo de 88 KB salen las cifras anchas del titular y el
 * cuerpo normal.
 *
 * `swap` y no `block`: el texto se lee desde el primer instante con la fuente
 * del sistema y cambia cuando llega. En un móvil con mala cobertura, esperar a
 * la fuente es una pantalla en blanco. */
@font-face {
  font-family: "Archivo";
  src: url("tipo/archivo.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-display: swap;
}

:root {
  /* Tinta cálida, no gris azulado: es tinta sobre papel, no píxeles. */
  --tinta: #14181f;
  --tinta-suave: #4d5661;
  --tinta-tenue: #8b939e;
  --linea: #e4ded3;
  --linea-fuerte: #d3c9b8;   /* el borde de lo que se pulsa o se escribe */
  --fondo: #efeae1;      /* el mostrador */
  --tarjeta: #faf8f4;    /* el papel del billete */

  /* **El rojo de sello es la señal, y por eso se reserva.** Marca la acción
   * principal y nada más. Si tiñera también los estados, dejaría de significar
   * «aquí» y pasaría a ser decoración. */
  --acento: #d1442a;
  --acento-suave: #fbeae5;

  /* `--ok` ya NO es el mismo color que `--acento`, y ese es el cambio de fondo:
   * antes ambos eran el mismo verde, así que «esto va bien» y «pulsa aquí» se
   * decían igual. Verde profundo, y se usa poco. */
  --ok: #2f6b4f;
  --ok-suave: #e6eee7;   /* su fondo, tirando a amarillo para asentar en el papel */
  --alerta: #96600b;     /* ámbar cálido, para que asiente sobre el papel */
  --alerta-suave: #f9f0dc;
  --peligro: #a52318;
  --peligro-suave: #eed3ce;  /* solo como borde: el botón de borrar no se pinta entero */

  /* Sombra apenas perceptible y cálida: la jerarquía la da el papel contra el
   * mostrador, no el relieve. */
  --sombra: 0 1px 2px rgba(20,24,31,.05), 0 1px 3px rgba(20,24,31,.04);
  --radio: 8px;          /* un billete tiene la esquina menos redonda que una app */

  --titular: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 15px/1.55 var(--titular);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- armazón */

.app { display: flex; min-height: 100vh; }

.lateral {
  width: 260px;
  flex: none;
  background: var(--tarjeta);
  border-right: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca { padding: 20px 20px 16px; border-bottom: 1px solid var(--linea); }
.marca .nombre {
  font-size: 15px; font-weight: 650; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.marca .tipo { font-size: 12px; color: var(--tinta-tenue); margin-top: 2px; }

nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
nav button, nav a {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  font: inherit; font-size: 14px;
  background: none; border: 0; border-radius: 7px;
  padding: 9px 11px; cursor: pointer; color: var(--tinta-suave);
  text-decoration: none;
}
nav button:hover, nav a:hover { background: var(--fondo); color: var(--tinta); }
nav button[aria-current="true"], nav a[aria-current="true"] {
  background: var(--tarjeta); color: var(--tinta); font-weight: 650;
  box-shadow: inset 2px 0 0 var(--tinta);
}
nav button .icono, nav a .icono { width: 18px; text-align: center; flex: none; opacity: .85; }
nav button .globo, nav a .globo {
  margin-left: auto; background: var(--linea); color: var(--tinta-suave);
  border-radius: 20px; padding: 1px 7px; font-size: 11px; font-weight: 600;
}
nav button[aria-current="true"] .globo,
nav a[aria-current="true"] .globo { background: var(--tinta); color: var(--tarjeta); }

.pie-lateral {
  padding: 14px 20px; border-top: 1px solid var(--linea);
  font-size: 12px; color: var(--tinta-tenue);
}
.semaforo { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.semaforo .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.semaforo.parado { color: var(--alerta); }
.semaforo.parado .punto { background: var(--alerta); }

/* La marca, al pie de la barra lateral
   -------------------------------------------------------------------------
   Abajo y en pequeño a propósito. Quien abre esto cada día es el dueño de una
   clínica: arriba va SU nombre. La nuestra firma el trabajo, no lo encabeza. */
.firma { margin-top: auto; padding: 16px 18px; display: flex; gap: 7px;
         align-items: center; color: var(--tinta-tenue); font-size: 12px;
         letter-spacing: .01em; }
.firma .billete { width: 15px; height: 15px; flex: none; }

/* ------------------------------------------------------------------ lienzo */

.lienzo { flex: 1; min-width: 0; }

/* La banda ocupa todo el ancho y lo que lleva dentro comparte contenedor con
   el contenido. Sin `.interior`, con el contenido centrado, el título arranca
   pegado a la barra lateral y las tarjetas empiezan mucho más allá: dos ejes
   distintos en la misma pantalla, que es de las cosas que se ven sin saber
   nombrarlas. */
.cabecera {
  background: var(--tarjeta); border-bottom: 1px solid var(--linea);
  padding: 18px 0; position: sticky; top: 0; z-index: 5;
}
.cabecera .interior { max-width: 980px; margin: 0 auto; padding: 0 32px; }
.cabecera h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.cabecera p { margin: 3px 0 0; font-size: 13px; color: var(--tinta-suave); }

.contenido { padding: 24px 32px 64px; max-width: 980px; margin: 0 auto; }
section[hidden] { display: none; }

/* ---------------------------------------------------------------- tarjetas */

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  margin-bottom: 18px; overflow: hidden;
}
.tarjeta > header {
  padding: 14px 18px; border-bottom: 1px solid var(--linea);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.tarjeta > header h2 { margin: 0; font-size: 14px; font-weight: 650; }
.tarjeta > header .pista { font-size: 12.5px; color: var(--tinta-suave); margin: 0; }
.cuerpo { padding: 18px; }
.cuerpo > :first-child { margin-top: 0; }
.cuerpo > :last-child { margin-bottom: 0; }
.pie {
  padding: 12px 18px; border-top: 1px solid var(--linea);
  background: var(--fondo); display: flex; gap: 10px; align-items: center;
}

/* ------------------------------------------------------------------ cifras */

.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
          background: var(--linea); }
.cifras > div { background: var(--tarjeta); padding: 18px; }
.cifras b { display: block; font-size: 26px; font-weight: 650; letter-spacing: -.02em;
            line-height: 1.15; font-variant-numeric: tabular-nums; }
.cifras span { font-size: 12.5px; color: var(--tinta-suave); }
/* Las barras de los avisos por motivo. Una lista suelta no dice qué arreglar;
   ver que tres de cada cinco son por precios, sí. */
.barra { display: grid; grid-template-columns: 200px 1fr 32px; gap: 12px;
         align-items: center; margin-bottom: 8px; font-size: 13.5px; }
.barra:last-child { margin-bottom: 0; }
.barra-nombre { color: var(--tinta-suave); overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.barra-linea { background: var(--fondo); border-radius: 4px; height: 8px; }
.barra-linea i { display: block; height: 100%; border-radius: 4px;
                 background: var(--acento); min-width: 4px; }
.barra-cuenta { text-align: right; font-weight: 650;
                font-variant-numeric: tabular-nums; }

.tendencia { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; }
.tendencia small { font-weight: 400; color: var(--tinta-tenue); display: block;
                   font-size: 11px; margin-top: 1px; }
.tendencia.sube { color: var(--ok); }
.tendencia.baja { color: var(--alerta); }
.tendencia.igual { color: var(--tinta-tenue); font-weight: 400; }

/* ------------------------------------------------------------- formularios */

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
label small { display: block; font-weight: 400; color: var(--tinta-suave);
              margin: 1px 0 5px; font-size: 12.5px; }
input, select, textarea {
  font: inherit; font-size: 14px; width: 100%;
  padding: 8px 11px; border: 1px solid var(--linea-fuerte); border-radius: 7px;
  background: var(--tarjeta); color: var(--tinta);
}
input::placeholder { color: var(--tinta-tenue); }
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px;
                            border-color: var(--acento); }
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.rejilla > label { display: flex; flex-direction: column; }
.rejilla > label input, .rejilla > label select { margin-top: auto; }

.horario { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px;
           align-items: center; }
.horario span { font-size: 13px; font-weight: 600; color: var(--tinta-suave); }
.horario input { margin: 0; }

.fila { display: grid; gap: 8px; margin-bottom: 8px; }
.fila.tres { grid-template-columns: 1fr 130px 1.3fr; }
.fila.dos { grid-template-columns: 1fr 1.6fr; }
/* Tres columnas y la descripción abajo, ocupando la fila entera. Con las
   cuatro en línea, en 940px el nombre y la descripción se quedaban en 270px
   cada uno y salían cortados los dos. El precio va ancho a propósito: es lo
   que hay que verificar, y "Precio según mercado" no puede quedar en
   "Precio según". */
.fila.carta { grid-template-columns: 170px 1fr 170px; gap: 6px; }
.fila.carta .ancha { grid-column: 1 / -1; }
.fila.carta + .fila.carta { margin-top: 12px; padding-top: 12px;
                            border-top: 1px dashed var(--linea); }
.par-color { display: flex; gap: 8px; margin-top: auto; }
.par-color input[type=color] { width: 46px; padding: 3px; flex: none; cursor: pointer; }

/* La vista previa del widget, a escala. Sirve para ver el contraste real del
   texto sobre el color antes de guardarlo, que es lo único que no se puede
   juzgar mirando un hex.
   ------------------------------------------------------------------ AJENOS
   Los únicos hex sueltos del archivo, y a propósito: esto NO es nuestra
   pantalla, es la del cliente pintada en miniatura. Con el papel de la marca
   mentiría —el widget es blanco en la web de todo el mundo— y el dueño estaría
   juzgando el contraste de su color contra un fondo que no va a tener. Fuera
   de estas llaves, colores por nombre. */
.muestra { position: relative; width: 260px; border-radius: 10px;
           border: 1px solid var(--linea); overflow: hidden; background: #fff;
           box-shadow: var(--sombra); }
.muestra-cabecera { background: var(--muestra); color: #fff; padding: 9px 12px;
                    font-size: 13px; font-weight: 600; display: flex;
                    justify-content: space-between; }
.muestra-cuerpo { padding: 12px; min-height: 62px; background: #fff; }
.muestra-globo { display: inline-block; background: #f2efe9; border-radius: 8px;
                 padding: 7px 10px; font-size: 12.5px; box-shadow: var(--sombra); }
/* ------------------------------------------------------------- FIN AJENOS */
.muestra-burbuja { position: absolute; right: 10px; bottom: 10px; width: 34px;
                   height: 34px; border-radius: 50%; background: var(--muestra);
                   display: flex; align-items: center; justify-content: center;
                   font-size: 17px; }
.subida { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.subida label { flex: 1; min-width: 260px; margin-bottom: 0; }
.subida input[type=file] { padding: 7px 9px; background: var(--fondo); }

.accion {
  display: inline-block; text-decoration: none;
  font: inherit; font-size: 14px; font-weight: 600;
  background: var(--acento); color: var(--tarjeta); border: 0; border-radius: 7px;
  padding: 9px 16px; cursor: pointer;
}
.accion:hover { filter: brightness(1.08); color: var(--tarjeta); }
.accion.suave {
  background: var(--tarjeta); color: var(--tinta-suave); border: 1px solid var(--linea-fuerte);
}
.accion.suave:hover { background: var(--fondo); color: var(--tinta); filter: none; }
.accion.menor { padding: 5px 10px; font-size: 12.5px; font-weight: 600; }
.accion.peligro { color: var(--peligro); border-color: var(--peligro-suave);
                  background: var(--tarjeta); }

/* --------------------------------------------------------------- enlaces */

a { color: var(--tinta); text-decoration-color: var(--linea-fuerte);
    text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--acento); text-decoration-color: var(--acento); }

/* --------------------------------------------------------------- avisos */

.aviso {
  border-radius: var(--radio); padding: 13px 16px; font-size: 13.5px;
  display: flex; gap: 11px; align-items: flex-start; margin-bottom: 18px;
}
.aviso .icono { flex: none; font-size: 15px; line-height: 1.4; }
.aviso.ok { background: var(--ok-suave); color: var(--ok); }
.aviso.pendiente { background: var(--alerta-suave); color: var(--alerta); }
.aviso b { font-weight: 650; }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }
.aviso li { margin: 2px 0; }
.aviso p { margin: 6px 0 0; opacity: .85; }

/* --------------------------------------------------------------- tablas */

.rodillo { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.rodillo table { min-width: 520px; }
th {
  text-align: left; font-size: 11px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-tenue);
  padding: 10px 18px; background: var(--fondo); border-bottom: 1px solid var(--linea);
}
td { padding: 11px 18px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--fondo); }
.numero { font-variant-numeric: tabular-nums; }

.etiqueta {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}
.etiqueta.verde { background: var(--ok-suave); color: var(--ok); }
.etiqueta.ambar { background: var(--alerta-suave); color: var(--alerta); }
.etiqueta.gris  { background: var(--fondo); color: var(--tinta-suave); }

.separador { border: 0; border-top: 1px solid var(--linea); margin: 0; }
.subtitulo { font-size: 12px; font-weight: 650; text-transform: uppercase;
             letter-spacing: .04em; color: var(--tinta-tenue); margin: 0 0 12px; }
.vacio { color: var(--tinta-tenue); font-size: 13.5px; padding: 22px 18px;
         text-align: center; margin: 0; }
.nota { font-size: 12.5px; color: var(--tinta-suave); }

.atender { display: flex; gap: 5px; align-items: center; }
.atender input[type=text] { min-width: 190px; }

td.acciones { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
td form { margin: 0; display: flex; gap: 5px; align-items: center; }
td form input { width: auto; padding: 4px 7px; font-size: 12.5px; }

details { border-bottom: 1px solid var(--linea); }
details:last-child { border-bottom: 0; }
summary { cursor: pointer; padding: 12px 18px; font-size: 13.5px;
          list-style: none; display: flex; gap: 10px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸"; color: var(--tinta-tenue); font-size: 11px; }
details[open] summary::before { content: "▾"; }
details > div { padding: 0 18px 14px 40px; }
.linea { margin: 5px 0; font-size: 13.5px; }
.linea b { color: var(--tinta-suave); font-weight: 650; }

/* ---------------------------------------------------------------- móvil */

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .lateral {
    width: 100%; height: auto; position: static;
    border-right: 0; border-bottom: 1px solid var(--linea);
  }
  nav { flex-direction: row; overflow-x: auto; padding: 8px; gap: 4px; }
  nav button, nav a { width: auto; white-space: nowrap; }
  nav button .globo, nav a .globo { margin-left: 6px; }
  .pie-lateral { display: none; }
  /* Nuestra firma también: en un teléfono el alto es del cliente, no
     nuestro. La marca ya está en el favicon de la pestaña. */
  .firma { display: none; }
  .cabecera { padding: 14px 0; position: static; }
  .cabecera .interior { padding: 0 18px; }
  .contenido { padding: 16px 14px 48px; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .rejilla { grid-template-columns: 1fr; }
  .fila.tres, .fila.dos, .fila.carta { grid-template-columns: 1fr; }
  .barra { grid-template-columns: 1fr 40px; }
  .barra-linea { grid-column: 1 / -1; }
  .horario { grid-template-columns: 1fr; gap: 4px; }
  .horario span { margin-top: 8px; }
  table { font-size: 13px; }
  th, td { padding: 9px 12px; }
}

/* Repartir permisos
   -------------------------------------------------------------------------
   Las casillas se pintan grandes y con su explicación debajo a propósito: aquí
   se decide quién lee la conversación de un paciente, y una lista compacta de
   doce etiquetas técnicas se marca sin leerla. */
details > form { padding: 0 18px 16px; }
.grupo-permisos { border: 1px solid var(--linea); border-radius: 8px;
                  padding: 10px 14px 12px; margin: 0 0 12px; }
.grupo-permisos legend { font-size: 11.5px; text-transform: uppercase;
                         letter-spacing: .06em; color: var(--tinta-tenue);
                         padding: 0 6px; }
.casilla { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0;
           cursor: pointer; }
.casilla + .casilla { border-top: 1px solid var(--linea); }
.casilla input { margin-top: 3px; flex: none; }
.casilla span { font-size: 13.5px; line-height: 1.35; }
.casilla small { display: block; color: var(--tinta-tenue); font-size: 12px;
                 margin-top: 2px; }
/* Una casilla en gris es un permiso que quien reparte tampoco tiene. Se enseña
   en vez de esconderse: saber que existe y que no es tuyo evita la llamada
   preguntando dónde está. */
.casilla input:disabled + span { opacity: .45; cursor: not-allowed; }
.en-linea { display: flex; gap: 6px; align-items: center; }
select.menor { font-size: 12.5px; padding: 3px 6px; }

/* Instrucciones de instalación: van dentro de un `details`, y una lista con
   sangría de navegador se sale del recuadro. */
.pasos { margin: 6px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; }
.pasos li + li { margin-top: 5px; }
.pasos code { background: var(--fondo); padding: 1px 4px;
              border-radius: 4px; font-size: 12.5px; }

/* La firma de la dirección: el número
   -------------------------------------------------------------------------
   «Turno» dice que la cifra es el héroe. Se pone ancha —la fuente es variable
   en anchura y aquí se estira— y la etiqueta debajo, diminuta y en mayúsculas
   pequeñas, como en el papelito. Las cifras tabulares evitan que el número
   baile al cambiar de valor. */
.cifras b {
  font-family: var(--titular);
  font-stretch: 125%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
}
.cifras span:not(.tendencia) {
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tinta-tenue);
}
h1, h2, .marca .nombre { font-family: var(--titular); font-stretch: 108%; }


/* Iconos de la barra lateral
   -------------------------------------------------------------------------
   Trazos de Lucide (licencia ISC), incrustados: seis rutas son un kilobyte y
   evitan una petición más en un móvil con mala cobertura. Sustituyen a los
   glifos Unicode que había —◧ ◌ ▤ ◭ ⚙ ◔—, que se dibujaban distinto en cada
   sistema y en Windows alguno salía como un cuadrado vacío. Eso no era estilo,
   era fragilidad. */
nav .icono { display: inline-flex; width: 17px; height: 17px; flex: none;
             color: var(--tinta-tenue); }
nav button[aria-current="true"] .icono { color: var(--tinta); }
nav .icono svg { width: 100%; height: 100%; }