/* Praksis — hoja de estilos del sistema.
   Sale del mockup de docs/mockups/mockup.html: mismo lenguaje visual,
   sin el andamiaje de navegación que tenía el mockup. */

:root{
  --marino:#0A1A3C;
  --azul:#2B54F5;
  --azul-suave:#EDF1FE;
  --fondo:#F5F6F8;
  --blanco:#fff;
  --borde:#E4E7EC;
  --gris:#6B7280;
  --gris-claro:#9AA1AC;
  --verde:#16794C;
  --verde-bg:#E6F4EC;
  --ambar:#8A5A00;
  --ambar-bg:#FDF3E0;
  --rojo:#B42318;
  --rojo-bg:#FDECEA;
  --r:14px;
  --sombra:0 1px 2px rgba(10,26,60,.04), 0 1px 3px rgba(10,26,60,.03);

  /* superficies y líneas derivadas: son las que cambian con el tema */
  --azul-fuerte:#1F44DA;
  --azul-borde:#C9D6FD;
  --verde-borde:#C6E5D3;
  --rojo-borde:#F0C9C4;
  --hover:#FAFBFC;      /* fila de tabla o celda al pasar el mouse */
  --linea:#F1F2F5;      /* líneas finas de las grillas */
  --riel:#EDEFF3;       /* fondo de barras de progreso */
  --pie:#FBFCFD;        /* pie de modal y cajas internas */
  --activo-bg:#0A1A3C;  /* ítem de menú y segmento elegido */
  --activo-fg:#fff;
  --marino-fijo:#0A1A3C;/* superficies que son marino en los dos temas */
  --ambar-punto:#D9A441;
  --velo:rgba(10,26,60,.34);
  --sombra-alta:0 20px 48px rgba(10,26,60,.20);
  --sombra-media:0 12px 32px rgba(10,26,60,.10);
  --sombra-baja:0 4px 16px rgba(10,26,60,.08);
  --borde-control:#CFD5E0; /* borde de los controles: un punto más firme que --borde */
  --foco:rgba(43,84,245,.16);
  --foco-mal:rgba(180,35,24,.14); /* mismo anillo de foco, en rojo, para el campo con error */
  --flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* Modo oscuro: sólo se recalculan los tokens, ninguna regla se duplica.
   Se enciende con la clase; el modo claro es el que manda por defecto. */
html.oscuro,body.oscuro{
  --marino:#E7ECF6;
  --azul:#7C9BFF;
  --azul-suave:#1C2647;
  --azul-fuerte:#93AEFF;
  --azul-borde:#31406B;
  --fondo:#0B111F;
  --blanco:#141C2E;
  --borde:#26314B;
  --gris:#9CA8BF;
  --gris-claro:#77839C;
  --verde:#5CD3A0;
  --verde-bg:#123227;
  --verde-borde:#1E4B39;
  --ambar:#E9B663;
  --ambar-bg:#33270F;
  --rojo:#FF9187;
  --rojo-bg:#3A1B18;
  --rojo-borde:#5A2A25;
  --hover:#1A2338;
  --linea:#212B43;
  --riel:#212B43;
  --pie:#111928;
  --activo-bg:#2B54F5;
  --activo-fg:#fff;
  --sombra:0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.22);
  --velo:rgba(4,8,16,.62);
  --sombra-alta:0 20px 48px rgba(0,0,0,.55);
  --sombra-media:0 12px 32px rgba(0,0,0,.45);
  --sombra-baja:0 4px 16px rgba(0,0,0,.35);
  --borde-control:#3B4763;
  --foco:rgba(124,155,255,.22);
  --foco-mal:rgba(255,145,135,.20);
  --flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%239CA8BF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--fondo);color:var(--marino);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul{margin:0}
ul{list-style:none;padding:0}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.btn:hover,.nav a:hover,.kpi a:hover,.usuario:hover{text-decoration:none}
a{color:inherit}

/* ---------- estructura app ---------- */

