/* Nikolai UI v2 (Healthence) — solo activo con html[data-ui="v2"].
   Fase 1: tokens (claro por defecto + oscuro), tipografia Geist, foco visible. */
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url(./fonts/Geist-Regular.woff2) format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url(./fonts/Geist-Medium.woff2) format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url(./fonts/Geist-SemiBold.woff2) format("woff2")}

/* ---------- 1. Tokens: CLARO (por defecto) ---------- */
html[data-ui="v2"],
html[data-ui="v2"][data-theme="light"]{
  color-scheme:light;
  --bg:#ffffff;--bg2:#f7f7f8;--card:#ffffff;--card2:#f7f7f8;--inp:#ffffff;
  --border:#e6e8ea;--border-strong:#d9dcdf;--border-ctl:#848b91;
  --text:#0b0f14;--sub:#5f666c;--mute:#8b9298;--text-dim:var(--sub);
  --pri:#0a6cd0;--pri-hover:#0859a8;--pri-soft:#e6f1fd;--on-pri:#ffffff;
  --accent:#1c8dff;--az:var(--pri);--az-text:#0a6cd0;--acc2:var(--pri);--teal:#0f5767;
  --ok:#087a47;--ok-soft:#eafff5;--ok-fill:#087a47;
  --warn:#b4540b;--warn-soft:#fff3ea;--warn-fill:#b4540b;
  --err:#ab0d35;--err-soft:#ffeaef;--err-fill:#ab0d35;
  --info:#0a5fb8;--info-soft:#e6f1fd;
  --focus-halo:rgba(28,141,255,.28);
  --shadow:0 1px 2px rgba(11,15,20,.06),0 4px 12px rgba(11,15,20,.05);
  --today-bg:rgba(28,141,255,.08);
}

/* ---------- 2. Tokens: OSCURO (opcional) ---------- */
html[data-ui="v2"][data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1220;--bg2:#111a2b;--card:#131d30;--card2:#111a2b;--inp:#0d1626;
  --border:#26334a;--border-strong:#34445f;--border-ctl:#6b7d95;
  --text:#e8edf4;--sub:#9fb0c6;--mute:#6b7d95;--text-dim:var(--sub);
  --pri:#0a6cd0;--pri-hover:#0859a8;--pri-soft:#12294a;--on-pri:#ffffff;
  --accent:#4aa3ff;--az:var(--pri);--az-text:#7fb3e6;--acc2:var(--pri);--teal:#0f5767;
  --ok:#4ade80;--ok-soft:#0e2a20;--ok-fill:#087a47;
  --warn:#fbbf24;--warn-soft:#33210f;--warn-fill:#b4540b;
  --err:#ff7a93;--err-soft:#3a1420;--err-fill:#ab0d35;
  --info:#7ab8ff;--info-soft:#12294a;
  --focus-halo:rgba(74,163,255,.35);
  --shadow:0 4px 24px rgba(0,0,0,.4);
  --today-bg:rgba(74,163,255,.10);
}

