/* Estilos propios de la aplicación. Todo lo transversal vive en estilos.css;
   aquí solo van piezas que no son del sistema, sino de esta pantalla. */

.cargando-inicial { display: grid; place-items: center; min-height: 60vh; }

/* ---------------------------------------------------------------- login
   Dos columnas: a la izquierda qué es esto, a la derecha el formulario.
   En móvil la columna de marca se oculta entera y queda solo una cabecera
   compacta: el panel completo empujaría el formulario fuera de pantalla,
   que es justo lo que la persona vino a usar. */

.login { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
@media (max-width: 900px) { .login { grid-template-columns: 1fr; } }

/* ── columna de marca ── */

.login-marca {
  position: relative; overflow: hidden;
  display: flex; color: #fff;
  padding: var(--e-10) var(--e-10) var(--e-8);
  background: #0f3f6e;
}
@media (max-width: 900px) { .login-marca { display: none; } }

.lm-fondo { position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(90,170,240,.42) 0%, transparent 58%),
    radial-gradient(95% 80% at 12% 88%, rgba(20,110,180,.45) 0%, transparent 62%),
    linear-gradient(150deg, #0d3a67 0%, #124a80 46%, #0b2f56 100%);
}
/* Trama de puntos, muy tenue: da textura sin competir con el texto. */
.lm-fondo::after {
  content: ""; position: absolute; inset: 0; opacity: .16;
  background-image: radial-gradient(rgba(255,255,255,.75) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(160deg, #000 0%, transparent 62%);
}

.lm-contenido { position: relative; display: flex; flex-direction: column;
                justify-content: space-between; width: 100%; max-width: 520px; }

.lm-cabecera { display: flex; align-items: center; gap: var(--e-3); }
.lm-logo { display: grid; place-items: center; width: 46px; height: 46px; flex: none;
           font-size: 24px; border-radius: 13px;
           background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); }
.lm-org { font-size: var(--t-sm); font-weight: 650; line-height: 1.35; }

.lm-centro { padding: var(--e-10) 0; }
.login-marca h1 { font-size: clamp(34px, 3.6vw, 52px); font-weight: 700;
                  letter-spacing: -.03em; line-height: 1.03; margin-bottom: var(--e-4); }
.lm-bajada { font-size: var(--t-md); line-height: 1.5; color: rgba(255,255,255,.86);
             max-width: 42ch; margin-bottom: var(--e-8); }

.lm-lista { list-style: none; margin: 0 0 var(--e-8); padding: 0; }
.lm-lista li { display: flex; align-items: center; gap: var(--e-3);
               font-size: var(--t-base); font-weight: 550; margin-bottom: var(--e-4);
               color: rgba(255,255,255,.94); }
.lm-icono { display: grid; place-items: center; width: 38px; height: 38px; flex: none;
            font-size: 18px; border-radius: 11px;
            background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.16); }

.lm-muestra { border-radius: var(--r-lg); padding: var(--e-4) var(--e-5) var(--e-3);
              background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
              backdrop-filter: blur(3px); max-width: 380px; }
.lm-muestra-tit { font-size: var(--t-sm); font-weight: 650; }
.lm-pill { font-size: 10.5px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase;
           padding: 2px 8px; border-radius: var(--r-full);
           background: rgba(255,255,255,.18); color: rgba(255,255,255,.92); }
.lm-cifras { display: flex; gap: var(--e-6); margin: var(--e-4) 0 var(--e-2); }
.lm-n { display: block; font-size: var(--t-lg); font-weight: 640; letter-spacing: -.02em; }
.lm-u { display: block; font-size: 10.5px; color: rgba(255,255,255,.66); }
.lm-linea { display: block; width: 100%; height: 46px; color: rgba(255,255,255,.55); }

.lm-pie { font-size: 10.5px; font-weight: 650; letter-spacing: .13em;
          color: rgba(255,255,255,.45); }

/* ── columna del formulario ── */

.login-forma { display: grid; place-items: center; padding: var(--e-8) var(--e-5);
               background: var(--lienzo); }
.lf-caja { width: 100%; max-width: 384px; }
.lf-caja h2 { font-size: var(--t-xl); margin-bottom: var(--e-1); }

.lf-marca-movil { display: none; align-items: center; gap: var(--e-3);
                  font-size: var(--t-md); font-weight: 650; margin-bottom: var(--e-6); }
@media (max-width: 900px) { .lf-marca-movil { display: flex; } }
.lf-marca-movil .lm-logo { color: var(--acento); background: var(--acento-suave);
                           border-color: transparent; width: 40px; height: 40px; }

.lf-opciones { display: flex; align-items: center; justify-content: space-between;
               gap: var(--e-3); margin-top: var(--e-3); }
.lf-boton { margin-top: var(--e-5); min-height: 50px; font-size: var(--t-base); }
.lf-nota { text-align: center; margin-top: var(--e-5); line-height: 1.6; }

.error-login {
  color: var(--grave-tinta); background: var(--grave-suave);
  border-radius: var(--r-md); padding: var(--e-2) var(--e-3); margin-top: var(--e-4);
}

/* -------------------------------------------------------------- cabecera */

/* Rejilla y no flex: el nombre se lleva el espacio sobrante y las acciones
   ocupan lo suyo. Con flex, un nombre largo estrujaba la columna derecha
   hasta que los dos botones se apilaban en vertical. */
.cabecera { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center; gap: var(--e-3); margin-bottom: var(--e-4);
            /* ancla del menú de paciente: colgarlo del nombre lo sacaba de
               pantalla en cuanto el nombre empezaba desplazado a la derecha */
            position: relative; }
.logo-mini { font-size: 26px; line-height: 1; flex: none; }
.ident { min-width: 0; }
.nombre-paciente { font-size: var(--t-lg); font-weight: 640; letter-spacing: -.015em;
                   line-height: 1.2; }
/* La etiqueta del evento indice es larga por naturaleza; se corta a una linea
   en vez de reflujar la cabecera entera. El texto completo va en el panel. */
.sub-paciente { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acciones-cab { display: flex; align-items: center; gap: var(--e-2);
                flex: none; flex-wrap: nowrap; }
.boton-icono { width: var(--toque-min); padding: 0; flex: none; font-size: 15px; }
/* Selector de paciente propio. Un <select> nativo pinta su lista con el estilo
   del sistema —tipografía y azul de selección incluidos— y no hay CSS que lo
   arregle; además solo cabía el nombre corto. */
.cambia-paciente {
  display: flex; align-items: center; gap: var(--e-2);
  font: inherit; border: 0; background: transparent; padding: 0; min-height: 0;
  color: var(--tinta); cursor: pointer; max-width: 100%; text-align: left;
  border-radius: var(--r-sm);
}
.cambia-paciente .punto-color { width: 8px; height: 8px; margin: 0; vertical-align: 0; }
.cambia-paciente .chevron { width: 13px; height: 13px; flex: none; color: var(--tinta-3);
                            transition: transform var(--mov-rapido); }
.cambia-paciente[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.cambia-paciente:hover .chevron { color: var(--tinta-2); }
.cambia-paciente:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }

.menu-paciente {
  position: absolute; top: calc(100% + var(--e-2)); left: 0; z-index: 40;
  width: max-content; min-width: 260px; max-width: 100%;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-md); box-shadow: var(--sombra-3);
  padding: var(--e-1); display: grid; gap: 1px;
}
.menu-paciente[hidden] { display: none; }
.menu-paciente button {
  display: flex; align-items: center; gap: var(--e-3); width: 100%;
  font: inherit; font-size: var(--t-sm); font-weight: 550; text-align: left;
  border: 0; background: transparent; color: var(--tinta); cursor: pointer;
  padding: 0 var(--e-3); min-height: var(--toque-min); border-radius: var(--r-sm);
}
.menu-paciente button:hover { background: var(--superficie-3); }
.menu-paciente button:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.menu-paciente button[aria-selected="true"] { font-weight: 650; }
.menu-paciente .punto-color { margin: 0; vertical-align: 0; }
.menu-paciente .tic { color: var(--acento); font-weight: 700; }

/* En escritorio las pestañas ocupan lo que necesitan: estiradas a 1400 px
   parecen la barra de otra aplicación. En móvil sí van a todo el ancho,
   porque ahí el objetivo es el pulgar. */
.pestanas { display: inline-flex; gap: 2px; background: var(--superficie-3);
            border-radius: var(--r-md); padding: 3px; margin-bottom: var(--e-5); }
.pestanas button {
  flex: 0 0 auto; padding: 0 var(--e-6); font: inherit; font-size: var(--t-sm); font-weight: 550;
  min-height: var(--toque-min); border: 0; border-radius: calc(var(--r-md) - 3px);
  background: transparent; color: var(--tinta-2); cursor: pointer;
  transition: background var(--mov-rapido), color var(--mov-rapido);
}
.pestanas button:hover { color: var(--tinta); }
.pestanas button[aria-pressed="true"] {
  background: var(--superficie); color: var(--tinta);
  box-shadow: var(--sombra-1); font-weight: 640;
}

/* En escritorio el icono sobra: la pestaña ya es una palabra legible. */
.pest-ico { display: none; }

/* ------------------------------------------------- barra inferior en móvil
   Cinco pestañas no caben arriba en 375 px sin encogerlas o hacerlas
   deslizar, y arriba además es donde peor llega el pulgar. Abajo caben las
   cinco con icono, y es donde las busca la mano. */

@media (max-width: 760px) {
  .pestanas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; width: 100%; gap: 0; margin: 0; padding: 0;
    border-radius: 0; border-top: 1px solid var(--borde);
    background: var(--superficie);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Translúcida solo donde el desenfoque existe de verdad: si no, el fondo
     opaco de arriba ya es correcto y no queda un panel gris lavado. */
  @supports (backdrop-filter: blur(1px)) {
    .pestanas { background: color-mix(in srgb, var(--superficie) 82%, transparent);
                backdrop-filter: saturate(180%) blur(18px); }
  }

  .pestanas button {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: var(--e-2) 2px var(--e-1);
    min-height: 58px; border-radius: 0;
    font-size: 10.5px; font-weight: 550; letter-spacing: -.005em;
    background: transparent; box-shadow: none; color: var(--tinta-3);
  }
  .pest-ico { display: block; width: 23px; height: 23px; }
  .pest-txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .pestanas button[aria-pressed="true"] {
    background: transparent; box-shadow: none; color: var(--acento); font-weight: 640;
  }
  /* En táctil no hay hover, y dejarlo hace que la última pulsada se quede
     "encendida" como si estuviera activa. */
  .pestanas button:hover { color: var(--tinta-3); }
  .pestanas button[aria-pressed="true"]:hover { color: var(--acento); }
  .pestanas button:active .pest-ico { transform: scale(.9); }
  .pest-ico { transition: transform var(--mov-rapido); }

  /* Hueco para que la barra no tape el final del contenido. */
  .envoltura { padding-bottom: calc(58px + var(--e-6) + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------- cabecera en movil */

@media (max-width: 640px) {
  .cabecera { gap: var(--e-3); margin-bottom: var(--e-3);
              grid-template-areas: "logo ident acciones"; }
  .logo-mini { font-size: 22px; }
  /* El nombre completo cabe casi siempre en dos lineas; se prefiere eso a
     cortarlo, que es justo lo que se pidio ver entero. */
  .nombre-paciente { font-size: var(--t-md);
                     display: -webkit-box; -webkit-line-clamp: 2;
                     -webkit-box-orient: vertical; overflow: hidden; }
  .cambia-paciente .nombre-paciente { font-size: var(--t-md); }
  .menu-paciente { left: 0; right: 0; width: auto; min-width: 0; }
  .acciones-cab .boton { padding: 0 var(--e-3); }
}

.dias-indice { margin-bottom: var(--e-4); }
.rangebar { display: flex; align-items: center; justify-content: space-between;
            gap: var(--e-3); flex-wrap: wrap; margin: var(--e-6) 0 var(--e-4); }
.span-2 { grid-column: 1 / -1; }
@media (max-width: 620px) { .span-2 { grid-column: auto; } }

.form-captura { max-width: 520px; margin: 0 auto; }

/* ------------------------------------------------------------------ historia */

.grupo-preg { font-size: var(--t-sm); font-weight: 650; color: var(--acento);
              margin: var(--e-5) 0 var(--e-2); }
.lista-preg { margin: 0; padding-left: 20px; }
.lista-preg li { margin-bottom: var(--e-3); }
.lista-preg li > b { font-weight: 650; }
.lista-preg li > span { display: block; font-size: var(--t-sm); color: var(--tinta-2); margin-top: 2px; }
.lista-preg .respuesta { margin-top: var(--e-2); padding: var(--e-2) var(--e-3);
                         background: var(--ok-suave); border-radius: var(--r-sm); color: var(--tinta); }
.etiq-urg { margin-left: var(--e-2); }

.nota-alarma { font-size: var(--t-sm); color: var(--tinta-2); background: var(--superficie-3);
               border-radius: var(--r-md); padding: var(--e-3) var(--e-4); }
.grupo-alerta { font-size: var(--t-sm); font-weight: 650; color: var(--tinta-2);
                margin-bottom: var(--e-2); }
.grupo-alerta.destacado { color: var(--grave-tinta); }
.lista-alerta { margin: 0 0 var(--e-4); padding-left: 18px; }
.lista-alerta li { font-size: var(--t-sm); color: var(--tinta-2); margin-bottom: var(--e-2); }

/* Las señales propias del paciente pesan más que la lista de manual. */
.span-2 .lista-alerta li { color: var(--tinta); font-weight: 500; }

.barra-reporte { display: flex; align-items: center; justify-content: space-between;
                 gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-4);
                 padding: var(--e-4) var(--e-5); background: var(--superficie);
                 border: 1px solid var(--borde); border-radius: var(--r-lg);
                 box-shadow: var(--sombra-1); }

/* --------------------------------------------------------------- edición */

.dialogo {
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); color: var(--tinta);
  padding: 0; width: min(480px, calc(100vw - 2 * var(--e-4)));
  box-shadow: var(--sombra-3);
}
.dialogo::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.dlg-cabecera { padding: var(--e-5) var(--e-5) 0; }
.dlg-cuerpo { padding: var(--e-4) var(--e-5) 0; max-height: 64vh; overflow-y: auto; }
.dlg-pie { display: flex; justify-content: flex-end; gap: var(--e-2);
           padding: var(--e-4) var(--e-5) var(--e-5); }
.dialogo .error-login { margin: 0 var(--e-5); }

/* Aspa de borrado: discreta hasta que se apunta la fila. */
.borrar {
  border: 0; background: transparent; color: var(--tinta-3);
  font-size: 19px; line-height: 1; cursor: pointer;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  opacity: .45; transition: opacity var(--mov-rapido), color var(--mov-rapido),
                            background var(--mov-rapido);
}
.borrar:hover { opacity: 1; color: var(--grave-tinta); background: var(--grave-suave); }
tr:hover .borrar, li:hover .borrar { opacity: .8; }
.col-accion { width: 34px; text-align: right; }
.crono > li > .borrar, .lista-preg li > .borrar { position: absolute; right: 0; top: 0; }
.crono > li, .lista-preg li { position: relative; padding-right: 34px; }
.lista-alerta li { position: relative; padding-right: 30px; }
.lista-alerta .borrar { position: absolute; right: 0; top: -4px; }

/* En táctil no hay hover: los controles se ven siempre. */
@media (pointer: coarse) { .borrar { opacity: .7; width: var(--toque-min); height: var(--toque-min); } }

/* ---------------------------------------------------------------- ajustes */

.rejilla-smtp { display: grid; gap: var(--e-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .rejilla-smtp { grid-template-columns: 1fr; } }
.rejilla-smtp .campo-corto { max-width: 160px; }
/* Los campos con ayuda larga ocupan la fila entera: partidos en dos columnas
   la explicación queda más ancha que el propio campo. */
.rejilla-smtp .campo:has(.ayuda) { grid-column: 1 / -1; }

/* ------------------------------------------------------- tabla de mediciones
   Debajo de 700 px la tabla se sustituye por una tarjeta por toma. Una tabla
   de siete columnas en 375 px no se arregla con scroll horizontal: obliga a
   arrastrar para leer una sola fila y se pierde de vista la fecha. */

.solo-angosto { display: none; }
@media (max-width: 700px) {
  .solo-ancho   { display: none; }
  .solo-angosto { display: block; }
}

.med-fila { border-bottom: 1px solid var(--linea); padding: var(--e-3) 0; }
.med-fila:last-child { border-bottom: 0; }
.med-cab { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2); }
.med-fecha { font-size: var(--t-sm); font-weight: 650; }
.med-cab .borrar { margin-left: auto; }
.med-datos { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.med-n { font-size: var(--t-md); font-weight: 640; letter-spacing: -.015em;
         font-variant-numeric: tabular-nums; }
.med-u { display: block; font-size: 10.5px; color: var(--tinta-3); }
.med-nota { font-size: var(--t-sm); color: var(--tinta-2); margin-top: var(--e-2);
            padding: var(--e-2) var(--e-3); background: var(--superficie-3);
            border-radius: var(--r-sm); }

.paginador { display: flex; align-items: center; justify-content: space-between;
             gap: var(--e-3); padding: var(--e-3) 0; }

/* ------------------------------------------------------ acciones de usuario */

.col-acciones { white-space: nowrap; text-align: right; }
.col-acciones .boton { margin-left: var(--e-2); }
.boton-peligro { color: var(--grave-tinta); }
.boton-peligro:hover { background: var(--grave-suave); border-color: var(--grave); }

/* En móvil los botones se apilan bajo su fila en vez de estirar la tabla. */
@media (max-width: 700px) {
  .col-acciones { white-space: normal; text-align: left; }
  .col-acciones .boton { margin: 2px var(--e-1) 0 0; }
}

/* ---------------------------------------------------------------- personas
   Un solo punto de alta. Las dos opciones —ficha clínica y acceso— se marcan
   con un interruptor que despliega sus campos, en vez de dos pantallas. */

.punto-color { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
               margin-right: var(--e-2); vertical-align: 1px; flex: none; }

.bloque-opcion {
  border: 1px solid var(--borde); border-radius: var(--r-md);
  padding: var(--e-4); margin-bottom: var(--e-4);
  transition: border-color var(--mov-rapido), background var(--mov-rapido);
}
/* La tarjeta se ilumina cuando su casilla está marcada: se ve de un vistazo
   qué va a crearse sin tener que leer los interruptores uno por uno. */
.bloque-opcion:has(input[type="checkbox"]:checked) {
  border-color: var(--acento); background: var(--acento-suave);
}
.bloque-opcion .interruptor { align-items: flex-start; width: 100%; cursor: pointer; }
.bloque-opcion .interruptor input { margin-top: 2px; }
.bloque-opcion .interruptor > span { display: block; min-width: 0; }
.bloque-opcion .interruptor .texto-xs { display: block; margin-top: 2px; }

.opcion-detalle { margin-top: var(--e-4); padding-top: var(--e-4);
                  border-top: 1px solid var(--borde); }
.opcion-detalle[hidden] { display: none; }

.dialogo-ancho { width: min(620px, calc(100vw - 2 * var(--e-4))); }

/* En móvil el diálogo deja de ser una tarjeta flotante y se ancla abajo, que
   es donde llega el pulgar; el pie queda fijo para no perder "Guardar". */
@media (max-width: 640px) {
  .dialogo, .dialogo-ancho {
    width: 100vw; max-width: 100vw; margin: 0; position: fixed;
    bottom: 0; left: 0; right: 0; top: auto;
    border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0;
    max-height: 92vh; display: flex; flex-direction: column;
    z-index: 60;   /* por encima de la barra inferior */
  }
  .dlg-cuerpo { max-height: none; flex: 1 1 auto; }
  .dlg-pie { border-top: 1px solid var(--borde); background: var(--superficie);
             padding-bottom: max(var(--e-5), env(safe-area-inset-bottom)); }
  .dlg-pie .boton { flex: 1 1 0; }
}

/* --------------------------------------------------------------- respaldos */

.resp-linea { display: grid; grid-template-columns: 150px auto 1fr;
              align-items: center; gap: var(--e-3);
              padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); }
.resp-linea:last-of-type { border-bottom: 0; }
.resp-rotulo { font-size: var(--t-sm); font-weight: 600; }

/* En movil el rótulo va encima: tres columnas en 375 px dejan la tercera sin
   sitio y el texto se parte letra a letra. */
@media (max-width: 620px) {
  .resp-linea { grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-3); }
  .resp-rotulo { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------- bitácora */

.rastro { list-style: none; margin: 0; padding: 0; }
.rastro > li { display: grid; gap: var(--e-2);
               padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); }
.rastro > li:last-child { border-bottom: 0; }
.rastro-cab { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
/* La marca de tiempo empuja a la derecha en pantalla ancha y baja de línea
   sola en el teléfono, sin necesidad de una consulta de medios. */
.rastro-cuando { margin-left: auto; }
.rastro .boton { justify-self: start; }

/* Retirar un dato clínico es una acción con peso: el botón lo dice. Se usa
   solo en el diálogo de confirmación, nunca como acción de un toque. */
.boton-peligro-solido {
  background: var(--grave); border-color: var(--grave); color: #fff;
}
.boton-peligro-solido:hover { filter: brightness(.93); }

/* De cuántas tomas y de qué fechas sale cada promedio. Discreto en pantalla,
   pero es lo primero que pregunta un médico al ver una media. */
.ind-ventana { margin-top: var(--e-2); padding-top: var(--e-2);
               border-top: 1px solid var(--linea);
               font-size: var(--t-xs); color: var(--tinta-3);
               font-variant-numeric: tabular-nums; }

/* Selector de unidad del peso, debajo del número. Compacto: es una elección
   que se hace una vez y luego se recuerda, no un control principal. */
.seg-unidad { margin-top: var(--e-2); width: 100%; }
.seg-unidad button { flex: 1 1 0; min-height: 34px; padding: 5px 0; font-size: var(--t-xs); }
@media (pointer: coarse) { .seg-unidad button { min-height: 38px; } }