.app{display:flex;min-height:100vh}
.sidebar{
  width:240px;flex:0 0 240px;background:var(--blanco);
  border-right:1px solid var(--borde);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.logo{
  padding:18px 14px 16px 20px;font-weight:600;font-size:17px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:8px;
}
.logo .punto{color:var(--azul)}
.marca-corta{display:none}
.ico{width:18px;height:18px;flex:0 0 18px;display:block}
.ico-chico{width:15px;height:15px;flex:0 0 15px;display:block}
.nav a{gap:11px}
.nav a .ico{color:var(--gris-claro)}
.nav a:hover .ico{color:var(--gris)}
.nav a.activo .ico{color:currentColor}
.nav a .etq{flex:1}

/* estado contraído */
body.compacto .sidebar{width:68px;flex:0 0 68px}
body.compacto .logo{padding:18px 0 16px;justify-content:center}
body.compacto .marca-larga{display:none}
body.compacto .marca-corta{display:inline}
body.compacto .nav{padding:0 10px}
body.compacto .nav a{justify-content:center;padding:9px 0}
body.compacto .nav a .etq,body.compacto .nav a .contador{display:none}
body.compacto .usuario{justify-content:center;padding:14px 0}
body.compacto .usuario .quien{display:none}
.nav{flex:1;overflow-y:auto;padding:0 12px}
.nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;border-radius:9px;text-decoration:none;color:var(--marino);
  font-size:14.5px;margin-bottom:1px;
}
.nav a:hover{background:var(--fondo)}
.nav a.activo{background:var(--activo-bg);color:var(--activo-fg);font-weight:500}
.nav .contador{
  font-size:12px;font-weight:600;background:var(--azul-suave);color:var(--azul);
  border-radius:999px;padding:1px 7px;
}
.nav a.activo .contador{background:rgba(255,255,255,.16);color:#fff}
.usuario{
  width:100%;border:0;border-top:1px solid var(--borde);background:transparent;
  padding:14px 16px;display:flex;gap:10px;align-items:center;text-align:left;
  cursor:pointer;font:inherit;color:inherit;text-decoration:none;
}
a.usuario:hover{background:var(--hover)}
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--azul-suave);color:var(--azul);
  display:grid;place-items:center;font-weight:600;font-size:13px;flex:0 0 34px;
}
.avatar.con-foto,.avatar-lg.con-foto{background:var(--borde);overflow:hidden}
.avatar img,.avatar-lg img{width:100%;height:100%;object-fit:cover;display:block}
.usuario .quien{min-width:0}
.usuario .nom{font-weight:500;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usuario .rol{font-size:12.5px;color:var(--gris)}

/* foto de perfil */
.subir-foto{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.subir-foto .avatar-lg{width:88px;height:88px;flex:0 0 88px;font-size:28px}
.subir-foto label{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.subir-foto input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.subir-foto label:focus-within{outline:2px solid var(--azul);outline-offset:2px}
.subir-foto .ayuda{font-size:12.5px;color:var(--gris)}

.principal{flex:1;min-width:0}
.encabezado{
  background:var(--blanco);border-bottom:1px solid var(--borde);
  padding:0 28px;height:64px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:20;
}
.encabezado h1{font-size:19px;font-weight:600;letter-spacing:-.01em}
.encabezado .sub{font-size:13px;color:var(--gris)}
.titulo-pantalla{display:flex;align-items:center;gap:12px;min-width:0}
.acciones-sistema{display:flex;gap:8px}
.notificaciones{position:relative}
.notificaciones .btn-cuadrado{position:relative}
.punto-notif{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--rojo);border:1.5px solid var(--blanco)}
.menu-notificaciones{
  position:absolute;top:calc(100% + 8px);right:0;width:320px;max-width:calc(100vw - 32px);
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);box-shadow:var(--sombra);
  padding:6px;z-index:30;max-height:360px;overflow-y:auto;
}
.menu-notificaciones[hidden]{display:none}
.mn-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;text-decoration:none}
.mn-item:hover{background:var(--azul-suave)}
.mn-item b{font-size:13px;color:var(--ambar)}
.mn-item span{font-size:13px;color:var(--marino)}
.mn-vacio{padding:14px 12px;font-size:13px;color:var(--gris);text-align:center}
.solo-movil{display:none!important}
@media (max-width:1000px){.solo-movil{display:grid!important}}
.velo-menu{display:none}
.btn-cuadrado{
  width:36px;height:36px;border:1px solid var(--borde);background:var(--blanco);
  border-radius:9px;cursor:pointer;display:grid;place-items:center;color:var(--gris);
}
.btn-cuadrado:hover{border-color:var(--gris-claro);color:var(--marino)}
.btn-cuadrado[aria-pressed="true"]{color:var(--azul);border-color:var(--azul-borde);background:var(--azul-suave)}
.contenido{padding:24px 28px 48px;max-width:1180px}
.contenido.seccion-pacientes{max-width:none}

/* ---------- piezas ---------- */
.tarjeta{
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
  box-shadow:var(--sombra);
}
.tarjeta-cab{
  padding:16px 20px;border-bottom:1px solid var(--borde);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.tarjeta-cab h2{font-size:15.5px;font-weight:600}
.tarjeta-cab .nota{font-size:13px;color:var(--gris)}
.tarjeta-cuerpo{padding:20px}
.tarjeta-pie{padding:12px 20px;border-top:1px solid var(--borde);font-size:13.5px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.kpi{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);box-shadow:var(--sombra);padding:18px 20px}
.kpi .rotulo{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-claro);font-weight:600}
.kpi .valor{font-size:32px;font-weight:600;letter-spacing:-.02em;margin:6px 0 2px;line-height:1.1}
.kpi .ctx{font-size:13px;color:var(--gris)}
.kpi .ctx b{font-weight:600;color:var(--marino)}

.grid-2{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:start}

table{width:100%;border-collapse:collapse}
thead{background:var(--fondo)}
th{
  text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris-claro);font-weight:600;padding:10px 20px;border-bottom:1px solid var(--borde);
}
td{padding:13px 20px;border-bottom:1px solid var(--borde);vertical-align:middle;font-size:14.5px}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--hover)}
.dato-principal{font-weight:600}
.dato-secundario{font-size:13px;color:var(--gris)}
td.num{text-align:right;font-variant-numeric:tabular-nums}
th.num{text-align:right}

.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;
  padding:3px 10px;border-radius:999px;background:var(--fondo);color:var(--gris);white-space:nowrap;
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.chip.ok{background:var(--verde-bg);color:var(--verde)}
.chip.pend{background:var(--ambar-bg);color:var(--ambar)}
.chip.mal{background:var(--rojo-bg);color:var(--rojo)}
.chip.info{background:var(--azul-suave);color:var(--azul)}

.btn{
  border:1px solid var(--borde);background:var(--blanco);border-radius:9px;
  padding:8px 14px;font-size:14px;font-weight:500;cursor:pointer;color:var(--marino);
}
.btn:hover{border-color:var(--gris-claro)}
.btn-primario{background:var(--azul);border-color:var(--azul);color:#fff}
.btn-primario:hover{background:var(--azul-fuerte);border-color:var(--azul-fuerte)}
.btn-texto{border:0;background:transparent;color:var(--azul);padding:6px 8px;cursor:pointer;font-size:14px;font-weight:500}
.btn-texto:hover{text-decoration:underline}

.btn-dictar{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--borde);
  background:var(--blanco);color:var(--azul);border-radius:7px;margin-bottom:6px;
  padding:4px 10px 4px 8px;font-size:13px;font-weight:500;cursor:pointer;
}
.btn-dictar:hover{border-color:var(--azul);background:var(--azul-suave)}
.btn-dictar-icono{flex:none}
.btn-dictar-punto{
  display:none;flex:none;width:8px;height:8px;border-radius:50%;background:var(--rojo);
}
.btn-dictar.grabando{
  border-color:var(--rojo-borde);background:var(--rojo-bg);color:var(--rojo);
}
.btn-dictar.grabando .btn-dictar-punto{
  display:inline-block;animation:pulso-dictar 1.1s ease-in-out infinite;
}
@keyframes pulso-dictar{
  0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.45)}
  50%{box-shadow:0 0 0 5px rgba(220,38,38,0)}
}
.btn-peligro{color:var(--rojo);border-color:var(--rojo-borde)}
.btn-sm{padding:5px 11px;font-size:13.5px}

