/* ANiA PSI — sistema de diseño, copiado 1:1 de Praksis (docs/ux-ui-guia-generica.md
   nace de ese sistema real). Mismos tokens, mismos nombres de clase, mismo
   comportamiento de tema — para que no haya "parecido", sino el mismo
   lenguaje visual. Fuente: ~/Documents/Sistema de Gestión para
   Profesionales con Pacientes/assets/app.css. */

: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);

  --azul-fuerte:#1F44DA;
  --azul-borde:#C9D6FD;
  --verde-borde:#C6E5D3;
  --ambar-borde:#EFDCB4;
  --rojo-borde:#F0C9C4;
  --hover:#FAFBFC;
  --linea:#F1F2F5;
  --pie:#FBFCFD;
  --activo-bg:#0A1A3C;
  --activo-fg:#fff;
  --borde-control:#CFD5E0;
  --foco:rgba(43,84,245,.16);
  --marino-fijo:#0A1A3C; /* superficies que son marino en los dos temas (login) */
  --riel:#EDEFF3;
  --verde-solido:#16794C; /* fondo sólido del toast, --verde en oscuro es claro (pensado para texto) */
  --rojo-solido:#B42318;
  color-scheme:light;
}

/* Modo oscuro: se enciende con la clase (ver assets/js/psi-ui.js), no con
   prefers-color-scheme — el claro es el que manda por defecto. */
html.oscuro, body.oscuro{
  --marino:#E7ECF6;
  --azul:#7C9BFF;
  --azul-suave:#1C2647;
  --azul-fuerte:#93AEFF;
  --azul-borde:#31406B;
  --verde-borde:#1E4B39;
  --ambar-borde:#5A4520;
  --rojo-borde:#5A2A25;
  --fondo:#0B111F;
  --blanco:#141C2E;
  --borde:#26314B;
  --gris:#9CA8BF;
  --gris-claro:#77839C;
  --verde:#5CD3A0;
  --verde-bg:#123227;
  --ambar:#E9B663;
  --ambar-bg:#33270F;
  --rojo:#FF9187;
  --rojo-bg:#3A1B18;
  --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);
  --borde-control:#3B4763;
  --foco:rgba(124,155,255,.22);
  --verde-solido:#1E8F5C;
  --rojo-solido:#D8382A;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  font-family:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--fondo);color:var(--marino);font-size:15px;
  -webkit-font-smoothing:antialiased;
}
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;text-decoration:none;color:inherit;
}
.logo .punto{color:var(--azul)}
.ico{width:18px;height:18px;flex:0 0 18px;display:block}
.ico-servicio{width:16px;height:16px;flex:0 0 16px;vertical-align:-3px;margin-right:4px;color:var(--gris)}
.nav-lateral{flex:1;overflow-y:auto;padding:0 12px}
.nav-lateral .grupo{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-claro);
  font-weight:600;padding:8px 10px 3px;
}
.nav-lateral .grupo:first-child{padding-top:2px}
body.compacto .nav-lateral .grupo{display:none}
.nav-lateral a{
  display:flex;align-items:center;gap:11px;
  padding:4px 10px;border-radius:9px;text-decoration:none;color:var(--marino);
  font-size:14.5px;margin-bottom:0;
}
.nav-lateral a .ico{color:var(--gris-claro)}
.nav-lateral a:hover{background:var(--fondo)}
.nav-lateral a:hover .ico{color:var(--gris)}
.nav-lateral a.activo{background:var(--activo-bg);color:var(--activo-fg);font-weight:500}
.nav-lateral a.activo .ico{color:currentColor}
.nav-lateral a .etq{flex:1}
body.compacto .sidebar{width:68px;flex:0 0 68px}
body.compacto .logo{padding:18px 0 16px;justify-content:center}
body.compacto .logo .marca-larga{display:none}
body.compacto .nav-lateral{padding:0 10px}
body.compacto .nav-lateral a{justify-content:center;padding:9px 0}
body.compacto .nav-lateral a .etq{display:none}
body.compacto .usuario{justify-content:center;padding:14px 0}
body.compacto .usuario .quien{display:none}

/* Tooltip del sidebar compacto: reemplaza el title nativo (lento, feo).
   .nav-lateral tiene overflow-y:auto, así que un ::after absoluto queda
   recortado — en su lugar psi-ui.js posiciona este elemento con
   position:fixed, fuera del contenedor con scroll. */
