/* ============================================================
   MUESTRA · PANEL DEL CONSULTORIO — los ajustes de la muestra
   ------------------------------------------------------------
   Se carga ÚLTIMO, después de panel.css (el CSS real del
   sistema), marca-helsek.css y muestra.css. Hace tres cosas y
   nada más:

     1. Acomoda el panel abajo de la cinta de demostración.
     2. Le devuelve al panel lo que muestra.css le pisa por
        llegar después (los botones, sobre todo).
     3. Aporta las clases que en el sistema real viven en otro
        archivo (el toggle Día/Mes) o en atributos style, que
        acá no se pueden usar por la CSP.

   Regla de la casa: acá NO se estiliza el panel. Si algo se ve
   distinto al sistema, es un error de esta hoja, no una mejora.
   ============================================================ */

/* ============================================================
   1. LA CINTA Y LAS DOS CAPAS PEGADAS
   ------------------------------------------------------------
   La cinta es position:fixed y mide --cinta-alto (34px).
   muestra.css ya empuja el body con .con-cinta, pero eso no
   alcanza: el panel tiene DOS capas sticky que se calculan
   contra el viewport, no contra el body, y por lo tanto se
   meten abajo de la cinta.

     · .topbar  → sticky top:0       → tapada por la cinta
     · .sidebar → sticky top:0 y
                  height:100vh       → se va 34px abajo del
                                        borde y el pie del menú
                                        queda cortado

   Las dos arrancan donde termina la cinta, y el alto del
   sidebar se descuenta. Lo mismo en el cajón móvil (≤920px),
   donde el sidebar pasa a position:fixed.
   ============================================================ */
.topbar { top: var(--cinta-alto); }

.sidebar {
  top: var(--cinta-alto);
  height: calc(100vh - var(--cinta-alto));
}

/* El .app pide 100vh de mínimo; con el body empujado 34px eso
   deja una tira de scroll de más al final de la página. */
.app { min-height: calc(100vh - var(--cinta-alto)); }

@media (max-width: 920px) {
  .sidebar {
    top: var(--cinta-alto);
    height: calc(100vh - var(--cinta-alto));
    height: calc(100dvh - var(--cinta-alto));
  }
  /* El velo del cajón también empieza abajo de la cinta: si
     cubriera la cinta, el botón "Salir" quedaría muerto. */
  .velo-menu { top: var(--cinta-alto); }
}

/* La barra de navegación entre muestras vive fija abajo (~62px
   con su margen). El contenido y los avisos tienen que dejarle
   aire o les tapa la última fila. */
.contenido { padding-bottom: 96px; }
#toasts { bottom: 78px; }

@media (max-width: 760px) {
  .contenido { padding-bottom: 104px; }
}

/* ============================================================
   2. LO QUE MUESTRA.CSS LE PISA AL PANEL
   ------------------------------------------------------------
   muestra.css se carga DESPUÉS de panel.css y trae sus propios
   .btn, body y encabezados —los de la landing de Helsek—. Con
   la misma especificidad y llegando más tarde, le gana al
   panel: sin esto TODOS los botones quedan azules (el .btn de
   la landing pinta background, y .btn-secundario deja de
   existir a los ojos de la cascada).

   Los valores de acá están copiados de panel.css, no elegidos.
   ============================================================ */
body {
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.55;
  background: var(--fondo);
  color: var(--tinta);
}

h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 800; letter-spacing: -.015em; }
h1 { font-size: 26px; line-height: 1.2; }
h2 { font-size: 20px; line-height: 1.25; }
h3 { font-size: 16px; letter-spacing: -.015em; }
.tarjeta .encabezado h2 { margin: 0; }

/* --- Botones: el .btn del panel, tal cual --- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fuente); font-weight: 700; font-size: 14px;
  letter-spacing: normal;
  padding: 9px 16px;
  border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--tinta);
  box-shadow: none;
  cursor: pointer; line-height: 1.3;
  transition: background .15s, border-color .15s, color .15s, transform .12s ease-out;
}
/* El hover de la landing levanta el botón y lo pinta de azul: los
   dos efectos se van, y cada variante vuelve a decidir su hover. */