.progreso{display:flex;align-items:center;gap:10px}
.riel{flex:1;height:6px;border-radius:999px;background:var(--riel);overflow:hidden;min-width:80px}
.riel i{display:block;height:100%;background:var(--azul);border-radius:999px}
.progreso .n{font-size:13px;color:var(--gris);font-variant-numeric:tabular-nums;min-width:38px;text-align:right}

.vacio{padding:36px 20px;text-align:center;color:var(--gris);font-size:14px}
.vacio b{display:block;color:var(--marino);font-weight:600;margin-bottom:4px;font-size:15px}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;background:var(--fondo)}
.login .zona{position:relative;display:grid;place-items:center;padding:40px 20px}
.login .caja{width:100%;max-width:440px}
.login .marca-caja{padding:24px 20px 2px;text-align:center}
.login .marca{display:inline-block;font-size:22px;font-weight:600;letter-spacing:-.01em;color:inherit;text-decoration:none}
.login .marca span{color:var(--azul)}
.login .titulo-login{text-align:center;font-size:22px;font-weight:600;letter-spacing:-.015em;margin:2px 0 6px}
.login .bajada{text-align:center;color:var(--gris);font-size:14.5px;margin:0 0 22px}

/* Panel de marca: sólo aparece cuando hay ancho de sobra. En pantalla
   angosta la tarjeta se queda sola, como siempre. */
.login-lado{display:none}
@media (min-width:1000px){
  .login{grid-template-columns:minmax(400px,42%) 1fr}
  .login .zona{padding:48px 24px}
  .login .volver-inicio{top:24px;right:24px}
  .login .marca-caja{display:none}
  .login .titulo-login{font-size:25px;margin-top:0}
  .login-lado{
    display:flex;flex-direction:column;justify-content:center;gap:30px;
    position:relative;overflow:hidden;padding:56px 52px;
    background:var(--marino-fijo);color:#fff;
  }
  /* Foto de fondo bajo un velo marino: se lee como textura, nunca compite
     con el texto que va encima. */
  .login-lado::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(160deg,rgba(10,26,60,.80),rgba(10,26,60,.93) 55%,rgba(10,26,60,.97)),
      url("/assets/fondo-login.jpg") center/cover no-repeat;
  }
  .login-lado > *{position:relative}
  .login-lado .marca{font-size:26px;font-weight:600;letter-spacing:-.01em;color:inherit;text-decoration:none}
  .login-lado .marca span{color:#7C9BFF}
  .login-lado .lema{
    font-size:27px;line-height:1.3;font-weight:500;letter-spacing:-.015em;
    margin:14px 0 0;max-width:15em;
  }
  .login-lado .cierre{font-size:14px;color:rgba(255,255,255,.62);margin:0;max-width:26em}
}
/* La muestra es una agenda de verdad, en chico: es lo que la persona va a
   ver adentro apenas entre. */
.muestra{
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  background:rgba(255,255,255,.055);padding:16px 18px;max-width:400px;
  backdrop-filter:blur(2px);
}
.muestra .cab{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.5);padding-bottom:11px;margin-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.muestra .t{display:flex;align-items:center;gap:13px;padding:11px 0}
.muestra .t + .t{border-top:1px solid rgba(255,255,255,.08)}
.muestra .h{
  font-size:13px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.55);
  width:42px;flex:0 0 42px;
}
.muestra .q{flex:1;min-width:0}
.muestra .q b{display:block;font-size:14.5px;font-weight:500}
.muestra .q small{font-size:12.5px;color:rgba(255,255,255,.5)}
.muestra .chip{
  font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);
}
.muestra .chip.ok{background:rgba(92,211,160,.16);color:#8FE3C0}
.muestra .chip.debe{background:rgba(233,182,99,.16);color:#EFC98B}
/* ---------- controles de formulario ----------
   Un solo lenguaje para todo control del sistema: mismo alto, mismo radio,
   mismo foco. Vale esté o no dentro de .campo, así ninguna pantalla
   improvisa estilos sueltos. */

.campo{margin-bottom:14px}
.campo label,.rotulo{display:block;font-size:13.5px;font-weight:500;margin-bottom:5px}
.campo .ayuda,.ayuda{font-size:12.5px;color:var(--gris);margin-top:4px}

input[type=text],input[type=email],input[type=password],input[type=search],
input[type=tel],input[type=url],input[type=number],input[type=date],
input[type=time],input[type=datetime-local],input[type=month],
input:not([type]),select,textarea{
  width:100%;min-height:38px;padding:8px 12px;
  border:1px solid var(--borde-control);border-radius:9px;
  font:inherit;font-size:14.5px;line-height:1.45;
  background:var(--blanco);color:var(--marino);
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
input[type=text],input[type=email],input[type=password],input[type=search],
input[type=tel],input[type=url],input:not([type]),select,textarea{
  -webkit-appearance:none;appearance:none;
}
textarea{min-height:76px;resize:vertical;padding-top:9px}

/* editor de la nota clínica: contenteditable con barra de formato */
.editor-nota{border:1px solid var(--borde-control);border-radius:9px;overflow:hidden;background:var(--blanco)}
.editor-nota:focus-within{border-color:var(--azul);box-shadow:0 0 0 3px var(--foco)}
.campo.malo .editor-nota{border-color:var(--rojo-borde)}
.campo.malo .editor-nota:focus-within{box-shadow:0 0 0 3px var(--foco-mal)}
.editor-nota-barra{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px;
  background:var(--pie);border-bottom:1px solid var(--borde);
}
.editor-nota-sep{width:1px;align-self:stretch;margin:2px 4px;background:var(--borde)}
.btn-editor{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:0;border-radius:6px;background:transparent;color:var(--marino);
  font-size:14px;font-weight:600;cursor:pointer;
}
.btn-editor .ico{width:16px;height:16px}
.btn-editor:hover{background:var(--azul-suave);color:var(--azul)}
.btn-editor.activo{background:var(--azul-suave);color:var(--azul)}
.editor-nota-cuerpo{
  min-height:248px;max-height:420px;overflow-y:auto;padding:10px 12px;
  font-size:14.5px;line-height:1.5;color:var(--marino);
}
.editor-nota-cuerpo:focus{outline:0}
.editor-nota-cuerpo p{margin:0 0 .6em}
.editor-nota-cuerpo ul,.editor-nota-cuerpo ol{margin:0 0 .6em;padding-left:1.4em}
.editor-nota-cuerpo blockquote{
  margin:0 0 .6em;padding-left:.9em;border-left:3px solid var(--borde-control);color:var(--gris);
}
.editor-nota-cuerpo a{color:var(--azul)}

/* misma nota, ya guardada, en la lista de registros */
.contenido-nota p{margin:0 0 .6em}
.contenido-nota p:last-child{margin-bottom:0}
.contenido-nota ul,.contenido-nota ol{margin:0 0 .6em;padding-left:1.4em}
.contenido-nota blockquote{
  margin:0 0 .6em;padding-left:.9em;border-left:3px solid var(--borde-control);color:var(--gris);
}
.contenido-nota a{color:var(--azul)}

/* la flecha del desplegable la dibujamos nosotros: la nativa cambia
   de forma en cada navegador */
select{
  padding-right:34px;
  background-image:var(--flecha);
  background-repeat:no-repeat;
  background-position:right 12px center;
}
select::-ms-expand{display:none}

::placeholder{color:var(--gris-claro);opacity:1}

input:hover:not(:disabled):not([type=checkbox]):not([type=radio]):not([type=file]),
select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gris-claro)}

input:focus,select:focus,textarea:focus{
  outline:2px solid transparent;outline-offset:0;
  border-color:var(--azul);box-shadow:0 0 0 3px var(--foco);
}

input:disabled,select:disabled,textarea:disabled,
input[readonly],textarea[readonly]{
  background:var(--fondo);color:var(--gris);cursor:not-allowed;
}

/* número: sin las flechitas nativas, que rompen el alto */
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}