.tooltip-compacto{
  position:fixed;left:0;top:0;z-index:1000;
  background:var(--marino);color:var(--blanco);
  font-size:12.5px;font-weight:500;white-space:nowrap;
  padding:5px 10px;border-radius:7px;box-shadow:var(--sombra);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-50%) translateX(-4px);
  transition:opacity .1s ease, transform .1s ease, visibility .1s;
}
.tooltip-compacto.visible{
  opacity:1;visibility:visible;transform:translateY(-50%) translateX(0);
  transition-delay:.15s;
}
.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;
}
.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)}

.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;margin:0}
.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;align-items:center}
.punto-notif{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--rojo);border:1.5px solid var(--blanco)}
.btn-cuadrado{
  position:relative;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);text-decoration:none;
}
.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}

/* ---------- 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;margin:0}
.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 .valor-mal{color:var(--rojo)}
.kpi .ctx b{font-weight:600;color:var(--marino)}

.table-scroll{overflow-x:auto}
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)}

/* Bootstrap le pone a .btn transición, foco con anillo y :active hundido —
   Praksis no tiene nada de eso, solo cambia el borde al pasar el mouse. */
.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);
  font-family:inherit;transition:none;box-shadow:none!important;
}
.btn:hover{border-color:var(--gris-claro)}
.btn:focus,.btn:active{box-shadow:none!important}
.btn-primario{background:var(--azul);border-color:var(--azul);color:#fff}
/* Bootstrap's .btn:hover/:active pisan color y fondo (misma especificidad
   que .btn, pero con :hover/:active suma), por eso hay que repetirlos acá. */
.btn-primario:hover,.btn-primario:active{background:var(--azul-fuerte)!important;border-color:var(--azul-fuerte)!important;color:#fff!important}
.btn-sm{padding:5px 11px;font-size:13.5px;border-radius:9px}
.btn-peligro{color:var(--rojo);border-color:var(--rojo-borde)}
.btn-peligro:hover,.btn-peligro:active{color:var(--rojo)!important;border-color:var(--rojo)!important;background:var(--rojo-bg)!important}
.btn-exito{color:var(--verde);border-color:var(--verde-borde)}
.btn-exito:hover,.btn-exito:active{color:var(--verde)!important;border-color:var(--verde)!important;background:var(--verde-bg)!important}

/* Acciones por fila (editar/eliminar) en tablas de listado. */
th.col-acciones,td.col-acciones{width:1%;text-align:right;white-space:nowrap}
.tabla-acciones{display:flex;justify-content:flex-end;gap:6px}
.btn-icono{
  width:30px;height:30px;border:1px solid transparent;background:transparent;border-radius:8px;
  cursor:pointer;display:grid;place-items:center;color:var(--gris);padding:0;
}
.btn-icono svg{width:16px;height:16px}
.btn-icono:hover{background:var(--fondo);color:var(--marino)}
.btn-icono.btn-icono-peligro:hover{background:var(--rojo-bg);color:var(--rojo)}

.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}

/* Vacío de una lista (data-lista): mismo alto que una fila con datos, no el
   bloque de "vacío" grande — evita el salto de tamaño que se ve al filtrar
   y no encontrar nada. */
.lista-vacio{padding:13px 20px;font-size:14.5px;color:var(--gris);text-align:center}

/* Montos: neutros por default, color solo cuando informa un estado (ver
   docs/ux-ui-guia-generica.md). */
.num-ambar{color:var(--ambar)}
.num-rojo{color:var(--rojo);font-weight:600}

/* ---------- ficha (detalle de una entidad) ---------- */
.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;font-family:inherit;
}
.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}