.btn:hover { transform: none; box-shadow: none; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

.btn-primario { background: var(--indigo); color: #fff; border-color: transparent; }
.btn-primario:hover { background: var(--indigo-osc); color: #fff; }
.btn-secundario { background: var(--blanco); color: var(--tinta); border-color: var(--linea); }
.btn-secundario:hover { background: var(--blanco); border-color: var(--tinta-3); }
.btn-peligro { background: var(--rojo-suave); color: var(--rojo); border-color: transparent; }
.btn-peligro:hover { background: #F6D7D9; }
.btn-menta { background: var(--menta); color: #fff; border-color: transparent; }
.btn-menta:hover { background: #0C8A73; color: #fff; }
.btn-chico { padding: 5px 11px; font-size: 13px; border-radius: 8px; }

/* ============================================================
   3. CLASES QUE EL PANEL TRAE EN OTRO ARCHIVO O EN style=""
   ------------------------------------------------------------
   El toggle Día/Mes vive en turnos-planilla.css, que la muestra
   no carga (es la hoja de la vista de MES, y la muestra sólo
   tiene la de día). Estas reglas son ese archivo, copiadas.
   ============================================================ */
.tp-vista-toggle {
  display: inline-flex;
  border: 1.5px solid var(--linea); border-radius: var(--radio-s);
  overflow: hidden; background: var(--blanco); flex: 0 0 auto;
}
.tp-vista-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  font-family: var(--fuente); font-size: 13.5px; font-weight: 700;
  color: var(--tinta-2);
  border: 0; background: transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .12s, color .12s;
}
.tp-vista-btn + .tp-vista-btn { border-left: 1.5px solid var(--linea); }
.tp-vista-btn:hover { background: #F0F2F9; color: var(--tinta); }
.tp-vista-btn.activo { background: var(--indigo); color: #fff; }
.tp-vista-btn.activo:hover { background: var(--indigo-osc); color: #fff; }

/* --- Los style="" del sistema, pasados a clase (la CSP de la
       muestra no permite atributos style propios) --- */
.campo-fecha {
  border: 1.5px solid var(--linea); border-radius: 8px;
  padding: 6px 10px;
  font-family: inherit; font-size: 14px; color: var(--tinta);
  background: var(--blanco);
}
.campo-relativo { position: relative; }
.campo-ancho { grid-column: span 2; }
.btn-derecha { margin-left: auto; }
.acciones-encabezado { display: flex; gap: 8px; flex-wrap: wrap; }
.dato-fuerte { font-weight: 700; }
.ayuda-roja { color: var(--rojo); }
.label-checkbox { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.label-checkbox input[type="checkbox"] { width: auto; }
.sumario-papelera { cursor: pointer; font-weight: 700; font-size: 15px; }
.paginacion { margin-top: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
.celda-derecha { text-align: right; white-space: nowrap; }
.nada-que-ver { margin: 0; }
.ficha-pills { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.titulo-apretado { margin-bottom: 2px; }
.bloque-texto { white-space: pre-wrap; }
[hidden] { display: none !important; }

/* Las sugerencias de paciente del modal de turno: en el sistema
   son un div con style inline. Mismos valores. */
#nt-sugerencias {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 10px;
  box-shadow: var(--sombra-flotante);
  z-index: 10; max-height: 220px; overflow-y: auto;
}
#nt-sugerencias .sugerencia {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer;
  font-family: var(--fuente); font-size: 14px; color: var(--tinta);
  padding: 9px 12px; line-height: 1.35;
}
#nt-sugerencias .sugerencia + .sugerencia { border-top: 1px solid var(--linea); }
#nt-sugerencias .sugerencia:hover,
#nt-sugerencias .sugerencia:focus { background: var(--azul-suave); }
#nt-sugerencias .sugerencia small { display: block; color: var(--tinta-3); font-size: 12.5px; }

/* --- Piezas que el CSS del sistema NO define, porque en el
       sistema las resuelve el PHP con un style="" o viven en una
       hoja que la muestra no carga. Verificado con grep contra
       panel.css: ninguna de estas existe ahí. --- */

/* El cuerpo y el pie del modal: el sistema pone los botones
   sueltos al final de .modal-caja. Acá van agrupados para poder
   alinearlos a la derecha sin un style inline. */
.modal-cuerpo { margin-bottom: 4px; }
.modal-acciones {
  display: flex; justify-content: flex-end; gap: 8px;
  flex-wrap: wrap; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--linea);
}

/* "Pacientes conjuntos" va indentado bajo "Pacientes": en el
   sistema es un style="padding-left:34px" en el <a>. */
.nav-panel a.nav-sub { padding-left: 34px; }

/* El bloque de la fecha en la cabecera de la agenda existe en el
   markup del sistema pero no tiene regla propia: es un div que
   sólo agrupa. Se declara para que quede explícito que no se
   olvidó, y para que el chip "hoy" no empuje la línea de abajo. */
.agenda-cab-fecha { min-width: 0; }

/* ============================================================
   4. AGREGADOS PROPIOS DE LA MUESTRA
   ------------------------------------------------------------
   Dos cosas que el sistema real no dibuja porque no le hacen
   falta, y en una muestra sí:

   · el corte del mediodía. En el sistema los horarios salen de
     las franjas configuradas y entre las 12:30 y las 14:00
     simplemente no hay filas; a quien mira la muestra por
     primera vez eso se le lee como "faltan turnos", no como
     "no se atiende". Se marca con una línea, no con un slot
     falso.
   · el canal por el que entró el turno, que en el sistema es
     un "Pedido online" en el renglón de abajo. En la muestra
     va además como pill, porque es justo lo que se está
     vendiendo: que el turno del portal entra solo.
   ============================================================ */
.corte-mediodia {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 2px 16px;
  font-size: 12.5px; font-weight: 700; color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .08em;
}
.corte-mediodia::before,
.corte-mediodia::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--linea);
}
.corte-mediodia .fa { color: var(--tinta-3); }

/* El nombre del paciente y sus pills, en una línea que envuelve
   bien cuando son cinco. El sistema los deja inline; a 360px de
   ancho eso apila las pills contra el nombre. */
.slot .paciente-nombre {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}

/* El icono del canal, abajo de la hora: un globo si el turno
   entró por la web, un teléfono si lo tomó alguien. Es el dato
   que más importa de toda la pantalla para la venta, así que
   está dos veces —acá chico y en el renglón de abajo escrito—
   pero sin gritar. */
.slot .hora .slot-canal {
  display: block; margin-top: 4px;
  font-size: 12px; color: var(--tinta-3);
}

/* El contador de turnos que entraron solos, empujado a la
   derecha del resumen. El sistema usa un style="margin-left:auto"
   para el mismo lugar. */
.agenda-resumen .resumen-portal { margin-left: auto; }

/* La salida del toast. panel.css le da la entrada pero no la
   salida: sin esto desaparecen de golpe. */
.toast.yendose {
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}

/* Las filas del listado de pacientes abren la ficha: que se vea. */
.tabla tbody tr.fila-paciente { cursor: pointer; }

/* ============================================================
   5. MENOS MOVIMIENTO: AQUIETAR, NO APAGAR
   ------------------------------------------------------------
   ⚠️ panel.css trae un barrido con !important que le pone
   animation-duration:.01ms a TODO lo que no esté en su :not().
   Eso no apaga: deja cada animación clavada en su último frame.
   Para los dos loops de la muestra el último frame es el punto
   chico y apagado, o sea se ven como un adorno roto —y la
   máquina desde la que se revisa esto pide menos movimiento
   siempre, así que ese es el estado que se ve.

   Los dos vuelven a correr, mucho más lentos. El resto del
   barrido se respeta: las transiciones quedan apagadas y eso
   está bien, un cambio instantáneo no se lee como roto.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cinta .punto {
    animation: latir 7s var(--curva) infinite !important;
    animation-iteration-count: infinite !important;
  }
  .pill-respira::before {
    animation: respirar 7s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
}