/* fecha y hora: el ícono del navegador se acomoda al tema */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator{
  opacity:.5;cursor:pointer;
}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=time]:hover::-webkit-calendar-picker-indicator{opacity:.9}

/* casillas y opciones: cuadrito y bolita propios, iguales en todos lados */
input[type=checkbox],input[type=radio]{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;flex:0 0 18px;margin:0;padding:0;
  border:1.5px solid var(--borde-control);border-radius:5px;
  background:var(--blanco);display:inline-grid;place-content:center;
  cursor:pointer;vertical-align:-3px;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover:not(:disabled),input[type=radio]:hover:not(:disabled){border-color:var(--azul)}
input[type=checkbox]:checked,input[type=radio]:checked{border-color:var(--azul)}
input[type=checkbox]:checked{background:var(--azul)}
input[type=checkbox]::after{
  content:"";width:5px;height:9px;margin-top:-2px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform .12s ease;
}
input[type=checkbox]:checked::after{transform:rotate(45deg) scale(1)}
input[type=radio]::after{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--azul);
  transform:scale(0);transition:transform .12s ease;
}
input[type=radio]:checked::after{transform:scale(1)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{
  outline:2px solid transparent;box-shadow:0 0 0 3px var(--foco);border-color:var(--azul);
}
input[type=checkbox]:disabled,input[type=radio]:disabled{background:var(--fondo);cursor:not-allowed;opacity:.6}

/* ---------- campos con error ----------
   Un solo lenguaje de validación para todo formulario del sistema: el control
   se pone rojo y debajo aparece una línea con ícono explicando qué falta.
   Lo pinta app.js al enviar, pero el mismo marcado se puede imprimir desde PHP
   (.campo.malo + <p class="error-campo">) cuando el error viene del servidor. */

.campo.malo > label,.malo > .rotulo{color:var(--rojo)}

/* el selector lleva el elemento adelante para pesar más que la regla base
   de los controles (input[type=email] y compañía), que si no gana el borde */
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"],
.campo.malo input:not([type=checkbox]):not([type=radio]),
.campo.malo select,.campo.malo textarea{
  border-color:var(--rojo);
}
input[aria-invalid="true"]:hover:not(:disabled),
select[aria-invalid="true"]:hover:not(:disabled),
textarea[aria-invalid="true"]:hover:not(:disabled),
.campo.malo input:hover:not(:disabled):not([type=checkbox]):not([type=radio]),
.campo.malo select:hover:not(:disabled),
.campo.malo textarea:hover:not(:disabled){border-color:var(--rojo)}

input[aria-invalid="true"]:focus,select[aria-invalid="true"]:focus,textarea[aria-invalid="true"]:focus,
.campo.malo input:focus,.campo.malo select:focus,.campo.malo textarea:focus{
  border-color:var(--rojo);box-shadow:0 0 0 3px var(--foco-mal);
}

input[type=checkbox][aria-invalid="true"],input[type=radio][aria-invalid="true"]{
  border-color:var(--rojo);
}

/* la ayuda se calla mientras haya error: el error dice lo mismo y más */
.malo > .ayuda{display:none}

.error-campo{
  display:flex;align-items:flex-start;gap:6px;
  margin:6px 0 0;font-size:12.5px;line-height:1.4;color:var(--rojo);
  animation:error-entra .16s ease;
}
.error-campo svg{flex:0 0 14px;width:14px;height:14px;margin-top:2px}

@keyframes error-entra{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.error-campo{animation:none}}

/* controles que viven dentro de una tabla o una barra: más chicos y al ancho del contenido */
.control-sm,input.control-sm,select.control-sm,textarea.control-sm{
  min-height:32px;padding:5px 10px;font-size:14px;width:auto;
}
select.control-sm{padding-right:30px;background-position:right 10px center}

/* buscador de listados */
.buscador,input.buscador{width:280px;max-width:100%}

/* casilla con texto al lado */
.check{display:flex;gap:9px;align-items:flex-start;font-size:14px;margin-top:10px}
.check[hidden]{display:none}
.check input{margin-top:2px}
.check span{cursor:pointer}
.login .btn{width:100%;margin-top:6px}
.login .pie{text-align:center;font-size:13.5px;color:var(--gris);margin-top:16px}
/* Botón de salida: arriba a la derecha de la zona, gris y chico, para que no
   compita con la acción principal de la tarjeta. */
.login .volver-inicio{position:absolute;top:16px;right:16px;z-index:1}
.login .volver-inicio .btn{width:auto;margin:0;display:inline-block;color:var(--gris)}
.login .volver-inicio .btn:hover{color:var(--marino)}

/* Entrar con Google: botón neutro con el logo de la marca, y el separador que
   lo despega del formulario de correo y contraseña. */
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-weight:500;color:var(--marino);
}
.btn-google svg{flex:0 0 18px}
.separador-o{
  display:flex;align-items:center;gap:12px;
  margin:16px 0 14px;font-size:13px;color:var(--gris);
}
.separador-o::before,.separador-o::after{content:"";flex:1;height:1px;background:var(--borde)}