/* ---------- resumen de revisión (paso "Revisar y enviar" del wizard) ---------- */
.alerta-resumen{
  display:flex;gap:12px;align-items:flex-start;background:var(--ambar-bg);border:1px solid var(--ambar);
  border-radius:10px;padding:12px 14px;margin-bottom:16px;
}
.alerta-resumen svg{flex:0 0 18px;margin-top:1px;color:var(--ambar)}
.alerta-resumen .txt{font-size:13.5px;color:var(--marino);flex:1}
.alerta-resumen .txt b{color:var(--ambar)}
.alerta-resumen ul{margin:4px 0 0;padding-left:18px}
.bloque-resumen{border:1px solid var(--borde);border-radius:12px;overflow:hidden}
.bloque-resumen + .bloque-resumen{margin-top:14px}
.bloque-resumen-cab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;background:var(--hover,var(--fondo));border-bottom:1px solid var(--borde);
}
.bloque-resumen-cab-izq{display:flex;align-items:center;gap:9px}
.bloque-resumen-icono{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:var(--azul-suave);color:var(--azul-fuerte,var(--azul));flex:0 0 26px;
}
.bloque-resumen-cab h3{margin:0;font-size:14px;font-weight:700}
.bloque-resumen-cuerpo{padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.bloque-resumen-cuerpo.una-col{grid-template-columns:1fr}
.bloque-resumen-cuerpo .dato.ancho{grid-column:1 / -1}
.bloque-resumen-monto{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:14px 16px;background:var(--azul-suave);border-top:1px dashed var(--azul-borde,var(--borde));
}
.bloque-resumen-monto .r{font-size:12.5px;font-weight:600;color:var(--azul-fuerte,var(--azul))}
.bloque-resumen-monto .v{font-size:21px;font-weight:700;color:var(--marino);font-variant-numeric:tabular-nums}
.archivo-fila{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.archivo-fila + .archivo-fila{border-top:1px solid var(--linea,var(--borde))}
.archivo-fila .nombre{display:flex;align-items:center;gap:8px;font-size:14px}
.archivo-fila .nombre svg{color:var(--gris-claro)}

/* ---------- controles de formulario ---------- */
.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:not([type]),select,textarea,.form-control,.form-select{
  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-color:var(--blanco);color:var(--marino);
}
.form-select{
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23223a5e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px 10px;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
}
.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--azul);box-shadow:0 0 0 3px var(--foco);outline:0;
}

/* Modal: Bootstrap se usa solo por el comportamiento (abrir/cerrar/foco),
   la piel es la de Praksis. */
.modal-content{border-radius:var(--r);border:1px solid var(--borde);box-shadow:var(--sombra)}
.modal-header,.modal-footer{border-color:var(--borde)}
.modal-backdrop{--bs-backdrop-bg:var(--marino);--bs-backdrop-opacity:.5}

/* ---------- 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:400px}
.login .marca-caja{padding:0 0 8px;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: solo aparece cuando hay ancho de sobra. Sin foto de fondo
   (PSI no tiene assets propios todavía) — un degradé marino alcanza. */
.login-lado{display:none}
@media (min-width:1000px){
  .login{grid-template-columns:minmax(400px,42%) 1fr}
  .login .zona{padding:48px 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:14px;
    padding:56px 52px;background:linear-gradient(160deg,var(--marino-fijo),#132352);color:#fff;
  }
  .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}
}

/* Los botones del login ocupan todo el ancho de la caja. */
.login .caja .btn{width:100%;justify-content:center}
/* El botón de Microsoft 365 lleva el logo de cuatro cuadros. El SVG es
   inline para que no dependa de una request extra ni de un CDN. */
.login .caja .btn-365{display:inline-flex;align-items:center;gap:9px}
.login .caja .btn-365 .icono-ms{width:17px;height:17px;flex:none}

/* Divisor con una palabra al medio: separa el ingreso por contraseña del de
   Microsoft 365. */
.login .divisor{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--gris);font-size:13px}
.login .divisor::before,.login .divisor::after{content:"";flex:1;height:1px;background:var(--borde)}

/* Avisos de la pantalla de acceso: bloque, no chip — el texto puede ocupar
   varias líneas (credenciales, cuenta inactiva, Data Hub caído). */
.login .aviso{border:1px solid transparent;border-radius:10px;padding:11px 14px;margin-bottom:16px;font-size:13.5px;line-height:1.45}
.login .aviso.mal{background:var(--rojo-bg);color:var(--rojo);border-color:var(--rojo-borde)}
.login .aviso.ok{background:var(--verde-bg);color:var(--verde);border-color:var(--verde-borde)}
.login .aviso.pend{background:var(--ambar-bg);color:var(--ambar);border-color:var(--ambar-borde)}

