/* RadiologoNacional · Desarrollado por LINKDICOM — Socio comercial: HDCO
   © 2026 LINKDICOM. Todos los derechos reservados.
   Software propietario. Uso sujeto a licencia; ver LICENCIA.md

   Temas de pantalla. El tema claro es el diseño del prototipo (prototipo.css).
   El oscuro se activa con <html data-tema="oscuro"> (lo pone el script de panel/_tema_head.html antes de pintar).
   Solo en pantalla: al imprimir siempre sale en claro. */

:root{
  --navy-fondo:#0a1f44;--fondo-alerta:#fff4f4;--marca-borde:#fff;
  --esc-0:#cde2fb;--esc-1:#2a78d6;--esc-2:#0d366b;
  --mapa-vacio:#e8edf5;--mapa-fuera:#e4e9f1;--mapa-ok:#9fd3ae;--mapa-inactivo:#fde3a7;--mapa-off:#f6c6c6;
}
.scale i{background:linear-gradient(90deg,var(--esc-0),var(--esc-1),var(--esc-2))}

/* ---------- Interruptor de tema (barra superior y portales) ---------- */
.tema-sw{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--card);flex:none}
.tema-sw button{width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--ink3);display:grid;place-items:center;padding:0;transition:background .15s,color .15s}
.tema-sw button:hover{color:var(--ink)}
.tema-sw button[aria-pressed="true"]{background:var(--brand);color:#fff;box-shadow:0 3px 10px rgba(20,99,255,.35)}
.tema-sw svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tema-sw .a{font-weight:800;font-size:13px;line-height:1}
.tema-esquina{position:fixed;top:12px;right:12px;z-index:90}
@media print{.tema-sw,.tema-esquina{display:none!important}}

@media screen{
html[data-tema="oscuro"]{
  color-scheme:dark;
  --bg:#061230;--card:#0b1c3d;--line:#1d3461;--line2:#162a50;--grid:#1a2f58;--axis:#2c4675;
  --ink:#e7eeff;--ink2:#b3c2e2;--ink3:#8499c4;
  --navy:#eef3ff;--navy2:#13306a;--navy3:#163470;--navy-fondo:#1d3c7a;
  --brand-d:#7fabff;--brand-soft:rgba(20,99,255,.18);
  --good-ink:#62d683;--warn-ink:#f3c552;--crit-ink:#ff8f8f;
  --sh:0 1px 2px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.25);
  --fondo-alerta:rgba(208,59,59,.16);--marca-borde:#06122b;
  --esc-0:#163261;--esc-1:#2a78d6;--esc-2:#a9d0ff;
  --mapa-vacio:#1a2c52;--mapa-fuera:#11213f;--mapa-ok:#2f8f52;--mapa-inactivo:#9a7420;--mapa-off:#9b3a3a;
}
html[data-tema="oscuro"] a{color:#7fabff}
html[data-tema="oscuro"] input::placeholder,html[data-tema="oscuro"] textarea::placeholder{color:#6f84ae}
/* Marco */
html[data-tema="oscuro"] .app{background:linear-gradient(90deg,#071634 236px,transparent 236px)}
html[data-tema="oscuro"] .side{background:linear-gradient(180deg,#071634,#040e26);border-right:1px solid #13285299}
html[data-tema="oscuro"] .brand{background:#071634;border-bottom-color:#13284f}
html[data-tema="oscuro"] .side .brand img{background:#fff;border-radius:10px;padding:4px 8px;height:44px!important}
html[data-tema="oscuro"] .top{background:rgba(8,22,52,.92);backdrop-filter:blur(8px);border-bottom-color:#13284f}
html[data-tema="oscuro"] .gsearch .box,html[data-tema="oscuro"] .gsearch .res,html[data-tema="oscuro"] .ctx,html[data-tema="oscuro"] .sim,
html[data-tema="oscuro"] .iconbtn,html[data-tema="oscuro"] .help,html[data-tema="oscuro"] .drop,html[data-tema="oscuro"] .btn,
html[data-tema="oscuro"] .dots,html[data-tema="oscuro"] .in,html[data-tema="oscuro"] .filters,html[data-tema="oscuro"] .searchin,
html[data-tema="oscuro"] .kpi,html[data-tema="oscuro"] .pager button,html[data-tema="oscuro"] .pager select,html[data-tema="oscuro"] .pills button,
html[data-tema="oscuro"] .mapw .zc button,html[data-tema="oscuro"] .mapw .ml,html[data-tema="oscuro"] .mapw .bc,html[data-tema="oscuro"] .col h4 .c,
html[data-tema="oscuro"] .tk,html[data-tema="oscuro"] .modal,html[data-tema="oscuro"] .box,html[data-tema="oscuro"] .stepper .s.on,
html[data-tema="oscuro"] .ticket,html[data-tema="oscuro"] .tl .bl.p{background:var(--card)}
html[data-tema="oscuro"] .in,html[data-tema="oscuro"] select.in,html[data-tema="oscuro"] textarea.in,html[data-tema="oscuro"] .searchin,
html[data-tema="oscuro"] .gsearch .box{background:#081732;border-color:#24406f}
html[data-tema="oscuro"] .in:focus{border-color:#4f8dff;box-shadow:0 0 0 3px rgba(79,141,255,.25)}
html[data-tema="oscuro"] .in[disabled],html[data-tema="oscuro"] .in[readonly]{background:#0a1a38;color:var(--ink2)}
html[data-tema="oscuro"] .iconbtn .cnt{border-color:var(--card)}
html[data-tema="oscuro"] .av{background:#1d3c7a}
html[data-tema="oscuro"] .gsearch .res,html[data-tema="oscuro"] .drop,html[data-tema="oscuro"] .modal{box-shadow:0 18px 50px rgba(0,0,0,.55)}
html[data-tema="oscuro"] .ov{background:rgba(1,6,20,.7)}
/* Botones */
html[data-tema="oscuro"] .btn:hover{border-color:#36548a;background:#102450}
html[data-tema="oscuro"] .btn.pri{background:var(--brand);border-color:var(--brand)}
html[data-tema="oscuro"] .btn.pri:hover{background:#2a74ff}
html[data-tema="oscuro"] .btn.warn{background:rgba(250,178,25,.12);border-color:#8a6a1e;color:#f3c552}
html[data-tema="oscuro"] .btn.danger{border-color:#7a3434}
html[data-tema="oscuro"] .btn.ghost{background:transparent;border-color:transparent}
html[data-tema="oscuro"] .pills button.on{background:var(--brand);border-color:var(--brand)}
html[data-tema="oscuro"] .toggle i{background:#2a4270}
/* Tablas */
html[data-tema="oscuro"] table.t th{background:#0f2247}
html[data-tema="oscuro"] table.t tr.cl:hover td{background:#11285a}
html[data-tema="oscuro"] table.t tr.sel td{background:#15306a}
/* Indicadores, etiquetas y estados */
html[data-tema="oscuro"] .t-blue{background:rgba(29,107,240,.2);color:#7fb0ff}
html[data-tema="oscuro"] .t-green{background:rgba(22,163,74,.2);color:#5fd68a}
html[data-tema="oscuro"] .t-orange{background:rgba(240,124,24,.2);color:#ffab66}
html[data-tema="oscuro"] .t-red{background:rgba(220,38,38,.2);color:#ff8a8a}
html[data-tema="oscuro"] .t-violet{background:rgba(124,58,237,.22);color:#b79bff}
html[data-tema="oscuro"] .t-gray{background:rgba(148,163,184,.16);color:#aab8d0}
html[data-tema="oscuro"] .t-yellow{background:rgba(217,152,0,.2);color:#f5c84a}
html[data-tema="oscuro"] .t-aqua{background:rgba(15,159,119,.2);color:#4fd6ac}
html[data-tema="oscuro"] .b-ok{background:rgba(12,163,12,.18)}
html[data-tema="oscuro"] .b-warn{background:rgba(250,178,25,.16)}
html[data-tema="oscuro"] .b-crit{background:rgba(208,59,59,.2)}
html[data-tema="oscuro"] .b-info{background:rgba(20,99,255,.2);color:#8db6ff}
html[data-tema="oscuro"] .b-mut{background:rgba(148,163,184,.16)}
html[data-tema="oscuro"] .b-vio{background:rgba(124,58,237,.22);color:#b79bff}
html[data-tema="oscuro"] .b-org{background:rgba(240,124,24,.2);color:#ffab66}
html[data-tema="oscuro"] .mod{background:rgba(148,163,184,.12)!important;border-color:currentColor!important}
html[data-tema="oscuro"] .m-RX,html[data-tema="oscuro"] .m-XR{color:#ff8f8f}
html[data-tema="oscuro"] .m-US{color:#f58bbb}
html[data-tema="oscuro"] .m-TC,html[data-tema="oscuro"] .m-CT{color:#82adff}
html[data-tema="oscuro"] .m-RM,html[data-tema="oscuro"] .m-MR{color:#b79bff}
html[data-tema="oscuro"] .m-MG{color:#5fd68a}
html[data-tema="oscuro"] .m-ECO{color:#ffb066}
html[data-tema="oscuro"] .m-EKG{color:#4fd6c8}
html[data-tema="oscuro"] .m-IR,html[data-tema="oscuro"] .m-NM,html[data-tema="oscuro"] .m-OT{color:#aab8d0}
html[data-tema="oscuro"] .lvl{background:rgba(124,58,237,.22);color:#b79bff}
html[data-tema="oscuro"] .stars .o{color:#3a4f7a}
html[data-tema="oscuro"] .note{background:rgba(20,99,255,.12);border-color:#25447c;color:#bcd2ff}
html[data-tema="oscuro"] .note.ok{background:rgba(22,163,74,.13);border-color:#245c3a;color:#9fe3b5}
html[data-tema="oscuro"] .note.bad{background:rgba(208,59,59,.14);border-color:#6b2c2c;color:#ffb3b3}
html[data-tema="oscuro"] .note.warn{background:rgba(250,178,25,.12);border-color:#6d5520;color:#f7d68a}
/* Gráficos y mapa */
html[data-tema="oscuro"] .hb .tr{background:#162a50}
html[data-tema="oscuro"] .mapw{background:linear-gradient(180deg,#0a1a3a,#0c1f45);border-color:#1d3461}
html[data-tema="oscuro"] .mapw .pv{stroke:#06122b}
html[data-tema="oscuro"] .mapw .pv:hover{filter:brightness(1.25)}
html[data-tema="oscuro"] .mapw .pv.sel{stroke:#fff}
html[data-tema="oscuro"] .photo{background:linear-gradient(160deg,#13306a,#0d2350 40%,#173a7a)}
/* Turnos, línea de tiempo y pasos */
html[data-tema="oscuro"] .col,html[data-tema="oscuro"] .stepper{background:#08183a}
html[data-tema="oscuro"] .tk:hover{border-color:#3f68b3}
html[data-tema="oscuro"] .tl .bl.p{border-color:#4a5f8c}
html[data-tema="oscuro"] .tl .mk{background:#1d3c7a}
html[data-tema="oscuro"] .stepper .n{background:#1a3264}
html[data-tema="oscuro"] .track>div:before{background:#2a4270}
html[data-tema="oscuro"] .track i{background:#2a4270;border-color:var(--card);box-shadow:0 0 0 1px #2a4270}
html[data-tema="oscuro"] .rolecards .rc:hover{background:#102450;border-color:#3f68b3}
html[data-tema="oscuro"] .report{color:var(--ink)}
html[data-tema="oscuro"] #tip,html[data-tema="oscuro"] #toasts div{background:#14306a;border:1px solid #2b4c8a}
/* Paneles de Django dentro de pantallas propias: barras de desplazamiento discretas */
html[data-tema="oscuro"] *{scrollbar-color:#2a4580 transparent}
}

/* ---------- Portal del paciente: fondo propio (static/img/fondo_portal_paciente.jpg) ---------- */
.pt-login,.pt-fondo{background:linear-gradient(180deg,rgba(233,241,255,.30),rgba(233,241,255,.60)),url("../img/fondo_portal_paciente.7b71be9bd2a2.jpg") center/cover no-repeat;background-color:#e9f1ff}
.pt-fondo{min-height:100vh;background-image:linear-gradient(180deg,rgba(233,241,255,.55),rgba(233,241,255,.85)),url("../img/fondo_portal_paciente.7b71be9bd2a2.jpg")}
@media (min-width:1101px){.pt-login,.pt-fondo{background-attachment:fixed}}
.pt-lcard{background:rgba(255,255,255,.94);backdrop-filter:blur(6px)}
.pt-cabecera{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 0 0}
.pt-cabecera img{background:#fff;border-radius:12px;padding:6px 10px;box-shadow:0 6px 20px rgba(13,40,110,.15)}
@media (max-width:600px){.pt-login{padding:56px 12px 16px}.pt-lcard{padding:24px 18px}.pt-cabecera{padding-top:58px;flex-wrap:wrap}}
@media screen{
html[data-tema="oscuro"] .pt-login,html[data-tema="oscuro"] .pt-fondo{background-image:linear-gradient(180deg,rgba(3,11,34,.55),rgba(3,11,34,.80)),url("../img/fondo_portal_paciente.7b71be9bd2a2.jpg");background-color:#061230}
html[data-tema="oscuro"] .pt-fondo{background-image:linear-gradient(180deg,rgba(3,11,34,.75),rgba(3,11,34,.92)),url("../img/fondo_portal_paciente.7b71be9bd2a2.jpg")}
html[data-tema="oscuro"] .pt-lcard{background:rgba(11,28,61,.92);box-shadow:0 20px 60px rgba(0,0,0,.5);border:1px solid #24406f}
html[data-tema="oscuro"] .pt-lcard img,html[data-tema="oscuro"] .card img[alt="RadiologoNacional"]{background:#fff;border-radius:12px;padding:6px 10px}
html[data-tema="oscuro"] .pt-stars button{color:#3a4f7a}
html[data-tema="oscuro"] .pt-stars button.on{color:#f5a500}
html[data-tema="oscuro"] .pt-top,html[data-tema="oscuro"] .pt-welcome{background:var(--card)}
html[data-tema="oscuro"] .pt-banner{background:rgba(250,178,25,.12);border-color:#6d5520}
html[data-tema="oscuro"] .pt-hrow:hover{background:#11285a}
}
@media screen{
/* Tarjetas de color por prioridad (Estudios): el color viene en --c */
html[data-tema="oscuro"] .mini.prio{background:color-mix(in srgb,var(--c) 14%,var(--card))!important;border-color:color-mix(in srgb,var(--c) 45%,transparent)!important}
html[data-tema="oscuro"] .mini.prio .small{color:color-mix(in srgb,var(--c) 55%,#fff)!important}
}

/* ---------- Autocompletado del navegador (Edge/Chrome) ----------
   El navegador pinta su propio fondo (gris en modo oscuro) y cambia el color del texto. Se tapa su fondo
   con una sombra interior del color del campo y se fija el color del texto, en reposo, :hover y :focus.
   La transición larga evita el destello del fondo amarillo/gris al cargar. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{
  transition:background-color 99999s ease-out 0s;caret-color:var(--ink)}
/* Campos del panel y del portal (.in) y buscadores, en tema claro */
.in:-webkit-autofill,.in:-webkit-autofill:hover,.in:-webkit-autofill:focus,
.searchin input:-webkit-autofill,.searchin input:-webkit-autofill:hover,.searchin input:-webkit-autofill:focus,
.gsearch input:-webkit-autofill,.gsearch input:-webkit-autofill:hover,.gsearch input:-webkit-autofill:focus{
  -webkit-text-fill-color:#0d1b3a;-webkit-box-shadow:0 0 0 1000px #fff inset;box-shadow:0 0 0 1000px #fff inset}
.in:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset,0 0 0 3px #1463ff1f;box-shadow:0 0 0 1000px #fff inset,0 0 0 3px #1463ff1f}
@media screen{
html[data-tema="oscuro"] .in:-webkit-autofill,html[data-tema="oscuro"] .in:-webkit-autofill:hover,html[data-tema="oscuro"] .in:-webkit-autofill:focus,
html[data-tema="oscuro"] .searchin input:-webkit-autofill,html[data-tema="oscuro"] .searchin input:-webkit-autofill:hover,html[data-tema="oscuro"] .searchin input:-webkit-autofill:focus,
html[data-tema="oscuro"] .gsearch input:-webkit-autofill,html[data-tema="oscuro"] .gsearch input:-webkit-autofill:hover,html[data-tema="oscuro"] .gsearch input:-webkit-autofill:focus{
  -webkit-text-fill-color:#e7eeff;caret-color:#e7eeff;-webkit-box-shadow:0 0 0 1000px #081732 inset;box-shadow:0 0 0 1000px #081732 inset}
html[data-tema="oscuro"] .in:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #081732 inset,0 0 0 3px rgba(79,141,255,.25);box-shadow:0 0 0 1000px #081732 inset,0 0 0 3px rgba(79,141,255,.25)}
}
/* Login: campos claros con texto oscuro SIEMPRE (el diseño del login no cambia con el tema) */
.lg2-in{color-scheme:light}
.lg2-in input:-webkit-autofill,.lg2-in input:-webkit-autofill:hover,.lg2-in input:-webkit-autofill:focus,.lg2-in input:-webkit-autofill:active,
html[data-tema="oscuro"] .lg2-in input:-webkit-autofill,html[data-tema="oscuro"] .lg2-in input:-webkit-autofill:hover,
html[data-tema="oscuro"] .lg2-in input:-webkit-autofill:focus,html[data-tema="oscuro"] .lg2-in input:-webkit-autofill:active{
  -webkit-text-fill-color:#0d1b3a;caret-color:#0d1b3a;-webkit-box-shadow:0 0 0 1000px #e9f0ff inset;box-shadow:0 0 0 1000px #e9f0ff inset}
html[data-tema="oscuro"] .lg2-in input{color:#0d1b3a;caret-color:#0d1b3a}

/* ---------- Campana de avisos (solicitudes de registro de dispositivos) ---------- */
.campana-w{display:inline-flex;align-items:center;gap:6px;position:relative}
.campana-panel{position:absolute;top:calc(100% + 8px);right:0;width:420px;max-width:calc(100vw - 24px);max-height:min(72vh,620px);overflow:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(6,18,48,.28);z-index:1000;text-align:left}
.campana-panel[hidden]{display:none}
.cp-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.cp-msg{margin:10px 14px 0}
.cp-fila{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line2);color:var(--ink);text-decoration:none}
.cp-fila:hover{background:var(--line2)}
.cp-fila .kic{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:8px}
.cp-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-tx b{font-weight:500;font-size:13px;line-height:1.3}
.cp-nueva .cp-tx b{font-weight:700}
.cp-tx small{color:var(--ink2);font-size:11.5px}
.cp-pie{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line)}
.cp-pie .btn.pri{margin-left:auto}
a.b-chip{color:inherit;text-decoration:none;cursor:pointer}
a.b-chip.on,.b-tipo.on{outline:2px solid var(--brand);outline-offset:-2px}
#alertasNuevas[hidden]{display:none!important}
.cp-notif:has(button[hidden]){display:none}
.cp-notif{padding:8px 14px;border-bottom:1px solid var(--line2)}
#rnToasts{position:fixed;right:20px;bottom:20px;z-index:150;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 40px))}
.rn-toast{display:block;background:var(--card);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:10px;padding:11px 14px;font-size:13px;box-shadow:0 10px 26px rgba(0,0,0,.25);text-decoration:none;transition:opacity .3s}
.rn-toast.urgente{border-left-color:var(--crit);font-weight:600}
.rn-toast.sale{opacity:0}
@media print{#rnToasts,.campana-panel{display:none}}
.txt-verde{color:var(--good-ink)}
.txt-ambar{color:var(--warn-ink)}
.txt-rojo{color:var(--crit-ink)}
.cerrar-critico{margin-top:6px;text-align:left}
.cerrar-critico>summary{display:inline-flex;list-style:none;cursor:pointer}
.cerrar-critico>summary::-webkit-details-marker{display:none}
.cerrar-critico form{display:flex;flex-direction:column;gap:6px;margin-top:6px;min-width:240px;max-width:420px}
.icono-mod{display:inline-flex;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid var(--line);border-radius:10px;background:var(--line2);color:var(--ink2)}
.icono-mod b{font-size:11px;line-height:1;color:var(--ink)}
.b-tipos{display:flex;flex-wrap:wrap;gap:8px}
.b-tipo{display:inline-flex;gap:6px;align-items:center;padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink2);font-size:12.5px;text-decoration:none}
.b-tipo b{color:var(--ink)}
.b-lote{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin-bottom:16px}
.b-lote .btn[disabled]{opacity:.5;cursor:not-allowed}
table.bandeja td{vertical-align:top}
table.bandeja .b-nueva td{font-weight:600}
table.bandeja small{font-weight:400}
.b-grupo summary{cursor:pointer}
.b-hijos{margin-top:8px;display:flex;flex-direction:column;gap:2px;font-weight:400}
.b-hijo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0;border-top:1px solid var(--line2)}
.b-seccion{border-top:1px solid var(--line2);padding:10px 0}
.b-seccion>summary{cursor:pointer;display:flex;gap:8px;align-items:center}
.b-contenido{margin-top:10px}
.campana-sonido{border:1px solid #f6c770;background:#fffaf0;color:#9a6400;border-radius:20px;padding:4px 10px;font-size:11.5px;font-weight:600;white-space:nowrap}
.iconbtn.sonando{border-color:var(--crit);color:var(--crit);animation:campana-pulso 1.6s ease-out 3}
.iconbtn.sonando .ic{animation:campana-vaiven .9s ease-in-out 2;transform-origin:50% 8%}
@keyframes campana-vaiven{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}
@keyframes campana-pulso{0%{box-shadow:0 0 0 0 rgba(208,59,59,.55)}100%{box-shadow:0 0 0 12px rgba(208,59,59,0)}}
@media (prefers-reduced-motion:reduce){.iconbtn.sonando,.iconbtn.sonando .ic{animation:none}}
@media screen{html[data-tema="oscuro"] .campana-sonido{background:rgba(250,178,25,.12);border-color:#8a6a1e;color:#f3c552}}

/* Matriz de notificaciones: canal que el aviso no tiene (gris y deshabilitado, con nota al pasar el ratón) */
.casilla-no{display:inline-block;cursor:not-allowed;vertical-align:middle}
.casilla-no input{pointer-events:none;opacity:.45;filter:grayscale(1);margin:0}

/* Calendario propio de los filtros (static/js/calendario.js): usa las variables del tema */
.cal-campo{display:inline-flex;align-items:stretch;gap:4px;width:100%}
.cal-campo .in{flex:1;min-width:0}
.cal-btn{flex:none;width:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);cursor:pointer}
.cal-btn:hover,.cal-btn:focus-visible{border-color:#8fb1f5}
.cal-caja{position:absolute;z-index:1000;width:280px;max-width:calc(100vw - 16px);padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cal-cabeza{display:flex;align-items:center;gap:2px;margin-bottom:8px}
.cal-titulo{flex:1;text-align:center;font-size:14px}
.cal-nav{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:16px;cursor:pointer}
.cal-nav:hover{background:rgba(127,127,127,.18)}
.cal-rejilla{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dia-semana{text-align:center;font-size:11px;font-weight:700;opacity:.65;padding:4px 0}
.cal-dia{height:34px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink);font-size:13px;cursor:pointer}
.cal-dia:hover,.cal-dia:focus-visible{background:rgba(127,127,127,.18)}
.cal-hoy{border-color:#1463ff;font-weight:700}
.cal-marcado,.cal-marcado:hover{background:#1463ff;color:#fff}
.cal-pie{display:flex;justify-content:space-between;margin-top:8px}