/* ---------- registro autoservicio ---------- */
.pasos{display:flex;margin:0 0 20px;padding:0;list-style:none}
.pasos li{
  flex:1;position:relative;text-align:center;
  font-size:12.5px;line-height:1.35;color:var(--gris-claro);
}
/* el riel une el centro de una bolita con el de la anterior */
.pasos li::before{
  content:"";position:absolute;z-index:0;top:17px;right:50%;width:100%;height:4px;
  background:var(--borde);border-radius:2px;transition:background .35s ease;
}
.pasos li:first-child::before{content:none}
.pasos .bolita{
  position:relative;z-index:1;display:grid;place-items:center;
  width:38px;height:38px;margin:0 auto 9px;border-radius:50%;
  background:var(--blanco);border:2px solid var(--borde);
  font-size:14.5px;font-weight:600;color:var(--gris-claro);
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.pasos .etq{display:block;padding:0 4px}

.pasos li.hecho{color:var(--gris)}
.pasos li.hecho::before,.pasos li.actual::before{background:var(--verde)}
.pasos li.hecho .bolita{background:var(--verde);border-color:var(--verde);color:var(--blanco)}

.pasos li.actual{color:var(--marino);font-weight:600}
.pasos li.actual .bolita{
  border-color:var(--verde);color:var(--verde);background:var(--verde-bg);
  box-shadow:0 0 0 4px rgba(22,121,76,.12);
}
@media (prefers-reduced-motion:reduce){
  .pasos li::before,.pasos .bolita{transition:none}
}
@media (max-width:400px){
  .pasos li{font-size:11.5px}
  .pasos .bolita{width:34px;height:34px;font-size:13.5px}
  .pasos li::before{top:15px}
}
.paso-reg[hidden]{display:none}
.resumen-plan{
  border:1px solid var(--borde);border-radius:11px;padding:16px;background:var(--fondo);
}
.resumen-plan .r{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-claro);font-weight:600}
.resumen-plan .precio{font-size:30px;font-weight:600;letter-spacing:-.02em;margin-top:4px}
.resumen-plan .precio span{font-size:15px;font-weight:400;color:var(--gris);letter-spacing:0}
.resumen-plan .det{font-size:13.5px;color:var(--gris);margin-top:2px}

/* ---------- agenda ---------- */
.agenda-barra{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.rango{display:flex;align-items:center;gap:10px}
.rango .sem{font-weight:600;font-size:16px}
.semana{display:grid;grid-template-columns:64px repeat(5,1fr);background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);box-shadow:var(--sombra);overflow:hidden}
.semana .cab{padding:12px 10px;border-bottom:1px solid var(--borde);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-claro);font-weight:600;text-align:center}
.semana .cab b{display:block;font-size:16px;letter-spacing:-.01em;color:var(--marino);text-transform:none;margin-top:2px}
.semana .cab.hoy b{color:var(--azul)}
.semana .hora{padding:8px 10px;font-size:12.5px;color:var(--gris-claro);text-align:right;border-right:1px solid var(--borde);border-bottom:1px solid var(--linea)}
.semana .celda{border-bottom:1px solid var(--linea);border-right:1px solid var(--linea);padding:4px;min-height:54px}
.turno{
  display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--azul);
  background:var(--azul-suave);border-radius:7px;padding:6px 8px;cursor:pointer;font-size:13px;line-height:1.3;
}
.turno b{display:block;font-weight:600;font-size:13.5px}
.turno small{color:var(--gris)}
.turno:hover{filter:brightness(.97)}
.turno.libre{background:transparent;border-left-color:transparent;color:var(--gris-claro);border:1px solid transparent}
.turno.pagado{border-left-color:var(--verde);background:var(--verde-bg)}
.turno.deuda{border-left-color:var(--ambar);background:var(--ambar-bg)}
.turno.pedido{border-left-color:var(--gris);background:var(--hover)}