/* Enlaces secundarios al pie de la caja (olvidé mi contraseña). */
.login .pie-caja{text-align:center;margin:16px 0 0;font-size:13.5px}
.login .pie-caja a,.login .pie-caja button{background:none;border:0;padding:0;font:inherit;color:var(--azul);text-decoration:none;cursor:pointer}
.login .pie-caja a:hover,.login .pie-caja button:hover{text-decoration:underline}
.login .copyright{text-align:center;color:var(--gris-claro);font-size:12.5px;margin:22px 0 0}
.modal-subtitulo{font-size:13px;color:var(--gris);margin-top:2px}

/* ---------- validación de formularios ---------- */
.form-label.is-invalid{color:var(--rojo)}
.form-control.is-invalid,.form-select.is-invalid{border-color:var(--rojo)}
.form-control.is-invalid:focus,.form-select.is-invalid:focus{
  border-color:var(--rojo);box-shadow:0 0 0 3px var(--rojo-bg);
}
.campo-error{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--rojo);margin-top:4px}
.campo-error svg{width:13px;height:13px;flex:0 0 13px}

/* ---------- listas: buscador, orden por columna, paginación ---------- */
.lista-buscador{max-width:320px;flex:1}
.lista-cab-acciones{display:flex;align-items:center;gap:14px}
.lista-contador{font-size:13px;color:var(--gris);white-space:nowrap}
/* Bandejas de la lista de solicitudes: píldoras redondeadas, la activa con
   fondo marino y texto blanco (ver docs/ux-ui-guia-generica.md, "Tabs de
   sección" — variante de ficha). */