/* ---------- 3. Tipografia ---------- */
html[data-ui="v2"]{
  --font:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:20px;--fs-2xl:32px;
  --r-sm:4px;--r-md:6px;--r-lg:8px;
}
html[data-ui="v2"] body,
html[data-ui="v2"] button,
html[data-ui="v2"] input,
html[data-ui="v2"] select,
html[data-ui="v2"] textarea{font-family:var(--font)}
html[data-ui="v2"] body{font-size:var(--fs-md);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[data-ui="v2"] table,
html[data-ui="v2"] .num,
html[data-ui="v2"] input[type="number"],
html[data-ui="v2"] input[type="time"],
html[data-ui="v2"] input[type="date"],
html[data-ui="v2"] input[type="tel"]{font-variant-numeric:tabular-nums}

/* ---------- 4. Texto de marca sobre fondo: --az como TEXTO usa --az-text ---------- */
html[data-ui="v2"] .tab.active,
html[data-ui="v2"] .rc-item:hover,
html[data-ui="v2"] .btn-add-dr-new:hover,
html[data-ui="v2"] [style^="color:var(--az)"],
html[data-ui="v2"] [style*=";color:var(--az)"],
html[data-ui="v2"] [style*="; color:var(--az)"],
html[data-ui="v2"] [style*=" color:var(--az)"]{color:var(--az-text)!important}
/* rellenos de estado con texto blanco (en oscuro --err/--ok son claros, solo para texto) */
html[data-ui="v2"] [style*="background:var(--err)"]{background:var(--err-fill)!important}
html[data-ui="v2"] [style*="background:var(--ok)"]{background:var(--ok-fill)!important}
html[data-ui="v2"] [style*="background:var(--warn)"]{background:var(--warn-fill)!important}

/* ---------- 5. Foco visible (claro y oscuro) ---------- */
html[data-ui="v2"] :focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
  box-shadow:0 0 0 4px var(--focus-halo);border-radius:var(--r-sm);
}
html[data-ui="v2"] .fi:focus,
html[data-ui="v2"] .sidebar-search input:focus{
  outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--focus-halo);
}
html[data-ui="v2"] .nik-msg-contacto:focus{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- 6. Bordes de controles de formulario >= 3:1 (WCAG 1.4.11) ---------- */
html[data-ui="v2"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-ui="v2"] select,
html[data-ui="v2"] textarea{border-color:var(--border-ctl)}

/* ---------- 7. Piso tipografico 12px (Fase 1). Temporal: los inline se limpian en Fase 6 ---------- */
html[data-ui="v2"] [style*="font-size:9px"],
html[data-ui="v2"] [style*="font-size:9.5px"],
html[data-ui="v2"] [style*="font-size:10px"],
html[data-ui="v2"] [style*="font-size:10.5px"],
html[data-ui="v2"] [style*="font-size:11px"],
html[data-ui="v2"] [style*="font-size:11.5px"],
html[data-ui="v2"] [style*="font-size: 9px"],
html[data-ui="v2"] [style*="font-size: 10px"],
html[data-ui="v2"] [style*="font-size: 11px"],
html[data-ui="v2"] .ag-hora,
html[data-ui="v2"] .ag-ev,
html[data-ui="v2"] .pac-item-meta,
html[data-ui="v2"] .rc-sec-title,
html[data-ui="v2"] .rc-empty,
html[data-ui="v2"] .agendaVistaTab,
html[data-ui="v2"] #nik-reloj,
html[data-ui="v2"] #nikEpisodioBadge,
html[data-ui="v2"] #nikEpisodioEstado,
html[data-ui="v2"] #btnBuscaModoCitas,
html[data-ui="v2"] #btnBuscaModoTexto,
html[data-ui="v2"] #resumenClinicoTab,
html[data-ui="v2"] label.fl,
html[data-ui="v2"] .consulta-doctor,
html[data-ui="v2"] .sec-chevron,
html[data-ui="v2"] .sec-badge,
html[data-ui="v2"] .tipo-badge,
html[data-ui="v2"] .exp-meta{font-size:12px!important}

/* ---------- 8. Contraste: colores fijos en linea y fondos translucidos ---------- */
html[data-ui="v2"] .pac-item:hover{background:var(--bg2)}
html[data-ui="v2"] .pac-item.active{background:var(--pri-soft)}
html[data-ui="v2"] [style*="background:#16a34a"]{background:var(--ok-fill)!important}
html[data-ui="v2"] [style*="background:#f59e0b"]{background:var(--warn-fill)!important}
html[data-ui="v2"] [style*="background:#f1f5f9"][style*="color:#64748b"]{color:#475569!important}
html[data-ui="v2"][data-theme="dark"] [style*="color:#b91c1c"],
html[data-ui="v2"][data-theme="dark"] [style*="color:#dc2626"]{color:var(--err)!important}
html[data-ui="v2"][data-theme="dark"] [style*="color:var(--teal)"]{color:#5cc8dd!important}
html[data-ui="v2"] [style*="background: rgb(245, 158, 11)"]{background:var(--warn-fill)!important}
html[data-ui="v2"] [style*="background: rgb(22, 163, 74)"]{background:var(--ok-fill)!important}
/* 9. Agenda: bloques de alto fijo con texto a 12px */
html[data-ui="v2"] .ag-ev,html[data-ui="v2"] #modalAgenda .ag-ev{line-height:1.12!important;padding-top:1px!important;padding-bottom:1px!important}
html[data-ui="v2"] #modalAgenda .ag-ev:hover,html[data-ui="v2"] #modalAgenda .ag-ev:focus-visible,html[data-ui="v2"] .ag-ev:hover,html[data-ui="v2"] .ag-ev:focus-visible{height:auto!important;overflow:visible!important}

/* =====================================================================
   FASE 2 — CASCARON (header, menu, sidebar, ancho maximo)
   Breakpoints unificados: 600 / 900 / 1280. Todo bajo html[data-ui="v2"].
   ===================================================================== */

/* ---------- 10. Header ---------- */
html[data-ui="v2"] .topbar{min-height:64px;padding:8px 24px;gap:16px;flex-wrap:nowrap;box-shadow:none;border-bottom:1px solid var(--border)}
html[data-ui="v2"] .topbar-brand{flex-direction:row;align-items:center;gap:12px;flex-shrink:0}
html[data-ui="v2"] .topbar-brand img{height:36px}
html[data-ui="v2"] .brand-text{font-family:var(--font);font-size:16px;font-weight:600;letter-spacing:.02em}
html[data-ui="v2"] .topbar-brand .brand-sub{display:none}
html[data-ui="v2"] #nik-reloj{font-size:12px;color:var(--sub);display:none}
@media (min-width:1280px){html[data-ui="v2"] #nik-reloj{display:inline}}

/* Buscador global: input + conmutador de modo en una fila, atajo "/" visible */
html[data-ui="v2"] #nikBusquedaGlobal{flex:1 1 auto!important;max-width:640px!important;min-width:0!important;margin:0 auto!important;display:grid;grid-template-columns:minmax(0,1fr) 232px;column-gap:8px;align-items:center}
html[data-ui="v2"] #nikBusquedaGlobal>div:first-child{grid-column:2;grid-row:1;margin:0!important;gap:0!important;padding:3px;background:var(--bg2);border:1px solid var(--border);border-radius:10px}
html[data-ui="v2"] #nikBusquedaGlobal>div:first-child>button{border:0!important;border-radius:7px!important;padding:6px 8px!important;font-size:12px!important;font-weight:500;min-height:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-ui="v2"] #buscaGlobalInput{grid-column:1;grid-row:1;height:40px;padding:0 44px 0 38px!important;border-radius:10px!important;font-size:14px!important;border:1px solid var(--border-ctl)!important;
  background:var(--inp) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b9298' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m21 21-6-6'/%3E%3C/svg%3E") no-repeat 12px 50%!important}
html[data-ui="v2"] #nikBusquedaGlobal::after{content:"/";grid-column:1;grid-row:1;justify-self:end;margin-right:10px;pointer-events:none;font-size:12px;font-weight:500;line-height:1;color:var(--sub);background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:3px 7px}
html[data-ui="v2"] #buscaGlobalResultados{grid-column:1/-1;border-radius:12px!important;top:calc(100% + 6px)!important}

/* Menu: hamburguesa solo < 900; en escritorio es el chip de perfil */
html[data-ui="v2"] .topbar-hamburger{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-size:20px;line-height:1;flex-shrink:0}
html[data-ui="v2"] .topbar-hamburger:hover{background:var(--bg2)}
html[data-ui="v2"] .topbar-hamburger .v2-chip{display:none}
html[data-ui="v2"] .v2-av{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--pri-soft);color:var(--az-text);font-size:12px;font-weight:600}
html[data-ui="v2"] .v2-who{display:flex;flex-direction:column;text-align:left;line-height:1.2}
html[data-ui="v2"] .v2-who b{font-size:13px;font-weight:600;color:var(--text)}
html[data-ui="v2"] .v2-who i{font-size:12px;font-style:normal;color:var(--sub)}
html[data-ui="v2"] .v2-chev{width:16px;height:16px;color:var(--sub)}
html[data-ui="v2"] .v2-qa{display:none;align-items:center;height:40px;padding:0 14px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;flex-shrink:0}
html[data-ui="v2"] .v2-qa:hover{background:var(--bg2)}
html[data-ui="v2"] .v2-qa.v2-qa-pri{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}
html[data-ui="v2"] .v2-qa.v2-qa-pri:hover{background:var(--pri-hover)}

@media (min-width:900px){
  html[data-ui="v2"] .topbar-hamburger .v2-glyph{display:none}
  html[data-ui="v2"] .topbar-hamburger .v2-chip{display:inline-flex;align-items:center;gap:10px}
  html[data-ui="v2"] .topbar-hamburger{padding:0 10px 0 6px}
}
@media (min-width:1280px){
  html[data-ui="v2"] .v2-qa-pri{display:inline-flex}
}
@media (min-width:1440px){
  html[data-ui="v2"] .v2-qa{display:inline-flex}
}
@media (max-width:899px){
  html[data-ui="v2"] #nikBusquedaGlobal{grid-template-columns:minmax(0,1fr)}
  html[data-ui="v2"] #nikBusquedaGlobal>div:first-child{grid-column:1;grid-row:2;margin-top:6px!important}
}
@media (max-width:899px){
  html[data-ui="v2"] .topbar{padding:8px 16px;gap:8px 12px;flex-wrap:wrap}
  html[data-ui="v2"] #nikBusquedaGlobal{order:3;flex:1 1 100%!important;max-width:none!important;margin:0!important}
  html[data-ui="v2"] #nikBusquedaGlobal::after{display:none}
  html[data-ui="v2"] .topbar-hamburger{margin-left:auto}
  html[data-ui="v2"] #nik-reloj{display:none}
}

/* ---------- 11. Menu desplegable (acciones y cuenta) ---------- */
html[data-ui="v2"] .topbar-right.mobile-open{top:calc(100% + 4px);right:24px;min-width:300px;max-width:360px;padding:8px;gap:2px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);background:var(--card)}
@media (max-width:899px){html[data-ui="v2"] .topbar-right.mobile-open{right:16px;left:16px;max-width:none}}
html[data-ui="v2"] .topbar-right.mobile-open .menu-identity{padding:8px 12px 10px;margin-bottom:4px}
html[data-ui="v2"] .menu-identity .menu-name{font-size:14px;font-weight:600}
html[data-ui="v2"] .menu-identity .menu-role{font-size:12px}
html[data-ui="v2"] .menu-section-label{font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--sub);opacity:1;padding:8px 12px 2px}
html[data-ui="v2"] .menu-section-label+.menu-section-label{display:none}
html[data-ui="v2"] .topbar-right.mobile-open .btn-icon{display:flex;align-items:center;gap:8px;border:0!important;background:transparent;color:var(--text)!important;font-size:14px;font-weight:400;min-height:40px;padding:8px 12px;border-radius:8px;text-align:left;white-space:normal;position:relative}
html[data-ui="v2"] .topbar-right.mobile-open .btn-icon:hover{background:var(--bg2)}
html[data-ui="v2"] .topbar-right.mobile-open .menu-danger{color:var(--err)!important;margin-top:0}
html[data-ui="v2"] .menu-divider{margin:6px 0}
html[data-ui="v2"] #notifPanel{top:72px!important;left:auto!important;right:24px!important;width:360px!important;max-width:calc(100vw - 32px)!important;border-radius:12px!important}
@media (max-width:899px){html[data-ui="v2"] #notifPanel{top:auto!important;left:16px!important;right:16px!important;width:auto!important}}

/* ---------- 12. Barra lateral ---------- */
html[data-ui="v2"] .sidebar{background:var(--card);border-right:1px solid var(--border)}
html[data-ui="v2"] .sidebar::before{content:"Centro Integral de Tiroides";display:block;padding:14px 16px 10px;font-size:12px;font-weight:500;color:var(--sub);flex-shrink:0}
html[data-ui="v2"] .sidebar-resize-handle:hover,html[data-ui="v2"] .sidebar-resize-handle.active{background:var(--accent)}
html[data-ui="v2"] .sidebar>div:nth-child(2){padding:0 12px 10px!important;border-bottom:0!important;gap:6px!important}
html[data-ui="v2"] .btn-new{height:40px;border-radius:10px;font-size:14px;font-weight:500;background:var(--pri);color:var(--on-pri);padding:0 12px}
html[data-ui="v2"] .sidebar div:has(>#btnNuevoExpediente){flex-wrap:wrap!important;gap:8px!important;padding:12px 16px!important}
html[data-ui="v2"] .sidebar #btnNuevoExpediente{flex:1 1 100%!important}
html[data-ui="v2"] .sidebar .sidebar-toggle-btn{margin-left:auto}
html[data-ui="v2"] .btn-new:hover{background:var(--pri-hover);opacity:1}
html[data-ui="v2"] .sidebar .btn-archivo,html[data-ui="v2"] .sidebar-toggle-btn{width:40px;height:40px;padding:0!important;border-radius:10px!important;border:1px solid var(--border)!important;background:var(--card)!important;color:var(--sub)!important;display:inline-flex;align-items:center;justify-content:center}
html[data-ui="v2"] .sidebar .btn-archivo:hover,html[data-ui="v2"] .sidebar-toggle-btn:hover{background:var(--bg2)!important}
html[data-ui="v2"] .sidebar-search{padding:0 12px 10px;border-bottom:1px solid var(--border)}
html[data-ui="v2"] .sidebar-search input{height:40px;border-radius:10px;font-size:14px;padding:0 36px 0 12px;border-color:var(--border-ctl)}
html[data-ui="v2"] .sidebar-list{padding:8px 8px 16px}
html[data-ui="v2"] .pac-item{position:relative;min-height:44px;padding:8px 12px 8px 16px;margin-bottom:2px;border-bottom:0;border-radius:8px}
html[data-ui="v2"] .pac-item-name{font-size:14px;font-weight:500}
html[data-ui="v2"] .pac-item-meta{font-size:12px;margin-top:1px}
html[data-ui="v2"] .pac-item.active{border-left:0;background:var(--pri-soft)}
html[data-ui="v2"] .pac-item.active .pac-item-name{font-weight:600}
html[data-ui="v2"] .pac-item.active::before{content:"";position:absolute;left:0;top:50%;width:4px;height:24px;margin-top:-12px;border-radius:0 4px 4px 0;background:var(--accent)}

/* ---------- 13. Contenido: ancho maximo 1440, margenes 24, gap 16 ---------- */
html[data-ui="v2"] .main{padding:24px;background:var(--bg2)}
html[data-ui="v2"] .main>*{max-width:1440px;margin-left:0;margin-right:auto}
@media (max-width:899px){html[data-ui="v2"] .main{padding:16px}}
@media (max-width:599px){html[data-ui="v2"] .main{padding:12px}}

/* ---------- 14. Sub-encabezado de seccion (titulo + subtitulo + acciones) ---------- */
html[data-ui="v2"] .exp-header{gap:16px;margin-bottom:16px;align-items:center}
html[data-ui="v2"] .exp-title{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
html[data-ui="v2"] .exp-meta{font-size:13px!important;color:var(--sub);margin-top:2px}
html[data-ui="v2"] .exp-actions{gap:8px;align-items:center}
html[data-ui="v2"] .empty-state{height:auto;min-height:60vh}