/* ---------- ficha ---------- */
.ficha-cab{display:flex;gap:16px;align-items:flex-start;padding:20px;border-bottom:1px solid var(--borde);flex-wrap:wrap}
.avatar-lg{width:52px;height:52px;border-radius:50%;background:var(--azul-suave);color:var(--azul);display:grid;place-items:center;font-weight:600;font-size:18px;flex:0 0 52px}
.ficha-cab .nom{font-size:19px;font-weight:600;letter-spacing:-.01em}
.ficha-cab .meta{font-size:13.5px;color:var(--gris);margin-top:2px}
.ficha-cab .acc{margin-left:auto;display:flex;gap:8px}
.pestanas{display:flex;gap:2px;padding:0 20px;border-bottom:1px solid var(--borde)}
.pestanas button{
  border:0;background:transparent;padding:12px 12px;font-size:14.5px;color:var(--gris);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500;
}
.pestanas button[aria-selected="true"]{color:var(--marino);border-bottom-color:var(--azul)}
.datos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 24px;padding:20px}
.dato .r{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-claro);font-weight:600}
.dato .v{font-size:15px;margin-top:3px;display:flex;align-items:center}
.link-whatsapp{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.link-whatsapp svg{color:#25D366;flex-shrink:0}
.link-whatsapp:hover{opacity:.75}
.linea{display:flex;gap:14px;padding:14px 20px;border-bottom:1px solid var(--borde)}
.linea:last-child{border-bottom:0}
.linea .fecha{flex:0 0 92px;font-size:13px;color:var(--gris);font-variant-numeric:tabular-nums;padding-top:1px}
.linea .txt{font-size:14.5px}
.linea .txt b{display:block;font-weight:600;margin-bottom:2px}

/* ---------- portal paciente (mobile) ---------- */
.portal-marco{display:grid;place-items:start center;padding:28px 20px 60px;min-height:100vh}
.telefono{
  width:390px;max-width:100%;background:var(--blanco);border:1px solid var(--borde);
  border-radius:28px;box-shadow:var(--sombra-media);overflow:hidden;
}
.telefono .barra{
  background:var(--marino-fijo);color:#fff;padding:18px 20px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.telefono .barra .hola{font-size:13px;opacity:.65}
.telefono .barra .nom{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-top:1px}
.telefono .barra .yo{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.14);
  display:grid;place-items:center;font-weight:600;font-size:13px;flex:0 0 36px;
}
.p-cuerpo{padding:0 16px 18px;background:var(--fondo)}

/* tarjeta principal: el próximo turno, montada sobre la barra marino */
.p-heroe{
  background:var(--blanco);border-radius:16px;box-shadow:var(--sombra-baja);
  padding:20px;margin:-12px 0 14px;
}
.p-heroe .r{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-claro);font-weight:600}
.p-heroe .dia{font-size:15px;color:var(--gris);margin-top:10px}
.p-heroe .hora{font-size:38px;font-weight:600;letter-spacing:-.03em;line-height:1.05;margin-top:2px}
.p-heroe .quien{font-size:14px;color:var(--gris);margin-top:6px}
.p-heroe .estado{margin-top:12px}
.p-heroe .acc{display:flex;gap:8px;margin-top:16px}
.p-heroe .acc .btn{flex:1;text-align:center;padding:10px 12px}

.p-tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:var(--sombra)}
.p-tarjeta .r{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-claro);font-weight:600;margin-bottom:8px}
.p-saldo{display:flex;align-items:center;justify-content:space-between;gap:14px}
.p-saldo .monto{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.p-saldo .det{font-size:13.5px;color:var(--gris);margin-top:2px}
.p-lista li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--borde);font-size:14px}
.p-lista li:last-child{border-bottom:0}
.p-lista .f{color:var(--gris);font-size:13px}
.p-nav{display:flex;border-top:1px solid var(--borde);background:var(--blanco)}
.p-nav button{flex:1;border:0;background:transparent;padding:11px 4px 14px;font-size:12px;color:var(--gris);cursor:pointer}
.p-nav button[aria-current="true"]{color:var(--azul);font-weight:600;box-shadow:inset 0 2px 0 var(--azul)}
.aviso-push{
  background:var(--azul-suave);border:1px solid var(--azul-borde);border-radius:var(--r);
  padding:14px 16px;margin-bottom:12px;font-size:13.5px;
}
.aviso-push b{display:block;font-weight:600;margin-bottom:3px;font-size:14.5px}
.aviso-push .acc{display:flex;gap:8px;margin-top:10px}
.p-vista{display:none}
.p-vista.activa{display:block}
.p-titulo{font-size:16px;font-weight:600;padding:16px 0 10px}
.nota-lateral{max-width:390px;margin:0 auto;font-size:13px;color:var(--gris);text-align:center;margin-top:14px}

/* ---------- modales ---------- */
dialog{
  background:var(--blanco);border:0;border-radius:var(--r);padding:0;width:min(520px,calc(100vw - 32px));
  box-shadow:var(--sombra-alta);color:var(--marino);
  max-height:calc(100vh - 56px);overflow:hidden;
}
dialog > form,dialog > div{display:flex;flex-direction:column;max-height:calc(100vh - 56px)}
#modal-nota{width:min(max(520px,66vw),calc(100vw - 32px));max-width:none}
dialog > [hidden]{display:none}
.modal-cuerpo{overflow-y:auto}
.modal-cab,.modal-pie{flex:0 0 auto}
dialog::backdrop{background:var(--velo)}
.modal-cab{padding:18px 22px 14px;border-bottom:1px solid var(--borde)}
.modal-cab.sin-borde{border-bottom:0;padding-bottom:10px}
.panel-modal{display:flex;flex-direction:column;min-height:0}
.panel-modal[hidden]{display:none}
.pestanas{flex:0 0 auto}
.modal-cab h2{font-size:17px;font-weight:600;letter-spacing:-.01em}
.modal-cab p{font-size:13.5px;color:var(--gris);margin-top:3px}
.modal-cuerpo{padding:20px 22px}
.modal-pie{padding:14px 22px;border-top:1px solid var(--borde);display:flex;justify-content:flex-end;gap:10px;background:var(--pie);border-radius:0 0 var(--r) var(--r)}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fila-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 16px}
@media (max-width:1000px){.fila-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.fila-4{grid-template-columns:1fr}}

.abecedario{
  display:flex;flex-wrap:wrap;gap:4px;margin:-20px -20px 20px;padding:12px 20px;
  background:var(--fondo);border-bottom:1px solid var(--borde);
}
.abecedario button{
  border:1px solid var(--borde);background:var(--blanco);color:var(--marino);
  min-width:26px;height:26px;padding:0 6px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;
}
.abecedario button[aria-pressed="true"]{background:var(--activo-bg);color:var(--activo-fg);border-color:transparent}
.abecedario button:disabled{color:var(--gris-claro);opacity:.4;cursor:default}
.campo-hora{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}
.campo-hora select{
  text-align:center;text-align-last:center;
  /* padding parejo: el texto queda centrado de verdad y la flecha no lo pisa */
  padding-left:22px;padding-right:22px;background-position:right 7px center;
}
.campo-hora-sep{color:var(--gris);font-weight:500}
.modal-icono{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;margin-bottom:12px}
.modal-icono.alerta{background:var(--rojo-bg);color:var(--rojo)}