.bandejas{display:flex;gap:6px;flex-wrap:wrap}
.bandeja{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:999px;
  font-size:13.5px;font-weight:500;color:var(--gris);
  text-decoration:none;white-space:nowrap;
}
.bandeja:hover{background:var(--fondo);color:var(--marino)}
.bandeja.activa{background:var(--marino);color:#fff}
.bandeja.activa:hover{background:var(--marino);color:#fff}
.bandeja-n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--rojo-bg);color:var(--rojo);
  font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;
}
.bandeja.activa .bandeja-n{background:rgba(255,255,255,.22);color:#fff}
.lista-buscador-fila{padding:14px 20px 0}
/* Listas con bandejas (solicitudes): el buscador va a la izquierda de las
   pestañas, y las dos cosas quedan pegadas al borde izquierdo. */
.lista-buscador:has(+.bandejas){flex:0 1 260px}
.lista-buscador+.bandejas{margin-right:auto}
/* Barra de acciones en lote: aparece al seleccionar filas en la bandeja de firma. */
.barra-lote{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 20px;border-bottom:1px solid var(--borde);background:var(--fondo);
}
.barra-lote-n{font-size:13.5px;font-weight:500;color:var(--marino)}
.barra-lote-acciones{display:flex;gap:8px}
th.col-sel,td.col-sel{width:38px;padding-right:0}
.lista-buscador input{padding-left:34px;background-repeat:no-repeat;background-position:10px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA1AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");}
/* Solo la columna ordenada muestra flecha (grande, azul); las demás no
   llevan ícono — con las 5 columnas mostrando "↕" chico no se distinguía
   cuál estaba activa. */
th[data-orden]{cursor:pointer;user-select:none}
th[data-orden]:hover{color:var(--gris)}
th[data-orden][aria-sort]::after{margin-left:6px;font-size:14px;font-weight:700;color:var(--azul)}
th[data-orden][aria-sort="ascending"]::after{content:"↑"}
th[data-orden][aria-sort="descending"]::after{content:"↓"}
.lista-paginacion{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;border-top:1px solid var(--borde);font-size:13px;color:var(--gris);
}
.lista-pag-botones{display:flex;gap:8px}
.lista-pag-botones .btn:disabled{opacity:.45;cursor:default}
.lista-pag-botones .btn:disabled:hover{border-color:var(--borde)}

/* Aviso flotante (psi-toast.js) — reemplaza toastr en todo PSI. Chip sólido
   arriba a la derecha, aparece recién cuando el modal terminó de cerrarse. */
.psi-toast{
  position:fixed;top:80px;right:24px;z-index:2000;max-width:320px;
  border-radius:10px;padding:10px 16px 10px 12px;
  display:flex;align-items:flex-start;gap:9px;
  box-shadow:0 8px 24px rgba(10,26,60,.22), 0 2px 6px rgba(10,26,60,.12);
  animation:psi-toast-in .22s ease-out;
}
.psi-toast.psi-toast--saliendo{animation:psi-toast-out .18s ease-in forwards}
.psi-toast--exito{background:var(--verde-solido)}
.psi-toast--error{background:var(--rojo-solido)}
.psi-toast .psi-toast-icono{
  width:18px;height:18px;border-radius:50%;flex:none;margin-top:1px;
  background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;
}
.psi-toast .psi-toast-icono svg{width:10px;height:10px}
.psi-toast .psi-toast-icono svg path{stroke:#fff}
.psi-toast .psi-toast-msg{font-size:13px;font-weight:600;line-height:1.35;color:#fff}
@keyframes psi-toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes psi-toast-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion: reduce){
  .psi-toast, .psi-toast.psi-toast--saliendo{animation:none}
}

/* ---------- Wizard de Solicitud: stepper + panel por paso ---------- */
.stepper{
  display:flex;align-items:flex-start;justify-content:space-between;
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
  box-shadow:var(--sombra);padding:20px 24px;margin-bottom:20px;overflow-x:auto;
}
.paso-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;min-width:92px;position:relative}
.paso-item.completo,.paso-item.activo{cursor:pointer}
.paso-item.completo:hover .paso-circulo,.paso-item.activo:hover .paso-circulo{box-shadow:0 0 0 4px var(--foco)}
.paso-item:not(:last-child)::after{
  content:"";position:absolute;top:17px;left:calc(50% + 26px);right:calc(-50% + 26px);
  height:2px;background:var(--riel);z-index:0;
}
.paso-item.completo:not(:last-child)::after{background:var(--verde-borde)}
.paso-circulo{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13.5px;background:var(--riel);color:var(--gris-claro);
  border:2px solid var(--riel);position:relative;z-index:1;flex-shrink:0;
}
.paso-item.completo .paso-circulo{background:var(--verde-bg);border-color:var(--verde-borde);color:var(--verde)}
.paso-item.activo .paso-circulo{background:var(--azul);border-color:var(--azul);color:#fff;box-shadow:0 0 0 4px var(--foco)}
.paso-item-label{font-size:12px;font-weight:600;color:var(--gris-claro);margin-top:8px;max-width:100px}
.paso-item.completo .paso-item-label{color:var(--verde)}
.paso-item.activo .paso-item-label{color:var(--marino)}

.panel-paso{display:none}
.panel-paso.activo{display:block}

.wizard-acciones{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.wizard-acciones-der{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.riel-mini{width:44px;height:5px;border-radius:3px;background:var(--riel);position:relative;overflow:hidden;display:inline-block;margin-right:6px;vertical-align:middle}
.riel-mini > span{position:absolute;inset:0;background:var(--ambar);border-radius:3px}
/* Celda de avance de la bandeja GIP: barra + pill "Paso N/M", clickeable
   para abrir el detalle del circuito de firma. */
.celda-avance{border:0;background:transparent;font:inherit;color:inherit;padding:2px 0;cursor:pointer;display:flex;align-items:center;gap:2px}
.celda-avance .avance-paso{font-weight:600;font-size:12.5px}
.celda-avance:hover .avance-paso{color:var(--azul-fuerte);text-decoration:underline}
.celda-avance:hover .riel-mini{outline:2px solid var(--azul-borde);outline-offset:2px}

/* Texto de una celda que abre un modal (nombre del médico -> su ficha) */
.enlace-tabla{border:0;background:transparent;font:inherit;color:inherit;padding:0;cursor:pointer;text-align:left}
.enlace-tabla:hover{color:var(--azul-fuerte);text-decoration:underline}

/* Ficha del médico: bloques de datos dentro del modal */
.ficha-bloque + .ficha-bloque{margin-top:16px;padding-top:16px;border-top:1px solid var(--linea)}
.ficha-bloque > .r{margin-bottom:8px}
.dato .v-vacio{color:var(--gris-claro);font-weight:400}

/* Sub-formularios de viaje del wizard: se revelan al incluir el servicio */
.bloque-viaje{margin-top:14px;padding-top:14px;border-top:1px dashed var(--borde)}
.bloque-viaje[hidden]{display:none}
.bloque-viaje > .rotulo{display:block;margin-bottom:8px}

/* Vista preliminar: el documento tal como se genera para la firma */
.documento{background:var(--blanco);border:1px solid var(--borde);border-radius:12px;padding:24px 26px}
.documento-cab{text-align:center;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--linea)}
.documento-titulo{font-size:17px;font-weight:600;letter-spacing:-.01em}
.documento-sub{font-size:12px;color:var(--gris-claro);margin-top:3px}
.documento-linea{display:flex;gap:14px;padding:7px 0;border-bottom:1px solid var(--linea)}
.documento-linea .r{flex:0 0 190px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--gris-claro);font-weight:600;padding-top:2px}
.documento-linea .v{font-size:13.5px;font-weight:600}
.documento-parrafo{margin-top:16px;font-size:13.5px;line-height:1.5;color:var(--gris)}
.documento-firma{display:flex;gap:32px;margin-top:38px;font-size:12px;color:var(--gris-claro)}
.documento-firma > div{flex:1;text-align:center}
.linea-firma{display:block;border-top:1px solid var(--borde-control);margin-bottom:6px}

/* ---------- Picker de médico: filtro alfabético + lista ---------- */
.letras-filtro{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.letra-btn{
  border:1px solid var(--borde);background:var(--blanco);border-radius:8px;
  padding:5px 10px;font-size:13px;font-weight:500;cursor:pointer;color:var(--marino);
  font-family:inherit;min-width:32px;
}
.letra-btn:hover{border-color:var(--gris-claro)}
.letra-btn.activa{background:var(--marino);border-color:var(--marino);color:#fff}
.letra-btn:disabled{color:var(--gris-claro);cursor:not-allowed;opacity:.5}
.letra-btn:disabled:hover{border-color:var(--borde)}
.medicos-lista{
  max-height:220px;overflow-y:auto;border:1px solid var(--borde);border-radius:var(--r);
  display:flex;flex-direction:column;
}
.medico-item{
  display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--linea);
  background:var(--blanco);padding:10px 14px;font-size:13.5px;color:var(--marino);
  font-family:inherit;cursor:pointer;
}
.medico-item:last-child{border-bottom:0}
.medico-item:hover{background:var(--hover)}
.medico-item.seleccionado{background:var(--azul-suave);color:var(--azul-fuerte);font-weight:600}
.medicos-lista-vacio{padding:14px;font-size:13.5px;color:var(--gris);text-align:center}

/* ---------- Avance del circuito de firma (solicitud_detalle) ---------- */
.psi-hitos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.psi-hito{display:flex;gap:14px;padding-bottom:18px;position:relative}
.psi-hito:not(:last-child)::before{
  content:"";position:absolute;left:12px;top:26px;bottom:0;width:2px;background:var(--riel);
}
.psi-hito.ok:not(:last-child)::before{background:var(--verde-borde)}
.psi-hito.ret:not(:last-child)::before{background:var(--rojo-borde)}
.psi-hito-punto{
  width:25px;height:25px;flex:0 0 25px;border-radius:50%;display:grid;place-items:center;
  background:var(--riel);color:var(--gris-claro);border:2px solid var(--blanco);
  font-size:12px;font-weight:600;z-index:1;
}
.psi-hito.ok .psi-hito-punto{background:var(--verde-bg);color:var(--verde);box-shadow:0 0 0 1px var(--verde-borde)}
.psi-hito.curso .psi-hito-punto{background:var(--azul-suave);color:var(--azul);box-shadow:0 0 0 1px var(--azul-borde)}
.psi-hito.ret .psi-hito-punto{background:var(--rojo-bg);color:var(--rojo);box-shadow:0 0 0 1px var(--rojo-borde)}
.psi-hito b{display:block;font-size:13.5px;font-weight:600}
.psi-hito.na b{color:var(--gris-claro);font-weight:500}
.psi-hito-motivo{margin-top:4px;font-size:12.5px;color:var(--rojo)}
.tabla-scroll{overflow-x:auto}

/* ---------- O.E · Gestión de Invitados (congreso_invitados) ---------- */
.invitados-filtros,.panel-filtros{padding:16px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}
.invitados-filtros-campos,.panel-filtros-campos{display:flex;flex-wrap:wrap;gap:12px;flex:1 1 auto}
.invitados-filtros label,.panel-filtros label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--gris);min-width:170px}
.invitados-filtros input,.invitados-filtros select,.panel-filtros input,.panel-filtros select{
  border:1px solid var(--borde-control);border-radius:10px;padding:7px 10px;font:inherit;font-size:13.5px;
  background:var(--blanco);color:inherit;
}
.invitados-filtros input:focus,.invitados-filtros select:focus,.panel-filtros input:focus,.panel-filtros select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--foco)}
.invitados-filtros-acciones,.panel-filtros-acciones{display:flex;gap:8px}
/* Panel de filtros colapsable: arranca cerrado y recuerda su estado en la
   cookie psi_filtros (ver psi-ui.js), igual que el tema y el menú compacto. */