/* ---------- control segmentado (día / semana / mes) ---------- */
.segmentado{display:inline-flex;background:var(--blanco);border:1px solid var(--borde);border-radius:9px;padding:3px;gap:2px}
.segmentado a,.segmentado button{
  border:0;background:transparent;padding:5px 14px;border-radius:7px;cursor:pointer;
  font-size:14px;font-weight:500;color:var(--gris);
}
.segmentado a[aria-pressed="true"],.segmentado button[aria-pressed="true"]{background:var(--activo-bg);color:var(--activo-fg)}

.vista{display:none}
.vista.activa{display:block}

/* vista día */
.agenda-con-hoy{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:start}
.dia{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}
.dia-fila{display:grid;grid-template-columns:64px 1fr;border-bottom:1px solid var(--borde)}
.dia-fila:last-child{border-bottom:0}
.dia-fila .h{padding:14px 12px;font-size:12.5px;color:var(--gris-claro);text-align:right;border-right:1px solid var(--borde);font-variant-numeric:tabular-nums}
.dia-fila .c{padding:8px 12px;min-height:60px;display:flex;align-items:center}
.dia-fila .c .turno-caja{width:100%}
.resumen-dia li{display:flex;justify-content:space-between;gap:12px;padding:11px 20px;border-bottom:1px solid var(--borde);font-size:14.5px}
.resumen-dia li:last-child{border-bottom:0}
.resumen-dia .v{font-weight:600;font-variant-numeric:tabular-nums}

/* vista mes */
.mes{display:grid;grid-template-columns:repeat(7,1fr);background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);box-shadow:var(--sombra);overflow:hidden}
.mes .cab{padding:11px 8px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-claro);font-weight:600;text-align:center;border-bottom:1px solid var(--borde)}
.mes .dia-celda{text-decoration:none;color:inherit;
  border-bottom:1px solid var(--linea);border-right:1px solid var(--linea);
  padding:8px;min-height:98px;text-align:left;background:transparent;border-top:0;border-left:0;
  cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:5px;
}
.mes .dia-celda:hover{background:var(--hover)}
.mes .dia-celda:nth-child(7n){border-right:0}
.mes .dia-celda .n{font-size:13.5px;font-weight:600;color:var(--marino)}
.mes .dia-celda.fuera .n{color:var(--gris-claro);font-weight:400}
.mes .dia-celda.hoy .n{background:var(--azul);color:#fff;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;margin:-2px 0 -2px -2px}
.mes .cant{font-size:12.5px;color:var(--gris)}
.puntos{display:flex;gap:3px;flex-wrap:wrap;margin-top:auto}
.puntos i{width:6px;height:6px;border-radius:50%;background:var(--azul);display:block}
.puntos i.pagado{background:var(--verde)}
.puntos i.deuda{background:var(--ambar-punto)}
.puntos i.pedido{background:var(--gris)}

/* ---------- método de pago ---------- */
.metodos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px}
.metodo{
  border:1px solid var(--borde);border-radius:11px;padding:12px;cursor:pointer;
  display:block;text-align:center;background:var(--blanco);
}
.metodo input{position:absolute;opacity:0;pointer-events:none}
.metodo .t{font-weight:600;font-size:14px;display:block}
.metodo .d{font-size:12.5px;color:var(--gris);display:block;margin-top:2px}
.metodo:has(input:checked){border-color:var(--azul);background:var(--azul-suave);box-shadow:0 0 0 1px var(--azul)}
.metodo:has(input:focus-visible){outline:2px solid var(--azul);outline-offset:2px}
.extra-metodo{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--borde)}
.extra-metodo.activa{display:block}
.link-pago{
  display:flex;gap:10px;align-items:center;background:var(--fondo);border:1px solid var(--borde);
  border-radius:9px;padding:9px 12px;font-size:13.5px;color:var(--gris);margin-top:10px;
}
.link-pago code{font-family:inherit;color:var(--marino);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- admin: estado de situación ---------- */
.tabla-mini td,.tabla-mini th{padding:10px 20px}
.barra-apilada{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--riel);margin-bottom:12px}
.barra-apilada i{display:block;height:100%}
.leyenda{display:flex;flex-wrap:wrap;gap:14px;font-size:13.5px}
.leyenda span{display:flex;align-items:center;gap:6px;color:var(--gris)}
.leyenda i{width:8px;height:8px;border-radius:50%;display:block}
.leyenda b{color:var(--marino);font-weight:600}
.delta{font-size:13px;font-weight:600}
.delta.sube{color:var(--verde)}
.delta.baja{color:var(--rojo)}

@media (max-width:900px){
  .agenda-con-hoy{grid-template-columns:1fr}
}