.panel-filtros-toggle{
  flex:0 0 100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;
  color:var(--marino);cursor:pointer;
}
.panel-filtros-toggle .ico-chevron{width:18px;height:18px;color:var(--gris);transition:transform .15s ease}
.panel-filtros.abierto .panel-filtros-toggle .ico-chevron{transform:rotate(180deg)}
.panel-filtros-n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;margin-left:7px;border-radius:999px;
  background:var(--azul-suave);color:var(--azul);font-size:11.5px;font-weight:600;
}
.panel-filtros:not(.abierto)>.panel-filtros-campos,
.panel-filtros:not(.abierto)>.panel-filtros-acciones{display:none}

/* Servicios: tres pastillas por fila (T/A/I) con el estado del servicio */
.invitados-servicios{display:flex;gap:6px}
.srv{
  width:26px;height:26px;border-radius:50%;border:1px solid transparent;
  font-size:12px;font-weight:600;display:grid;place-items:center;cursor:pointer;padding:0;
}
.srv-no{background:var(--riel);color:var(--gris-claro);border-color:var(--borde)}
.srv-proceso{background:var(--ambar-bg);color:var(--ambar);border-color:var(--ambar)}
.srv-ok{background:var(--verde-bg);color:var(--verde);border-color:var(--verde-borde)}

/* Ficha de datos en modal (dt/dd) */
.ficha{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:6px 16px;margin:0}
.ficha dt{font-size:12.5px;color:var(--gris);font-weight:500}
.ficha dd{margin:0;font-size:13.5px}

/* Pasos irreversibles de "Gestionar servicios" */
.paso{border:1px solid var(--borde);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.paso-hecho{background:var(--verde-bg);border-color:var(--verde-borde)}
.paso-titulo{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;margin:0}
.paso-hecho .paso-titulo{color:var(--verde)}
.paso-ayuda{font-size:12.5px;color:var(--gris);margin-top:4px}

/* Aviso de baja */
.baja-servicios{display:flex;flex-wrap:wrap;gap:12px}
.baja-servicio{display:flex;align-items:center;gap:6px;font-size:13.5px}

/* Conversación */
.chat{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:80%;background:var(--riel);border-radius:12px;padding:8px 12px}
.chat-propio{align-self:flex-end;background:var(--azul-suave)}
.chat-autor{font-size:11.5px;color:var(--gris);font-weight:600}
.chat-cuerpo{font-size:13.5px;white-space:pre-wrap;word-break:break-word}
.chat-fecha{font-size:11px;color:var(--gris-claro);text-align:right}
.chat-envio{display:flex;gap:8px}
.chat-envio input{
  flex:1;border:1px solid var(--borde-control);border-radius:10px;padding:8px 12px;font:inherit;font-size:13.5px;
  background:var(--blanco);color:inherit;
}
.chat-envio input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--foco)}

/* Condiciones generales: texto tal cual lo cargó Marketing */
.condiciones-texto{
  margin:0;white-space:pre-wrap;word-break:break-word;font:inherit;font-size:13.5px;
  background:var(--pie);border:1px solid var(--borde);border-radius:12px;padding:14px;
}

/* Lista de condiciones, con edición inline (solo Marketing) */
.condiciones-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.condiciones-lista li{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--pie);border:1px solid var(--borde);border-radius:12px;padding:12px 14px;
}
.condiciones-lista .condicion-texto{
  flex:1;margin:0;white-space:pre-wrap;word-break:break-word;font:inherit;font-size:13.5px;
}
.condiciones-lista .condicion-acciones{display:flex;gap:6px;flex-shrink:0}