@media (max-width:1000px){
  .dia{grid-template-columns:1fr}
  .metodos{grid-template-columns:1fr}
  .mes .dia-celda{text-decoration:none;color:inherit;min-height:70px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .datos{grid-template-columns:repeat(2,1fr)}
  .solo-movil{display:grid}
  .sidebar{
    position:fixed;top:0;left:0;z-index:40;transform:translateX(-100%);
    transition:transform .18s ease;box-shadow:var(--sombra-alta);
  }
  body.menu-abierto .sidebar{transform:none}
  body.menu-abierto .velo-menu{display:block;position:fixed;inset:0;z-index:30;background:var(--velo)}
  /* en pantalla chica el menú se abre entero, nunca contraído */
  body.compacto .sidebar{width:240px;flex:0 0 240px}
  body.compacto .nav a{justify-content:space-between;padding:8px 10px}
  body.compacto .nav a .etq,body.compacto .usuario .quien{display:block}
  body.compacto .marca-larga{display:inline}
  body.compacto .marca-corta{display:none}
  body.compacto .logo{padding:18px 14px 16px 20px}
  .contenido{padding:20px 16px 40px}
  .banner-panel{margin:20px 16px 0}
  .encabezado{padding:0 16px}
  .semana{grid-template-columns:52px repeat(5,1fr);font-size:13px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- avisos entre pantallas (toast) ---------- */
.avisos{
  position:fixed;top:20px;right:20px;z-index:1000;
  display:grid;gap:8px;width:min(360px,calc(100vw - 40px));
  pointer-events:none;
}
.avisos p{
  margin:0;padding:11px 16px;border-radius:11px;font-size:14.5px;font-weight:500;
  border:1px solid var(--borde);background:var(--blanco);box-shadow:0 8px 24px rgba(10,26,60,.14);
  pointer-events:auto;
  opacity:0;transform:translateY(-8px);
  transition:opacity .3s ease, transform .3s ease;
}
.avisos p.visible{opacity:1;transform:translateY(0)}
.avisos p.aviso-ok{background:var(--verde-bg);border-color:var(--verde-borde);color:var(--verde)}
.avisos p.aviso-error{background:var(--rojo-bg);border-color:var(--rojo-borde);color:var(--rojo)}

/* ---------- banner del panel: próximo turno en vivo ---------- */
.banner-panel{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:var(--azul-suave);border:1px solid var(--azul-borde);border-radius:var(--r);
  padding:12px 16px;margin:24px 28px 0;max-width:1180px;
}
.banner-panel[hidden]{display:none}
.banner-panel .bp-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--marino)}
.banner-panel .bp-info b{font-weight:600}
.banner-panel .bp-acciones{display:flex;gap:8px;align-items:center}

/* ---------- pantallas de sistema ---------- */
.pantalla-sola{
  min-height:100vh;display:grid;place-items:center;padding:40px 20px;
  background:var(--fondo);text-align:center;
}
.pantalla-sola h1{font-size:22px;font-weight:600;margin:0 0 8px}
.pantalla-sola p{color:var(--gris);margin:0 0 20px}

/* ---------- bloque que se abre con una casilla ---------- */
.plegable{display:none;margin-top:12px;padding-top:14px;border-top:1px solid var(--borde)}
.plegable.abierto{display:block}
#bloque-sala.plegable{border-top:none;padding-top:0}

/* ---------- horarios de atención ---------- */
.fila-horario{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--borde)}
.fila-horario:last-child{border-bottom:0}
.fila-horario .campo-hora{flex:0 0 auto;width:140px}
.fila-horario .campo-hora select{
  min-height:34px;padding:6px 20px;font-size:14px;background-position:right 6px center;
}
.fila-horario-apagada .campo-hora,.fila-horario-apagada .dato-secundario{opacity:.45}

/* ---------- sesiones sin cobrar dentro del modal de cobro ---------- */
.sesiones-impagas{
  border:1px solid var(--borde);border-radius:11px;padding:12px 14px;margin-bottom:16px;
  background:var(--pie);max-height:200px;overflow-y:auto;
}
.rotulo-sesiones{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-claro);
  font-weight:600;margin:0 0 8px;
}
.sesion{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--borde);font-size:14.5px}
.sesion:last-child{border-bottom:0}
.sesion .f{flex:1}
.sesion .m{font-weight:600;font-variant-numeric:tabular-nums}
.sesiones-impagas .ayuda{margin:0}

/* ---------- entrar a la videollamada, al lado del turno en la agenda ---------- */
.turno-caja{display:flex;align-items:center;gap:5px;width:100%}
.turno-caja .turno{flex:1;min-width:0}
.entrar-video{
  flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;
  background:var(--azul-suave);border:1px solid #C9D6FD;border-radius:8px;
  color:var(--azul);text-decoration:none;
}
.entrar-video:hover{background:#E3EAFE;text-decoration:none}
.entrar-video svg{width:15px;height:15px;vertical-align:0}
.ico-mini{width:13px;height:13px;vertical-align:-2px}

/* ---------- panel de resumen: desplegable junto a la campana ---------- */
.panel-resumen{position:relative}

.pr-panel{
  position:absolute;top:calc(100% + 8px);right:0;z-index:30;
  display:flex;flex-direction:column;gap:14px;width:320px;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 116px);overflow-y:auto;
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
  box-shadow:var(--sombra);padding:16px 16px 14px;
}
.pr-panel[hidden]{display:none}
.pr-cab h2{font-size:15px;font-weight:600}
.pr-div{border:none;border-top:1px solid var(--borde);margin:0}

.pr-linea{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pr-linea .pr-etiqueta{font-size:14px;color:var(--gris)}
.pr-linea .pr-numero{font-size:17px;font-weight:700;color:var(--marino);font-variant-numeric:tabular-nums}

.pr-seccion{display:flex;flex-direction:column;gap:8px}
.pr-rotulo-seccion{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-claro);font-weight:600}

.pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pr-kpi{background:var(--fondo);border:1px solid var(--borde);border-radius:10px;padding:9px 10px 10px;min-width:0}
.pr-kpi .pr-rotulo{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--gris-claro);font-weight:600}
.pr-kpi .pr-numero{display:block;font-size:20px;line-height:1.25;font-weight:700;color:var(--marino);font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-kpi .pr-nota{display:block;font-size:12px;color:var(--gris)}
.pr-kpi.pr-acento{background:var(--ambar-bg);border-color:#F0D9A0}
.pr-kpi.pr-acento .pr-numero{color:var(--ambar)}
.pr-kpi.pr-acento .pr-nota{color:var(--ambar)}

.pr-proyeccion{
  background:var(--azul-suave);border:1px solid var(--azul-borde);border-radius:10px;padding:12px 13px 13px;
}
.pr-rotulo-proyeccion{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--azul-fuerte);font-weight:600}
.pr-monto-grande{font-size:26px;font-weight:700;color:var(--marino);font-variant-numeric:tabular-nums;line-height:1.3}
.pr-proyeccion .pr-nota{font-size:12.5px;color:var(--gris)}

.pr-deudores{display:flex;flex-direction:column}
.pr-deudores a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;
  font-size:13.5px;color:var(--gris);text-decoration:none;
}
.pr-deudores a:hover{color:var(--azul)}
.pr-monto-rojo{font-weight:600;color:var(--rojo);font-variant-numeric:tabular-nums}
.pr-ver-mas{font-size:13px;color:var(--azul);text-decoration:none;font-weight:500}
.pr-ver-mas:hover{text-decoration:underline}

@media (max-width:1000px){
  .pr-panel{width:min(320px,calc(100vw - 24px));max-height:calc(100vh - 140px)}
}