@media (max-width:720px){
  .invitados-filtros,.panel-filtros{flex-direction:column;align-items:stretch}
  .invitados-filtros label,.panel-filtros label{min-width:0}
  .ficha{grid-template-columns:1fr;gap:2px 0}
  .ficha dd{margin-bottom:8px}
}

/* ---------- Aviso de solicitud devuelta para corregir ---------- */
.psi-devolucion{border-color:var(--rojo-borde);margin-bottom:16px}
.psi-devolucion .r{color:var(--rojo);font-weight:600;margin-bottom:6px}
.psi-devolucion-motivo{margin:0 0 6px;font-size:14px}

/* ============================================================================
   Mobile (≤900px) — APM y Agencia trabajan también desde el celular.

   SIGCOM directamente no funciona en mobile: el sidebar pasa a drawer pero el
   botón que lo abre no existe en el DOM, así que no hay forma de navegar ni de
   cerrar sesión (relevamiento-agencia 13.3). Acá el mismo botón [data-menu]
   que en escritorio compacta el menú, en mobile lo abre y lo cierra.
   ============================================================================ */
.sidebar-fondo{
  position:fixed;inset:0;z-index:1040;background:rgba(16,24,40,.45);
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s;
}

@media (max-width:900px){
  .sidebar{
    position:fixed;left:0;top:0;z-index:1050;width:264px;flex-basis:264px;
    transform:translateX(-100%);transition:transform .2s ease;
    box-shadow:var(--sombra);
  }
  /* El modo compacto es una preferencia de escritorio: en el drawer estorba
     (íconos sin texto en una pantalla que tiene lugar de sobra a lo ancho). */
  body.compacto .sidebar{width:264px;flex-basis:264px}
  body.compacto .logo{padding:18px 14px 16px 20px;justify-content:flex-start}
  body.compacto .logo .marca-larga,
  body.compacto .nav-lateral .grupo{display:block}
  body.compacto .nav-lateral a{justify-content:flex-start;padding:9px 10px}
  body.compacto .nav-lateral a .etq{display:block}
  body.compacto .usuario{justify-content:flex-start;padding:14px 16px}
  body.compacto .usuario .quien{display:block}

  body.menu-abierto .sidebar{transform:none}
  body.menu-abierto .sidebar-fondo{opacity:1;visibility:visible}
  body.menu-abierto{overflow:hidden}

  /* El tooltip del sidebar compacto no tiene sentido sin hover. */
  .tooltip-compacto{display:none}

  .encabezado{padding:0 14px;height:56px}
  .encabezado h1{font-size:16.5px}
  .contenido{padding:16px 14px 40px}

  /* Columnas secundarias: en vez de scrollear la tabla a lo ancho (que además
     recorta los menús desplegables de acciones), se ocultan las columnas que
     no hacen falta para decidir en el celular. El dato sigue estando en el
     detalle de cada fila. */
  .col-secundaria{display:none}

  table{font-size:13.5px}
  th,td{padding-left:10px;padding-right:10px}

  .tarjeta-cab{flex-direction:column;align-items:stretch;gap:10px}
  .lista-cab-acciones{flex-wrap:wrap;gap:8px}
  .lista-buscador,.lista-buscador input{width:100%}
  .bandejas{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .bandejas .bandeja{white-space:nowrap}

  .invitados-filtros,.panel-filtros{flex-direction:column;align-items:stretch}
  .invitados-filtros label,.panel-filtros label{min-width:0}
  .invitados-filtros-campos,.panel-filtros-campos{flex-direction:column}
  .invitados-filtros-campos label,.panel-filtros-campos label{width:100%}
  .invitados-filtros-acciones{flex-wrap:wrap}

  .ficha{grid-template-columns:1fr;gap:2px 0}
  .ficha dd{margin-bottom:8px}

  /* Objetivo táctil: 40px de alto mínimo en todo lo que se toca. */
  .btn,.btn-cuadrado,.btn-icono{min-height:40px}
  .btn-cuadrado{width:40px}
  .modal-footer .btn{flex:1 1 auto}
}

@media (max-width:560px){
  /* Segundo escalón: lo que en un celular angosto ya no entra y tiene una
     puerta alternativa (el menú ⋯ de cada fila). */
  .col-terciaria{display:none}
  .kpis{grid-template-columns:1fr 1fr}
  .modal-dialog{margin:8px}
  .encabezado .sub{display:none}
}