/*!
 * Telwork AI ERP — Design System (telwork-design-system.css)
 * Versión: 1.2.0
 * Fuente de verdad: proyecto "Telwork Design System" (Claude.ai)
 * Changelog completo: ver CHANGELOG.md en la raíz de este paquete
 *
 * Cómo usar en tu app:
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
 *   <link rel="stylesheet" href="https://cdn.telwork.app/design-system/1.2.0/telwork-design-system.css">
 *   <style>
 *     :root{ --brand:#TU_COLOR; --brand-dim:#TU_COLOR_OSCURO; --brand-tint:rgba(...,.10); --on-brand:#fff; }
 *   </style>
 *   <script src="https://cdn.telwork.app/design-system/1.2.0/telwork-design-system.js"></script>
 *
 * --brand/--brand-dim/--brand-tint/--on-brand son las ÚNICAS variables que cada app debe
 * sobreescribir — todo lo demás (tokens, componentes) se queda igual entre apps.
 */

/* ============================================================
     TOKENS v2 — inspirados en assistant-ui (Radix/Base UI + Tailwind,
     enfocado en chat de IA): mucho mas minimalista que coss ui.
     Bordes casi invisibles (contraste por FONDO, no por linea),
     radios grandes y suaves, mucho espacio en blanco, paleta casi
     monocroma con un solo acento, sombras muy diffusas y sutiles.
     ============================================================ */
  :root{
    --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'Geist Mono', ui-monospace, Menlo, monospace;

    /* radios: notablemente mas grandes/suaves que coss ui */
    --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-full: 999px;

    /* espaciado (mismo base, pero se usa con mas generosidad en el layout) */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

    /* tipografia: un poco mas grande y con mas interlineado, sensacion "conversacional" */
    --fs-xs: 12px; --fs-sm: 13.5px; --fs-base: 15px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 32px;

    --brand: #5470ff; --brand-dim: #3a52d6; --brand-tint: rgba(84,112,255,.10);
    --on-brand: #fff; /* color de texto/ícono sobre fondo --brand — cambiar a un color oscuro si el brand del cliente es claro (ej. verdes/amarillos pastel) */
    --ok: #34c77b; --ok-tint: rgba(52,199,123,.10);
    --warn: #e2a53a; --warn-tint: rgba(226,165,58,.10);
    --danger: #ef5b5b; --danger-tint: rgba(239,91,91,.10);
  }

  /* ---- tema oscuro: casi monocromo, contraste por capas de fondo, no por bordes ---- */
  html[data-theme="dark"]{
    --bg: #0a0a0b; --surface: #131315; --card: #17181b; --card-2: #1c1d21;
    --ink: #f2f2f0; --muted: #9a9a9e; --muted-2: #6c6c72;
    --border: rgba(255,255,255,.05); --border-strong: rgba(255,255,255,.08);
    --shadow-depth: 0 1px 2px rgba(0,0,0,.2);
    --shadow-pop: 0 24px 60px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.3);
    --scrollbar-thumb: rgba(255,255,255,.16); --scrollbar-thumb-hover: rgba(255,255,255,.28);
  }
  /* ---- tema claro ---- */
  html[data-theme="light"]{
    --bg: #fbfbfa; --surface: #f2f1ef; --card: #ffffff; --card-2: #f7f6f4;
    --ink: #1a1a1a; --muted: #78787c; --muted-2: #a3a3a6;
    --border: rgba(0,0,0,.045); --border-strong: rgba(0,0,0,.07);
    --shadow-depth: 0 1px 2px rgba(20,20,20,.04);
    --shadow-pop: 0 24px 60px rgba(20,20,20,.10), 0 4px 16px rgba(20,20,20,.05);
    --scrollbar-thumb: rgba(0,0,0,.16); --scrollbar-thumb-hover: rgba(0,0,0,.28);
  }

  /* ---- SCROLLBARS — delgados (≤4px), track invisible, thumb tenue por tema ---- */
  *{
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }
  *::-webkit-scrollbar{ width:4px; height:4px; }
  *::-webkit-scrollbar-track{ background:transparent; }
  *::-webkit-scrollbar-thumb{ background:var(--scrollbar-thumb); border-radius:var(--r-full); }
  *::-webkit-scrollbar-thumb:hover{ background:var(--scrollbar-thumb-hover); }
  *::-webkit-scrollbar-corner{ background:transparent; }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:var(--font); background:var(--bg); color:var(--ink);
    -webkit-font-smoothing:antialiased; font-size:var(--fs-base); line-height:1.5;
  }
  h1,h2,h3{margin:0; letter-spacing:-.01em}
  code{font-family:var(--mono)}

  /* ---- shell de la página de muestra ---- */
  header.top{
    z-index:20; background:var(--bg);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    padding: var(--sp-4) var(--sp-6);
  }
  .brand-mark{display:flex; align-items:center; gap:var(--sp-2); font-weight:700; font-size:var(--fs-lg)}
  .brand-dot{width:9px;height:9px;border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
  .theme-switch{
    display:flex; align-items:center; gap:var(--sp-1); padding:3px; border-radius:var(--r-sm);
    background:var(--surface); border:1px solid var(--border);
  }
  .theme-switch button{
    border:none; background:transparent; color:var(--muted); font-size:var(--fs-sm); font-weight:600;
    padding:6px 13px; border-radius:var(--r-xs); cursor:pointer; font-family:inherit;
  }
  .theme-switch button.active{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-depth) }

  main{max-width:1040px; margin:0 auto; padding: var(--sp-8) var(--sp-6) 120px}
  section{margin-bottom:56px}

  /* ---- Secciones "pantalla completa" — App Shell, Chat, AI Chat, Consulta médica.
     Rompen el max-width:1040px de <main> y ocupan el 100% del ancho del navegador,
     con el shell interno a 100vh — para verlas en su tamaño real, no una vista recortada. ---- */
  section.section-fullscreen{
    width:100vw; max-width:100vw; margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%);
  }
  section.section-fullscreen .section-head{max-width:1040px; margin:0 auto var(--sp-6); padding:0 var(--sp-6)}
  section.section-fullscreen .shell,
  section.section-fullscreen .im-shell,
  section.section-fullscreen .consult-shell,
  section.section-fullscreen .chat-shell{
    height:100vh; border-radius:0; box-shadow:none;
  }
  .section-head{margin-bottom:var(--sp-5)}
  .section-eyebrow{
    font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.07em;
    color:var(--brand); margin-bottom:6px; display:block;
  }
  .section-head h2{font-size:var(--fs-xl); font-weight:700}
  .section-head p{color:var(--muted); font-size:var(--fs-sm); margin:6px 0 0; max-width:560px}

  .swatch-row{display:flex; gap:var(--sp-3); flex-wrap:wrap}
  .swatch{
    width:120px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-depth);
  }
  .swatch-color{height:56px}
  .swatch-label{padding:8px 10px; font-size:var(--fs-xs); background:var(--card)}
  .swatch-label b{display:block; font-size:var(--fs-xs)}
  .swatch-label span{color:var(--muted); font-family:var(--mono)}

  /* ---- BOTONES ---- */
  .row{display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center}
  .btn{
    font-family:inherit; font-weight:600; border-radius:var(--r-md); cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    border:1px solid transparent; transition:filter .12s, transform .05s, background .12s;
    box-shadow:none;
  }
  .btn:active{transform:scale(.98)}
  .btn-md{padding:10px 20px; font-size:var(--fs-sm)}
  .btn-sm{padding:7px 15px; font-size:var(--fs-xs); border-radius:var(--r-sm)}
  .btn-lg{padding:13px 26px; font-size:var(--fs-base)}
  .btn-primary{background:var(--brand); color:var(--on-brand)}
  .btn-primary:hover{filter:brightness(1.15)}
  .btn-secondary{background:var(--card-2); color:var(--ink)}
  .btn-secondary:hover{background:var(--surface)}
  .btn-outline{background:transparent; color:var(--ink); border:1px solid var(--border-strong)}
  .btn-outline:hover{background:var(--card-2)}
  .btn-ghost{background:transparent; color:var(--muted)}
  .btn-ghost:hover{background:var(--card-2); color:var(--ink)}
  .btn-destructive{background:var(--danger); color:#fff}
  .btn-destructive:hover{filter:brightness(1.1)}
  .btn:disabled{opacity:.4; cursor:not-allowed; transform:none}

  /* ---- BADGES ---- */
  .badge{
    display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:600;
    padding:5px 12px; border-radius:var(--r-sm); text-transform:none; letter-spacing:0;
    border:none;
  }
  .badge-dot{display:none}
  .badge-ok{background:var(--ok-tint); color:var(--ok)}
  .badge-brand{background:var(--brand-tint); color:var(--brand)}
  .badge-warn{background:var(--warn-tint); color:var(--warn)}
  .badge-danger{background:var(--danger-tint); color:var(--danger)}
  .badge-neutral{background:var(--card-2); color:var(--muted)}

  /* ---- CARDS ---- */
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4)}
  @media(max-width:760px){.grid-3{grid-template-columns:1fr}}
  .card{
    background:var(--card); border:none; border-radius:var(--r-lg);
    box-shadow:var(--shadow-depth); padding:var(--sp-6);
  }
  .card h3{font-size:var(--fs-base); margin-bottom:4px}
  .card p{color:var(--muted); font-size:var(--fs-sm); margin:0}
  .card-stat{font-size:var(--fs-2xl); font-weight:700; margin:var(--sp-2) 0 2px}
  .card-stat-label{font-size:var(--fs-xs); color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em; font-weight:700}

  /* ---- FORM FIELDS ---- */
  .field{margin-bottom:var(--sp-4); max-width:360px}
  .field label{
    display:block; font-size:var(--fs-xs); font-weight:700; color:var(--muted);
    text-transform:uppercase; letter-spacing:.05em; margin-bottom:7px;
  }
  .field input, .field select, .field textarea{
    width:100%; font-family:inherit; font-size:16px; color:var(--ink);
    background:var(--card-2); border:1px solid transparent; border-radius:var(--r-md);
    padding:11px 14px; box-shadow:none; outline:none;
    transition:border-color .12s, box-shadow .12s, background .12s;
  }
  /* font-size fijo en 16px (no var(--fs-base), que es 15px) — evita el zoom
     automático de iOS Safari al enfocar un input con font-size <16px.
     Bug real de todo TDS, no solo de un componente (ver CHANGELOG). */
  .field select, .pagination-size select, .dtime-time-row select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer;
    padding-right:36px !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath stroke='%23888888' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4' d='M3 5.25 7 9.25l4 -4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:12px;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    background:var(--card); border-color:var(--border-strong); box-shadow:0 0 0 4px var(--brand-tint);
  }
  .field .hint{font-size:var(--fs-xs); color:var(--muted-2); margin-top:6px}
  .field .password-wrap{position:relative}
  .field .password-wrap input{padding-right:40px}
  .field .password-toggle{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    background:none; border:none; padding:0; cursor:pointer; color:var(--muted-2);
    display:flex; align-items:center; justify-content:center;
  }
  .field .password-toggle:hover{color:var(--muted)}

  /* ---- TABS ---- */
  .tabs{display:flex; gap:2px; background:var(--surface); padding:4px; border-radius:var(--r-md); width:fit-content; border:none}
  .tabs button{
    border:none; background:transparent; font-family:inherit; font-weight:600; font-size:var(--fs-sm);
    color:var(--muted); padding:8px 18px; border-radius:var(--r-sm); cursor:pointer;
  }
  .tabs button.active{background:var(--card); color:var(--ink); box-shadow:var(--shadow-depth)}
  .tabs-sm button{padding:5px 12px; font-size:var(--fs-xs)}

  /* ---- ICONOS (Streamline Core Line Free) ---- */
  /* Los SVG se insertan inline con stroke="currentColor": heredan el color de texto
     del elemento padre (ink, muted, brand, etc). Tamaño vía width/height en .icon. */
  .icon{
    width:18px; height:18px; flex:none;
    stroke:currentColor;
  }
  .icon-sm{width:14px; height:14px}
  .icon-lg{width:22px; height:22px}
  .icon-showcase{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-3)}
  @media(max-width:760px){.icon-showcase{grid-template-columns:repeat(3,1fr)}}
  .icon-tile{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    background:var(--card); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-2);
    box-shadow:var(--shadow-depth);
  }
  .icon-tile .icon{width:22px; height:22px; color:var(--ink)}
  .icon-tile span{font-size:var(--fs-xs); color:var(--muted); font-family:var(--mono); text-align:center}
  .icon-inline{display:inline-flex; align-items:center; gap:6px}


  /* ---- TABLE ---- */
  .table-wrap{border:none; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-depth)}
  table{width:100%; border-collapse:collapse; background:var(--card)}
  th{
    text-align:left; font-size:var(--fs-xs); text-transform:none; letter-spacing:0; font-weight:600;
    color:var(--muted); background:var(--card); padding:14px 20px; border-bottom:1px solid var(--border);
  }
  td{padding:16px 20px; font-size:var(--fs-sm); border-bottom:1px solid var(--border)}
  tr:last-child td{border-bottom:none}
  tr:hover td{background:var(--card-2)}

  /* ---- MODAL preview (estático, para mostrar estilo) ---- */
  .modal-demo-frame{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
    padding:40px; display:flex; align-items:center; justify-content:center;
  }
  .modal{
    width:100%; max-width:400px; background:var(--card); border:none;
    border-radius:var(--r-xl); box-shadow:var(--shadow-pop); padding:var(--sp-8);
  }
  .modal h3{font-size:var(--fs-lg); margin-bottom:8px}
  .modal p{color:var(--muted); font-size:var(--fs-sm); margin:0 0 var(--sp-5); line-height:1.55}
  .modal-actions{display:flex; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-2)}

  /* ---- TOAST ---- */
  .toast-demo{
    display:inline-flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border-strong);
    border-radius:var(--r-md); padding:12px 16px; box-shadow:var(--shadow-pop); font-size:var(--fs-sm);
  }
  .toast-icon{width:18px;height:18px;border-radius:50%; background:var(--ok); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#04140a; font-size:11px; font-weight:900}

  /* ---- SWITCH / TOGGLE ---- */
  .switch{width:38px; height:22px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-xs); position:relative; cursor:pointer; box-shadow:var(--shadow-depth)}
  .switch.on{background:var(--brand); border-color:transparent}
  .switch .knob{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:var(--r-xs); background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .15s}
  .switch.on .knob{transform:translateX(16px)}

  /* ---- AVATAR ---- */
  .avatar{width:34px;height:34px;border-radius:var(--r-md); background:var(--brand-tint); color:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-sm); border:1px solid var(--border)}
  .avatar-sm{width:28px; height:28px; font-size:var(--fs-xs); border-radius:var(--r-sm)}

  /* ---- ALERT ---- */
  .alert{
    display:flex; gap:12px; padding:var(--sp-5); border-radius:var(--r-lg); border:none;
    background:var(--card); box-shadow:var(--shadow-depth); max-width:520px;
  }
  .alert-icon{width:20px;height:20px;border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900}
  .alert-warn .alert-icon{background:var(--warn-tint); color:var(--warn)}
  .alert-warn{background:var(--warn-tint)}
  .alert h4{margin:0 0 3px; font-size:var(--fs-sm)}
  .alert p{margin:0; font-size:var(--fs-xs); color:var(--muted)}

  .note{
    font-size:var(--fs-xs); color:var(--muted-2); background:var(--surface); border:1px dashed var(--border-strong);
    border-radius:var(--r-sm); padding:10px 14px; margin-top:var(--sp-3);
  }

  /* ---- LEFT MENU ---- */
  .shell-demo{display:flex; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-depth); min-height:380px}
  .sidenav{width:220px; background:var(--surface); padding:var(--sp-5) var(--sp-3); flex-shrink:0; display:flex; flex-direction:column; gap:2px}
  .sidenav .sidenav-brand{display:flex; align-items:center; gap:8px; font-weight:700; font-size:var(--fs-sm); padding:0 var(--sp-3) var(--sp-5)}
  .sidenav a{
    display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-md);
    color:var(--muted); font-size:var(--fs-sm); font-weight:500; text-decoration:none; cursor:pointer;
  }
  .sidenav a:hover{background:var(--card-2); color:var(--ink)}
  .sidenav a.active{background:var(--card); color:var(--ink); font-weight:600}
  .sidenav .icon{width:16px; height:16px; flex-shrink:0; opacity:.8}
  .sidenav-body{flex:1; background:var(--card); padding:var(--sp-6); display:flex; align-items:center; justify-content:center; color:var(--muted-2); font-size:var(--fs-sm)}

  /* ---- TOP NAV (extendido) ---- */
  .topnav-demo{
    display:flex; align-items:center; justify-content:space-between; background:var(--card);
    border-radius:var(--r-lg); padding:var(--sp-3) var(--sp-5); box-shadow:var(--shadow-depth);
  }
  .topnav-search{
    background:var(--card-2); border-radius:var(--r-md); padding:8px 16px; font-size:var(--fs-sm); color:var(--muted-2);
    display:flex; align-items:center; gap:8px; width:260px;
  }
  .topnav-right{display:flex; align-items:center; gap:var(--sp-4)}
  .topnav-icon{width:34px; height:34px; border-radius:var(--r-md); background:var(--card-2); display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer}

  /* ---- LOGIN ---- */
  .login-demo-frame{background:var(--surface); border-radius:var(--r-lg); padding:56px 24px; display:flex; align-items:center; justify-content:center}
  .login-card{width:100%; max-width:360px; background:var(--card); border-radius:var(--r-xl); box-shadow:var(--shadow-pop); padding:var(--sp-8)}
  .login-card .login-logo{width:44px; height:44px; border-radius:var(--r-md); background:var(--ink); color:var(--bg); display:flex; align-items:center; justify-content:center; font-weight:800; margin:0 auto var(--sp-5)}
  .login-card h3{text-align:center; font-size:var(--fs-lg); margin-bottom:4px}
  .login-card .sub{text-align:center; font-size:var(--fs-sm); color:var(--muted); margin-bottom:var(--sp-6)}
  .login-card .btn{width:100%}
  .login-foot{text-align:center; font-size:var(--fs-xs); color:var(--muted-2); margin-top:var(--sp-5)}
  .login-foot a{color:var(--brand); font-weight:600; cursor:pointer; text-decoration:none}
  .login-foot a:hover{text-decoration:underline}
  .login-foot a.disabled{color:var(--muted-2); cursor:default; pointer-events:none; text-decoration:none}

  /* ---- OTP ---- */
  .otp-inputs{display:flex; gap:10px; justify-content:center; margin:var(--sp-6) 0}
  .otp-box{
    width:44px; height:54px; text-align:center; font-family:var(--mono); font-size:var(--fs-xl); font-weight:700;
    border-radius:var(--r-md); background:var(--card-2); border:1px solid transparent; color:var(--ink);
    outline:none; transition:border-color .12s, box-shadow .12s, background .12s;
  }
  .otp-box:focus{background:var(--card); border-color:var(--border-strong); box-shadow:0 0 0 4px var(--brand-tint)}
  .otp-box.filled{border-color:var(--border-strong)}
  .otp-box.error{border-color:var(--danger); box-shadow:0 0 0 4px var(--danger-tint)}

  /* ---- LOGIN DOS COLUMNAS ---- */
  .login-split-frame{background:var(--surface); border-radius:var(--r-lg); padding:40px 24px; display:flex; align-items:center; justify-content:center}
  .login-split{
    display:flex; width:100%; max-width:820px; min-height:460px; background:var(--card);
    border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-pop);
  }
  .login-split-photo{flex:1 1 45%; min-width:0; background:var(--card-2)}
  .login-split-photo img{width:100%; height:100%; object-fit:cover; display:block}
  .login-split-form{flex:1 1 55%; display:flex; flex-direction:column; justify-content:center; padding:var(--sp-8) 44px; min-width:0}
  .login-split-form .login-logo{margin:0 0 var(--sp-5)}
  .login-split-form h3{text-align:left; font-size:var(--fs-xl); margin-bottom:4px}
  .login-split-form .sub{text-align:left; font-size:var(--fs-sm); color:var(--muted); margin-bottom:var(--sp-6)}
  .login-split-form .field{max-width:none}
  .login-split-form .login-foot{text-align:left}
  @media(max-width:640px){
    .login-split{flex-direction:column; min-height:0}
    .login-split-photo{flex:none; height:180px}
  }

  /* ---- FORM BASICO ---- */
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4)}
  @media(max-width:600px){.form-grid{grid-template-columns:1fr}}
  .checkbox-row{display:flex; align-items:center; gap:10px; font-size:var(--fs-sm); color:var(--muted)}
  .checkbox-row input{width:16px;height:16px; accent-color:var(--ink)}

  /* ---- UPLOAD DE IMAGEN ---- */
  .upload-box{
    border:1.5px dashed var(--border-strong); border-radius:var(--r-lg); padding:var(--sp-8);
    text-align:center; background:var(--card-2); max-width:420px; cursor:pointer; transition:background .12s, border-color .12s;
  }
  .upload-box:hover{background:var(--card); border-color:var(--muted-2)}
  .upload-icon{width:44px;height:44px; border-radius:var(--r-sm); background:var(--card); box-shadow:var(--shadow-depth); display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-3); font-size:18px}
  .upload-box .title{font-size:var(--fs-sm); font-weight:600; margin-bottom:3px}
  .upload-box .sub{font-size:var(--fs-xs); color:var(--muted-2)}
  .upload-preview-row{display:flex; gap:var(--sp-3); margin-top:var(--sp-4); flex-wrap:wrap}
  .upload-thumb{width:72px;height:72px; border-radius:var(--r-md); overflow:hidden; position:relative; box-shadow:var(--shadow-depth)}
  .upload-thumb img{width:100%;height:100%;object-fit:cover; display:block}
  .upload-thumb .remove{position:absolute; top:4px; right:4px; width:18px;height:18px; border-radius:var(--r-xs); background:rgba(0,0,0,.6); color:#fff; border:none; font-size:10px; display:flex; align-items:center; justify-content:center; cursor:pointer}

  /* ---- CALENDAR / DATE PICKER ---- */
  .calendar{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow-depth); padding:var(--sp-5); max-width:300px}
  .calendar-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4)}
  .calendar-head .month{font-weight:700; font-size:var(--fs-sm)}
  .calendar-nav{display:flex; gap:4px}
  .calendar-nav button{width:26px;height:26px; border-radius:var(--r-xs); border:none; background:var(--card-2); color:var(--muted); cursor:pointer; font-size:12px}
  .calendar-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center}
  .calendar-grid .dow{font-size:10px; color:var(--muted-2); font-weight:700; padding-bottom:6px}
  .calendar-grid .day{
    aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs);
    border-radius:var(--r-sm); color:var(--ink); cursor:pointer;
  }
  .calendar-grid .day:hover{background:var(--card-2)}
  .calendar-grid .day.muted{color:var(--muted-2)}
  .calendar-grid .day.selected{background:var(--brand); color:var(--on-brand); font-weight:700}
  .calendar-grid .day.today{box-shadow:0 0 0 1.5px var(--brand) inset; color:var(--brand); font-weight:700}
  .calendar-grid .day.today.selected{box-shadow:none; color:var(--on-brand)}

  /* ---- DATE RANGE PICKER (patrón usado en Gutiérrez Lamadrid — reportes) ---- */
  .range-picker{position:relative; display:inline-block}
  .range-trigger{
    display:flex; align-items:center; gap:8px; padding:10px 16px; min-width:220px;
    border:1px solid var(--border-strong); border-radius:var(--r-md); background:transparent;
    font-family:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--ink); cursor:pointer;
    transition:background .12s;
  }
  .range-trigger:hover{background:var(--card-2)}
  .range-trigger .icon{color:var(--muted)}
  .range-dropdown{
    position:absolute; top:calc(100% + 8px); left:0; z-index:50; display:none;
    background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); overflow:hidden;
  }
  .range-dropdown.open{display:flex}
  .range-presets{display:flex; flex-direction:column; gap:2px; padding:var(--sp-3); min-width:150px; background:var(--surface)}
  .range-presets button{
    text-align:left; padding:9px 12px; border:none; background:transparent; border-radius:var(--r-md);
    font-family:inherit; font-size:var(--fs-sm); font-weight:500; color:var(--muted); cursor:pointer; transition:.12s;
  }
  .range-presets button:hover{background:var(--card); color:var(--ink)}
  .range-presets button.active{background:var(--card); color:var(--brand); font-weight:700; box-shadow:var(--shadow-depth)}
  .range-cal{padding:var(--sp-4) var(--sp-5); flex:1; min-width:0}
  .range-cal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3)}
  .range-cal-header span{font-size:var(--fs-sm); font-weight:700; color:var(--ink); text-transform:capitalize}
  .range-cal-header button{
    width:26px; height:26px; border:none; background:var(--card-2); color:var(--muted);
    border-radius:var(--r-xs); cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center;
  }
  .range-cal-header button:hover{color:var(--ink)}
  .range-cal-grid{display:grid; grid-template-columns:repeat(7,minmax(30px,1fr)); gap:2px; text-align:center}
  .range-cal-grid .dow{font-size:10px; color:var(--muted-2); font-weight:700; padding-bottom:6px}
  .range-cal-grid .cal-day{
    aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs);
    color:var(--ink); cursor:pointer; border-radius:var(--r-sm);
  }
  .range-cal-grid .cal-day:hover{background:var(--card-2)}
  .range-cal-grid .cal-day.cal-empty{cursor:default; visibility:hidden}
  .range-cal-grid .cal-day.cal-today{font-weight:800; color:var(--brand)}
  .range-cal-grid .cal-day.cal-inrange{background:var(--brand-tint); border-radius:0}
  .range-cal-grid .cal-day.cal-start{border-radius:var(--r-sm) 0 0 var(--r-sm)}
  .range-cal-grid .cal-day.cal-end{border-radius:0 var(--r-sm) var(--r-sm) 0}
  .range-cal-grid .cal-day.cal-start,.range-cal-grid .cal-day.cal-end{background:var(--brand); color:var(--on-brand); font-weight:700}
  .range-cal-footer{
    display:flex; flex-direction:column; gap:10px;
    margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--border);
  }
  .range-cal-footer .range-preview{
    font-size:var(--fs-xs); color:var(--muted); font-family:var(--mono);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .range-cal-footer-actions{display:flex; justify-content:flex-end; gap:8px}
  @media(max-width:560px){
    .range-dropdown{flex-direction:column; min-width:280px}
    .range-presets{flex-direction:row; flex-wrap:wrap}
  }

  /* ---- SELECTOR DE FECHA Y HORA (Calendar + hora/minuto/AM-PM) ---- */
  .dtime-time-row{
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:var(--sp-4) 0; margin-top:var(--sp-3); border-top:1px solid var(--border);
  }
  .dtime-time-row select{
    width:auto; min-width:52px; font-family:inherit; font-size:var(--fs-xs); color:var(--ink);
    background:var(--card-2); border:1px solid transparent; border-radius:var(--r-sm); outline:none;
    padding:5px 26px 5px 8px !important; background-position:right 8px center !important; background-size:10px !important;
  }
  .dtime-colon{font-weight:700; color:var(--muted-2)}
  .dtime-ampm{display:flex; gap:2px; background:var(--surface); padding:3px; border-radius:var(--r-sm)}
  .dtime-ampm button{
    padding:7px 12px; border:none; background:transparent; border-radius:var(--r-xs);
    font-family:inherit; font-weight:600; font-size:var(--fs-xs); color:var(--muted); cursor:pointer;
  }
  .dtime-ampm button.active{background:var(--card); color:var(--ink); box-shadow:var(--shadow-depth)}

  /* ---- MODAL T&C / PRIVACIDAD / CRÉDITOS ---- */
  .legal-tabs{display:flex; gap:2px; background:var(--surface); padding:4px; border-radius:var(--r-md); width:fit-content; margin-bottom:var(--sp-4)}
  .legal-tabs button{
    border:none; background:transparent; font-family:inherit; font-weight:600; font-size:var(--fs-sm);
    color:var(--muted); padding:8px 16px; border-radius:var(--r-sm); cursor:pointer;
  }
  .legal-tabs button.active{background:var(--card); color:var(--ink); box-shadow:var(--shadow-depth)}
  .legal-body{max-height:280px; overflow-y:auto; font-size:var(--fs-sm); color:var(--muted); line-height:1.6}
  .legal-body h4{font-size:var(--fs-sm); color:var(--ink); margin:0 0 6px}
  .legal-body p{margin:0 0 var(--sp-4)}
  .legal-body .credits-note{
    background:var(--card-2); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4);
    font-size:var(--fs-xs); color:var(--muted-2); margin-bottom:var(--sp-5);
  }
  .legal-body .credits-note a{color:var(--brand); text-decoration:none}
  .legal-body .credits-note a:hover{text-decoration:underline}

  /* ---- AI CHAT INTERFACE (referencia visual: assistant-ui) ---- */
  .chat-shell{
    display:flex; height:560px; background:var(--bg); border-radius:var(--r-xl);
    overflow:hidden; box-shadow:var(--shadow-pop);
  }
  .chat-sidebar{
    width:230px; flex-shrink:0; background:var(--surface); padding:var(--sp-4);
    display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden;
    transition:width .18s ease, padding .18s ease; white-space:nowrap;
  }
  .chat-sidebar.collapsed{width:0; padding-left:0; padding-right:0; border:none}
  .chat-sidebar-brand{display:flex; align-items:center; gap:8px; font-weight:700; font-size:var(--fs-sm); color:var(--ink); padding:0; margin-bottom:var(--sp-6)}
  .chat-sidebar-brand .icon{color:var(--muted)}
  .chat-new-thread{
    display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:var(--r-md);
    background:var(--card-2); color:var(--ink); font-size:var(--fs-sm); font-weight:600;
    cursor:pointer; border:none; font-family:inherit; width:100%; margin-bottom:var(--sp-5);
  }
  .chat-new-thread:hover{background:var(--card)}
  .chat-thread-group{font-size:var(--fs-xs); color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin:0 0 6px 6px}
  .chat-thread{padding:9px 10px; border-radius:var(--r-md); font-size:var(--fs-sm); color:var(--muted); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .chat-thread:hover{background:var(--card-2); color:var(--ink)}
  .chat-thread.active{background:var(--card-2); color:var(--ink)}

  .chat-main{flex:1; display:flex; flex-direction:column; min-width:0}
  .chat-topbar{
    display:flex; align-items:center; justify-content:space-between;
    height:66px; padding:0 var(--sp-6); border-bottom:1px solid var(--border); flex-shrink:0;
  }
  .chat-topbar-left{display:flex; align-items:center; gap:12px; font-weight:600; font-size:var(--fs-sm); color:var(--ink)}
  .chat-topbar-right .icon{color:var(--muted); cursor:pointer}

  .chat-body{flex:1; display:flex; align-items:center; justify-content:center; padding:var(--sp-6)}
  .chat-empty{width:100%; max-width:640px; display:flex; flex-direction:column; align-items:center}
  .chat-empty h2{font-size:var(--fs-2xl); font-weight:700; text-align:center; margin-bottom:var(--sp-6); color:var(--ink)}

  .chat-composer{width:100%; background:var(--card); border-radius:var(--r-xl); box-shadow:var(--shadow-depth); padding:var(--sp-4) var(--sp-4) var(--sp-3)}
  .chat-composer-input{font-size:var(--fs-base); color:var(--muted); padding:var(--sp-2) var(--sp-2) var(--sp-4)}
  .chat-composer-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
  .chat-composer-left{display:flex; align-items:center; gap:8px}
  .chat-model-pill{
    display:flex; align-items:center; gap:6px; padding:8px 12px 8px 8px; border-radius:var(--r-md);
    background:transparent; font-size:var(--fs-xs); font-weight:600; color:var(--ink); cursor:pointer; border:none; font-family:inherit;
  }
  .chat-model-pill:hover{background:var(--card-2)}
  .chat-model-pill .icon{color:var(--muted)}
  .chat-composer-actions{display:flex; align-items:center; gap:6px}
  .chat-icon-btn{
    width:32px; height:32px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
    background:transparent; color:var(--muted); cursor:pointer; border:none; flex-shrink:0;
  }
  .chat-icon-btn:hover{background:var(--card-2); color:var(--ink)}
  .chat-icon-btn.plus-btn{border:1px solid var(--border-strong); color:var(--ink)}
  .chat-send-btn{
    width:32px; height:32px; border-radius:var(--r-sm); background:var(--brand); color:var(--on-brand);
    display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; flex-shrink:0;
  }
  .chat-send-btn:hover{filter:brightness(1.15)}

  .chat-quick-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:var(--sp-5)}
  .chat-quick-actions button{
    display:flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--r-md);
    background:transparent; border:1px solid var(--border-strong); color:var(--ink);
    font-size:var(--fs-xs); font-weight:600; cursor:pointer; font-family:inherit;
  }
  .chat-quick-actions button:hover{background:var(--card-2)}
  .chat-quick-actions .icon{color:var(--muted); width:15px; height:15px}

  /* ---- SEARCH ---- */
  .search-input{
    position:relative; display:flex; align-items:center; max-width:340px;
  }
  .search-input .icon{position:absolute; left:14px; color:var(--muted); pointer-events:none}
  .search-input input{
    width:100%; font-family:inherit; font-size:var(--fs-sm); color:var(--ink);
    background:var(--card-2); border:1px solid transparent; border-radius:var(--r-md);
    padding:10px 38px; outline:none; transition:border-color .12s, box-shadow .12s, background .12s;
  }
  .search-input input:focus{background:var(--card); border-color:var(--border-strong); box-shadow:0 0 0 4px var(--brand-tint)}
  .search-input .clear-btn{
    position:absolute; right:8px; width:20px; height:20px; border-radius:var(--r-xs); border:none;
    background:var(--border-strong); color:var(--ink); display:none; align-items:center; justify-content:center; cursor:pointer;
  }
  .search-input.has-value .clear-btn{display:flex}
  .search-pill{
    display:flex; align-items:center; gap:8px; background:var(--card-2); border-radius:var(--r-md);
    padding:8px 16px; font-size:var(--fs-sm); color:var(--muted-2); width:260px;
  }
  .search-pill input{
    flex:1; min-width:0; background:transparent; border:none; outline:none;
    font-family:inherit; font-size:var(--fs-sm); color:var(--ink);
  }
  .search-pill input::placeholder{color:var(--muted-2)}
  .search-pill .icon{flex-shrink:0; color:var(--muted-2)}

  /* ---- PAGINATION ---- */
  .pagination{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap}
  .pagination-info{font-size:var(--fs-xs); color:var(--muted-2)}
  .pagination-controls{display:flex; align-items:center; gap:4px}
  .page-btn{
    min-width:32px; height:32px; padding:0 8px; border-radius:var(--r-sm); border:none; background:transparent;
    color:var(--muted); font-family:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .page-btn:hover:not(:disabled){background:var(--card-2); color:var(--ink)}
  .page-btn.active{background:var(--brand); color:var(--on-brand)}
  .page-btn:disabled{opacity:.35; cursor:not-allowed}
  .page-btn.ellipsis{cursor:default}
  .page-btn.ellipsis:hover{background:transparent}
  .pagination-size{
    display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--muted-2);
  }
  .pagination-size select{
    font-family:inherit; font-size:var(--fs-xs); color:var(--ink); background:var(--card-2);
    border:1px solid transparent; border-radius:var(--r-sm); padding:5px 26px 5px 8px !important; outline:none;
    background-position:right 8px center !important; background-size:10px !important;
  }

  /* ---- DATA TABLE (toolbar + tabla + paginación) ---- */
  .dt-toolbar{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-4); flex-wrap:wrap}
  .dt-toolbar-right{display:flex; align-items:center; gap:8px}
  th.sortable{cursor:pointer; user-select:none; white-space:nowrap}
  th.sortable .th-inner{display:flex; align-items:center; gap:5px}
  th.sortable .icon{width:12px;height:12px; color:var(--muted-2); transition:transform .12s}
  th.sortable.sort-desc .icon{transform:rotate(180deg)}
  th.sortable.sort-active .icon{color:var(--ink)}
  td.checkbox-cell, th.checkbox-cell{width:40px; padding-right:0}
  td.dt-actions-cell, th.dt-actions-cell{width:56px; text-align:right}
  .dt-checkbox{
    width:16px; height:16px; border-radius:5px; border:1.5px solid var(--border-strong);
    background:var(--card); appearance:none; cursor:pointer; position:relative;
  }
  .dt-checkbox:checked{background:var(--brand); border-color:var(--brand)}
  .dt-checkbox:checked::after{
    content:''; position:absolute; left:4px; top:1px; width:4px; height:8px;
    border:solid var(--bg); border-width:0 2px 2px 0; transform:rotate(45deg);
  }
  .dt-footer{margin-top:var(--sp-4)}

  /* ---- TOP NAV DESPLEGABLE (dropdown) ---- */
  .topnav-dropdown-wrap, .dropdown-anchor{position:relative}
  .navdrop.navdrop-up{top:auto; bottom:calc(100% + 10px); left:0; right:auto}
  .navdrop{
    position:absolute; top:calc(100% + 10px); right:0; z-index:50; display:none;
    min-width:230px; background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); padding:6px;
  }
  .navdrop.open{display:block}
  .navdrop-header{padding:10px 12px 8px; border-bottom:1px solid var(--border); margin-bottom:6px}
  .navdrop-header .name{font-size:var(--fs-sm); font-weight:700; color:var(--ink)}
  .navdrop-header .email{font-size:var(--fs-xs); color:var(--muted-2)}
  .navdrop-item{
    display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-md);
    font-size:var(--fs-sm); color:var(--ink); cursor:pointer; font-weight:500;
  }
  .navdrop-item:hover{background:var(--card-2)}
  .navdrop-item.active{background:var(--brand-tint); color:var(--brand); font-weight:700}
  .navdrop-item .icon{color:var(--muted); width:16px; height:16px}
  .navdrop-item.danger{color:var(--danger)}
  .navdrop-item.danger .icon{color:var(--danger)}
  .navdrop-sep{height:1px; background:var(--border); margin:6px 4px}
  .navdrop-notif{width:280px}
  .navdrop-notif-item{display:flex; gap:10px; padding:10px 12px; border-radius:var(--r-md); cursor:pointer}
  .navdrop-notif-item:hover{background:var(--card-2)}
  .navdrop-notif-dot{width:7px;height:7px;border-radius:50%; background:var(--brand); flex-shrink:0; margin-top:6px}
  .navdrop-notif-item .txt{font-size:var(--fs-xs); color:var(--muted); line-height:1.5}
  .navdrop-notif-item .txt b{color:var(--ink); font-weight:600}
  .topnav-icon.has-dot{position:relative}
  .topnav-icon.has-dot::after{content:''; position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:2px solid var(--card)}

  /* ---- CHARTS ---- */
  .chart-card{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow-depth); padding:var(--sp-6)}
  .chart-card-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--sp-5)}
  .chart-card-head h4{font-size:var(--fs-sm); font-weight:700; color:var(--ink); margin:0}
  .chart-card-head .chart-total{font-size:var(--fs-xl); font-weight:700; color:var(--ink)}
  .chart-legend{display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-4)}
  .chart-legend-item{display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted)}
  .chart-legend-dot{width:8px;height:8px;border-radius:50%}
  .bar-chart{display:flex; align-items:flex-end; gap:10px; height:180px; padding-top:var(--sp-4)}
  .bar-chart .bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end}
  .bar-chart .bar{width:100%; max-width:34px; border-radius:6px 6px 2px 2px; background:var(--brand); position:relative; transition:filter .12s}
  .bar-chart .bar:hover{filter:brightness(1.15)}
  .bar-chart .bar-label{font-size:var(--fs-xs); color:var(--muted-2)}
  .donut-wrap{display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap}
  .donut-center-label{font-size:var(--fs-xs); color:var(--muted-2); text-align:center}
  .donut-center-value{font-size:var(--fs-xl); font-weight:700; color:var(--ink); display:block}
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4)}
  @media(max-width:760px){.grid-2{grid-template-columns:1fr}}

  /* ======================================================
     APP SHELL — layout base de toda app del ERP
     sidebar expandible/colapsable + header + body + footer
     ====================================================== */
  .shell{display:flex; position:relative; height:680px; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-pop); background:var(--bg)}

  .shell-nav{
    width:230px; flex-shrink:0; background:var(--surface); display:flex; flex-direction:column;
    transition:width .18s ease;
  }
  .shell-nav.collapsed{width:68px}
  .shell-nav-top{display:flex; align-items:center; justify-content:space-between; padding:var(--sp-4); gap:8px; overflow:hidden}
  .shell-logo{display:flex; align-items:center; gap:10px; min-width:0}
  .shell-logo-mark{
    width:32px; height:32px; border-radius:var(--r-md); background:var(--ink); color:var(--bg);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:var(--fs-sm); flex-shrink:0;
  }
  .shell-logo-text{font-weight:800; font-size:var(--fs-base); color:var(--ink); white-space:nowrap; overflow:hidden}
  .shell-nav.collapsed .shell-logo-text{display:none}
  .shell-nav-toggle{
    width:26px; height:26px; border-radius:var(--r-sm); background:var(--card-2); color:var(--muted);
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; border:none;
  }
  .shell-nav-toggle:hover{color:var(--ink)}

  .shell-nav-body{flex:1; overflow-y:auto; overflow-x:hidden; padding:var(--sp-2) var(--sp-3); display:flex; flex-direction:column; gap:2px}
  .shell-nav-item{
    display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-md);
    color:var(--muted); font-size:var(--fs-sm); font-weight:500; cursor:pointer; white-space:nowrap;
  }
  .shell-nav-item:hover{background:var(--card-2); color:var(--ink)}
  .shell-nav-item.active{background:var(--card); color:var(--ink); font-weight:600; box-shadow:var(--shadow-depth)}
  .shell-nav-item .icon{flex-shrink:0; width:17px; height:17px}
  .shell-nav-item .label{overflow:hidden; text-overflow:ellipsis; flex:1}
  .shell-nav-item .chevron{flex-shrink:0; transition:transform .12s; width:11px; height:11px}
  .shell-nav-item.expanded .chevron{transform:rotate(180deg)}
  .shell-nav.collapsed .shell-nav-item .label,
  .shell-nav.collapsed .shell-nav-item .chevron{display:none}
  .shell-nav.collapsed .shell-nav-item{justify-content:center}
  .shell-nav.collapsed .shell-submenu{display:none !important}

  .shell-submenu{display:none; flex-direction:column; padding-left:33px; gap:1px; margin:2px 0 4px}
  .shell-submenu.open{display:flex}
  .shell-submenu a{
    padding:7px 10px; border-radius:var(--r-sm); font-size:var(--fs-xs); color:var(--muted);
    cursor:pointer; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .shell-submenu a:hover{background:var(--card-2); color:var(--ink)}
  .shell-submenu a.active{color:var(--brand); font-weight:600}

  .shell-nav-footer{padding:var(--sp-3); border-top:1px solid var(--border)}

  .shell-main{flex:1; display:flex; flex-direction:column; min-width:0}
  .shell-header{
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
    height:66px; padding:0 var(--sp-6); border-bottom:1px solid var(--border); flex-shrink:0;
  }
  .shell-header-left{display:flex; align-items:center; gap:12px; min-width:0}
  .shell-breadcrumb{display:flex; align-items:center; gap:7px; font-size:var(--fs-sm); color:var(--muted-2); min-width:0}
  .shell-breadcrumb .crumb{cursor:pointer; white-space:nowrap}
  .shell-breadcrumb .crumb:hover{color:var(--ink)}
  .shell-breadcrumb .crumb.current{color:var(--ink); font-weight:600}
  .shell-breadcrumb .sep{color:var(--muted-2); opacity:.6}
  .shell-header-right{display:flex; align-items:center; gap:10px; flex-shrink:0}
  .theme-toggle-mini{display:flex; align-items:center; gap:2px; background:var(--surface); padding:3px; border-radius:var(--r-sm)}
  .theme-toggle-mini button{
    width:28px; height:28px; border-radius:var(--r-sm); border:none; background:transparent;
    color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .theme-toggle-mini button.active{background:var(--card); color:var(--ink); box-shadow:var(--shadow-depth)}

  .shell-body{flex:1; overflow-y:auto; padding:var(--sp-6)}
  .shell-page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-6); flex-wrap:wrap}
  .shell-page-head h1{font-size:var(--fs-2xl); font-weight:700; color:var(--ink); margin:0 0 4px}
  .shell-page-head p{font-size:var(--fs-sm); color:var(--muted); margin:0}
  .shell-page-head .actions{display:flex; gap:10px; flex-shrink:0}

  .shell-kpi-row{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-bottom:var(--sp-6)}
  @media(max-width:760px){.shell-kpi-row{grid-template-columns:1fr}}
  .shell-kpi-card{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow-depth); padding:var(--sp-5)}
  .shell-kpi-card .kpi-label{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--muted); margin-bottom:var(--sp-3)}
  .shell-kpi-card .kpi-label .icon{width:16px; height:16px; color:var(--muted-2)}
  .shell-kpi-card .kpi-value{font-size:var(--fs-2xl); font-weight:700; color:var(--ink); margin-bottom:4px}
  .shell-kpi-card .kpi-delta{font-size:var(--fs-xs); color:var(--ok)}

  .shell-footer{
    padding:var(--sp-3) var(--sp-6); border-top:1px solid var(--border); flex-shrink:0;
    display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-xs); color:var(--muted-2);
  }

  /* ======================================================
     DRAWERS — lateral derecho y bottom (dentro del App Shell)
     ====================================================== */
  .shell-drawer-overlay{
    position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:80;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .shell-drawer-overlay.open{opacity:1; pointer-events:auto}

  .shell-drawer{
    position:absolute; background:var(--card); box-shadow:var(--shadow-pop); z-index:90;
    display:flex; flex-direction:column; transition:transform .22s ease;
  }
  .shell-drawer-right{
    top:0; right:0; height:100%; width:380px; max-width:88%;
    transform:translateX(100%);
  }
  .shell-drawer-right.open{transform:translateX(0)}
  .shell-drawer-bottom{
    left:0; right:0; bottom:0; height:50%;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    transform:translateY(100%);
  }
  .shell-drawer-bottom.open{transform:translateY(0)}

  .shell-drawer-handle{
    display:none; width:36px; height:4px; border-radius:var(--r-sm); background:var(--border-strong);
    margin:10px auto 0;
  }
  .shell-drawer-bottom .shell-drawer-handle{display:block}

  /* ---- Drawer independiente a nivel de página (position:fixed) — para componentes que viven
     fuera del App Shell, como Kanban, y necesitan su propio Drawer sin quedar "contenidos"
     dentro de la caja de otro componente. Reutiliza .shell-drawer-header/body/footer/close. ---- */
  .page-drawer-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:495;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .page-drawer-overlay.open{opacity:1; pointer-events:auto}
  .page-drawer-right{
    position:fixed; top:0; right:0; height:100%; width:380px; max-width:88%;
    background:var(--card); box-shadow:var(--shadow-pop); z-index:496;
    display:flex; flex-direction:column; transition:transform .22s ease; transform:translateX(100%);
  }
  .page-drawer-right.open{transform:translateX(0)}

  .shell-drawer-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:var(--sp-5) var(--sp-6); border-bottom:1px solid var(--border); flex-shrink:0;
  }
  .shell-drawer-header h3{margin:0; font-size:var(--fs-lg); font-weight:700; color:var(--ink)}
  .shell-drawer-close{
    width:30px; height:30px; border-radius:var(--r-sm); background:var(--card-2); color:var(--muted);
    display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; flex-shrink:0;
  }
  .shell-drawer-close:hover{color:var(--ink)}
  .shell-drawer-body{flex:1; overflow-y:auto; padding:var(--sp-6)}
  .shell-drawer-body .field{max-width:100%}
  .shell-drawer-footer{
    padding:var(--sp-4) var(--sp-6); border-top:1px solid var(--border); flex-shrink:0;
    display:flex; justify-content:flex-end; gap:8px;
  }

  /* ======================================================
     KANBAN
     ====================================================== */
  .kanban-board{display:flex; gap:var(--sp-4); overflow-x:auto; padding-bottom:8px; align-items:flex-start}
  .kanban-col{flex:0 0 250px; display:flex; flex-direction:column; gap:10px}
  .kanban-col-head{display:flex; align-items:center; justify-content:space-between; padding:0 4px; font-size:var(--fs-sm); font-weight:700; color:var(--ink)}
  .kanban-col-head .count{font-size:var(--fs-xs); font-weight:700; color:var(--muted-2); background:var(--card-2); border-radius:var(--r-xs); padding:2px 9px}
  .kanban-col-body{background:var(--surface); border-radius:var(--r-lg); padding:8px; display:flex; flex-direction:column; gap:8px; min-height:80px}
  .kanban-card{
    background:var(--card); border-radius:var(--r-md); box-shadow:var(--shadow-depth);
    padding:var(--sp-4); cursor:pointer; transition:box-shadow .12s, transform .12s;
  }
  .kanban-card:hover{box-shadow:var(--shadow-pop); transform:translateY(-1px)}
  .kanban-card h5{margin:0 0 8px; font-size:var(--fs-sm); font-weight:600; color:var(--ink); line-height:1.4}
  .kanban-card .kanban-meta{display:flex; align-items:center; justify-content:space-between; margin-top:10px}
  .kanban-avatars{display:flex}
  .kanban-avatars .avatar{width:22px; height:22px; font-size:10px; margin-left:-6px; border:2px solid var(--card); box-shadow:none}
  .kanban-avatars .avatar:first-child{margin-left:0}
  .kanban-drawer-meta{display:flex; flex-direction:column; gap:var(--sp-4); margin-bottom:var(--sp-6)}
  .kanban-drawer-row{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border)}
  .kanban-drawer-row span:first-child{font-size:var(--fs-xs); color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em; font-weight:700}

  /* ======================================================
     FORMULARIO MULTI-STEP
     ====================================================== */
  .stepper{display:flex; align-items:center; margin-bottom:var(--sp-6)}
  .stepper-step{display:flex; align-items:center; gap:10px; flex-shrink:0}
  .stepper-circle{
    width:30px; height:30px; border-radius:var(--r-sm); background:var(--card-2); color:var(--muted);
    display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:700;
    flex-shrink:0; transition:background .15s, color .15s;
  }
  .stepper-step.active .stepper-circle{background:var(--brand); color:var(--on-brand)}
  .stepper-step.done .stepper-circle{background:var(--ok); color:#fff}
  .stepper-label{font-size:var(--fs-sm); font-weight:600; color:var(--muted); white-space:nowrap}
  .stepper-step.active .stepper-label, .stepper-step.done .stepper-label{color:var(--ink)}
  .stepper-line{flex:1; height:2px; background:var(--border-strong); margin:0 14px; transition:background .15s}
  .stepper-line.done{background:var(--ok)}

  .msform-panel{display:none}
  .msform-panel.active{display:block}
  .msform-actions{display:flex; justify-content:space-between; margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--border)}
  .msform-review-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:var(--fs-sm)}
  .msform-review-row span:first-child{color:var(--muted-2)}
  .msform-review-row span:last-child{color:var(--ink); font-weight:600}
  .msform-success{display:flex; flex-direction:column; align-items:center; text-align:center; padding:var(--sp-8) 0}
  .msform-success .ok-circle{
    width:56px; height:56px; border-radius:50%; background:var(--ok-tint); color:var(--ok);
    display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-4);
  }
  .msform-success .ok-circle .icon{width:26px; height:26px}
  .msform-success h4{margin:0 0 6px; font-size:var(--fs-lg); color:var(--ink)}
  .msform-success p{margin:0; color:var(--muted); font-size:var(--fs-sm)}

  /* ======================================================
     SIGNATURE PAD (modal real de página completa, con scroll lock)
     ====================================================== */
  .real-modal-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:500;
    display:none; align-items:center; justify-content:center; padding:var(--sp-4);
  }
  .real-modal-overlay.open{display:flex}
  .real-modal-box{
    background:var(--card); border-radius:var(--r-xl); box-shadow:var(--shadow-pop);
    max-width:480px; width:100%; padding:var(--sp-6); max-height:90vh; overflow-y:auto;
  }
  .real-modal-box h3{margin:0 0 6px; font-size:var(--fs-lg); color:var(--ink)}
  .real-modal-box .sub{margin:0 0 var(--sp-5); font-size:var(--fs-sm); color:var(--muted)}
  .sig-canvas-wrap{
    border:1.5px dashed var(--border-strong); border-radius:var(--r-md); background:var(--card-2);
    touch-action:none; overflow:hidden;
  }
  .sig-canvas-wrap canvas{display:block; width:100%; height:180px; cursor:crosshair}
  .sig-hint{font-size:var(--fs-xs); color:var(--muted-2); text-align:center; margin-top:8px}
  .real-modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:var(--sp-5)}

  /* ======================================================
     PHOTO ANNOTATE (marcado sobre imagen — uso médico/referencia)
     Abre en modal al 95% de la pantalla, mismas reglas que Signature Pad
     ====================================================== */
  .gallery-thumb{
    position:relative; width:220px; height:220px; border-radius:var(--r-lg); overflow:hidden;
    box-shadow:var(--shadow-depth); background:var(--card-2);
  }
  .gallery-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .18s ease}
  .gallery-thumb:hover img{transform:scale(1.05)}
  .gallery-thumb-overlay{
    position:absolute; inset:0; background:rgba(0,0,0,.45); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px; opacity:0; transition:opacity .18s ease;
  }
  .gallery-thumb:hover .gallery-thumb-overlay{opacity:1}
  .gallery-thumb-action{
    display:flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--r-md);
    background:rgba(255,255,255,.16); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.3); color:#fff; font-size:var(--fs-xs); font-weight:600;
    cursor:pointer; width:110px; justify-content:center;
  }
  .gallery-thumb-action:hover{background:rgba(255,255,255,.3)}
  .gallery-thumb-action .icon{color:#fff; width:14px; height:14px}

  .photo-modal-box{
    width:95vw; height:95vh; max-width:95vw; max-height:95vh;
    display:flex; flex-direction:column; padding:var(--sp-5) var(--sp-6);
  }
  .photo-modal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); flex-shrink:0}
  .photo-modal-header h3{margin:0}
  .photo-modal-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; gap:var(--sp-4)}

  .photo-view-box{
    max-width:90vw; max-height:90vh; width:auto; display:flex; flex-direction:column;
    padding:var(--sp-5) var(--sp-6);
  }
  .photo-view-body{flex:1; display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden}
  .photo-view-body img{max-width:100%; max-height:75vh; border-radius:var(--r-lg); display:block; object-fit:contain}

  /* ---- Visor de PDF — sin herramientas, con Descargar; a diferencia del modal "Ver"
     (que limita la imagen a 90vw/90vh), el documento ocupa 100% de ancho y alto disponibles
     dentro del modal, que a su vez ocupa toda la pantalla (mismo patrón que .photo-modal-box). ---- */
  .pdf-viewer-box{
    position:fixed; inset:0; width:100vw; height:100vh; max-width:100vw; max-height:100vh;
    display:flex; flex-direction:column; padding:10px var(--sp-4) var(--sp-4); border-radius:0; margin:0;
  }
  .pdf-viewer-header{justify-content:flex-end; margin-bottom:8px; flex-shrink:0}
  .pdf-viewer-body{flex:1; display:flex; width:100%; height:100%; min-height:0}
  .pdf-viewer-body iframe{flex:1; width:100%; height:100%; border:none; background:#fff}

  .photo-history-trigger{display:flex; align-items:center; gap:6px}
  .photo-history-drop{width:290px; max-height:360px; overflow-y:auto}
  .photo-history-item{
    display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--r-md); cursor:pointer;
  }

  /* ---- Repositorio de archivos (galería + documentos), agrupado por fecha ----
     Miniatura reducida de .gallery-thumb para vistas con muchos elementos (ej. expediente
     de un paciente con fotos de varias consultas). Mismo patrón de hover (Ver/Anotar/Descargar). */
  .repo-date-group{margin-bottom:var(--sp-4)}
  .repo-date-group .t{font-size:var(--fs-xs); color:var(--muted-2); font-family:var(--mono); margin-bottom:8px}
  .repo-grid{display:flex; flex-wrap:wrap; gap:10px}
  .gallery-thumb-sm{
    position:relative; width:88px; height:88px; border-radius:var(--r-md); overflow:hidden;
    box-shadow:var(--shadow-depth); background:var(--card-2); flex-shrink:0; cursor:pointer;
  }
  .gallery-thumb-sm img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .18s ease, filter .18s ease}
  .gallery-thumb-sm:hover img{transform:scale(1.05); filter:brightness(.85)}
  .gallery-thumb-sm .gallery-thumb-overlay{gap:4px}
  .gallery-thumb-sm .gallery-thumb-action{
    width:auto; padding:4px 7px; font-size:9px; gap:3px; border-radius:var(--r-sm);
  }
  .gallery-thumb-sm .gallery-thumb-action .icon{width:11px; height:11px}
  .doc-row{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-md);
    background:var(--card-2); font-size:var(--fs-sm); color:var(--ink); margin-bottom:6px;
    transition:background .12s ease;
  }
  .doc-row:hover{background:var(--border)}
  .doc-row .icon{width:16px; height:16px; color:var(--muted-2); flex-shrink:0}
  .doc-row .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .doc-row .dl-btn{background:none; border:none; color:var(--muted-2); cursor:pointer; display:flex; padding:2px; flex-shrink:0}
  .doc-row .dl-btn:hover{color:var(--brand)}
  .doc-row .dl-btn .icon{width:14px; height:14px; color:inherit}
  .photo-history-item:hover{background:var(--card-2)}
  .photo-history-item img{width:44px; height:44px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; background:var(--card-2)}
  .photo-history-item .info{flex:1; min-width:0}
  .photo-history-item .info .label{font-size:var(--fs-xs); font-weight:600; color:var(--ink)}
  .photo-history-item .info .time{font-size:10px; color:var(--muted-2); margin-top:2px}
  .photo-history-item .restore-btn{font-size:var(--fs-xs); color:var(--brand); font-weight:700; flex-shrink:0; white-space:nowrap}
  .photo-history-item.current{background:var(--card-2)}
  .photo-history-item.current .restore-btn{color:var(--muted-2)}
  .photo-history-empty{padding:16px 10px; text-align:center; font-size:var(--fs-xs); color:var(--muted-2)}

  .photo-annotate-wrap{
    position:relative; flex:1; width:100%; display:flex; align-items:center; justify-content:center;
    min-height:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-depth); background:var(--card-2);
  }
  .photo-annotate-wrap canvas{display:block; touch-action:none; cursor:crosshair}
  .photo-annotate-toolbar{display:flex; align-items:center; justify-content:center; gap:var(--sp-4); flex-wrap:wrap; flex-shrink:0}
  .photo-annotate-group{display:flex; align-items:center; gap:8px}
  .photo-color-swatch{
    width:24px; height:24px; border-radius:50%; border:2px solid transparent; cursor:pointer; flex-shrink:0;
  }
  .photo-color-swatch.active{border-color:var(--ink); box-shadow:0 0 0 2px var(--card), 0 0 0 3px var(--border-strong)}
  .photo-brush-label{font-size:var(--fs-xs); color:var(--muted-2)}
  .photo-brush-size input[type="range"]{width:110px; accent-color:var(--ink)}

  /* ======================================================
     RESOURCE GRID (origen: Bed/Room Grid de erpHospital)
     Mapa de N unidades con 2-3 estados — camas, mesas, salas, equipos, etc.
     ====================================================== */
  .resgrid-legend{display:flex; gap:var(--sp-5); margin-bottom:var(--sp-5); flex-wrap:wrap}
  .resgrid-legend-item{display:flex; align-items:center; gap:7px; font-size:var(--fs-xs); color:var(--muted)}
  .resgrid-legend-dot{width:10px; height:10px; border-radius:4px}
  .resgrid-block{margin-bottom:var(--sp-6)}
  .resgrid-title{font-size:var(--fs-sm); font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:var(--sp-3)}
  .resgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--sp-3)}
  .resgrid-card{
    background:var(--card); border-radius:var(--r-md); box-shadow:var(--shadow-depth);
    padding:var(--sp-4); cursor:pointer; border-left:4px solid var(--ok); transition:transform .1s;
  }
  .resgrid-card:hover{transform:translateY(-2px)}
  .resgrid-card.ocupada{border-left-color:var(--danger)}
  .resgrid-card.limpieza{border-left-color:var(--warn)}
  .resgrid-card .rg-num{font-weight:700; font-size:var(--fs-base); margin-bottom:4px}
  .resgrid-card .rg-status{font-size:var(--fs-xs); color:var(--muted); margin-bottom:6px}
  .resgrid-card .rg-tag{font-size:var(--fs-xs); color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

  /* ======================================================
     SEMÁFORO — barra de umbral con relleno dinámico (ocupación/capacidad)
     ====================================================== */
  .semaforo{display:flex; align-items:center; gap:var(--sp-3)}
  .semaforo-bar{flex:1; height:10px; border-radius:var(--r-sm); background:var(--card-2); overflow:hidden; display:flex}
  .semaforo-fill{height:100%; transition:width .2s ease, background .2s ease}

  /* ======================================================
     MASTER-DETAIL (origen: ECE Layout de erpHospital)
     Lista seleccionable + panel de detalle — expedientes, contratos, tickets, etc.
     ====================================================== */
  .md-layout{display:grid; grid-template-columns:280px 1fr; gap:var(--sp-5); align-items:start}
  @media(max-width:900px){.md-layout{grid-template-columns:1fr}}
  .md-list{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow-depth); padding:var(--sp-3); max-height:520px; overflow-y:auto}
  .md-list-item{padding:10px 12px; border-radius:var(--r-md); cursor:pointer; margin-bottom:2px}
  .md-list-item:hover{background:var(--card-2)}
  .md-list-item.active{background:var(--brand-tint)}
  .md-list-item .nm{font-size:var(--fs-sm); font-weight:600; color:var(--ink)}
  .md-list-item .sub{font-size:var(--fs-xs); color:var(--muted-2)}
  .md-detail-block{margin-bottom:var(--sp-5)}
  .md-detail-block h4{font-size:var(--fs-sm); font-weight:700; margin-bottom:var(--sp-3); display:flex; align-items:center; gap:8px; color:var(--ink)}
  .md-metric-row{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-3)}
  @media(max-width:700px){.md-metric-row{grid-template-columns:repeat(2,1fr)}}
  .md-metric{background:var(--card-2); border-radius:var(--r-md); padding:8px 6px; text-align:center}
  .md-metric .v{font-size:var(--fs-base); font-weight:700; color:var(--ink)}
  .md-metric .l{font-size:9px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.04em; margin-top:2px}
  .md-timeline-item{display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:var(--fs-sm)}
  .md-timeline-item:last-child{border-bottom:none}
  .md-timeline-item .t{color:var(--muted-2); font-family:var(--mono); font-size:var(--fs-xs); min-width:70px; flex-shrink:0}

  /* ---- Checklist ---- */
  .checklist-item{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:var(--fs-sm)}
  .checklist-item:last-child{border-bottom:none}
  .checklist-item input{width:16px; height:16px; accent-color:var(--brand); cursor:pointer}
  .checklist-item.checked span{color:var(--muted-2); text-decoration:line-through}

  /* ======================================================
     SEARCH AUTOCOMPLETE (origen: CIE-11 de erpHospital)
     Buscador de catálogo externo — códigos, productos, referencias, etc.
     ====================================================== */
  .ac-search-box{position:relative; max-width:520px}
  .ac-results{margin-top:var(--sp-3); display:flex; flex-direction:column; gap:6px}
  .ac-result-item{display:flex; justify-content:space-between; align-items:center; background:var(--card); border-radius:var(--r-md); box-shadow:var(--shadow-depth); padding:12px 16px; cursor:pointer}
  .ac-result-item:hover{background:var(--card-2)}
  .ac-code{font-family:var(--mono); font-weight:700; color:var(--brand); font-size:var(--fs-sm)}
  .ac-desc{font-size:var(--fs-sm); color:var(--ink)}
  .ac-selected{background:var(--brand-tint); border:1px dashed var(--brand); border-radius:var(--r-md); padding:var(--sp-4); margin-top:var(--sp-4); display:none}

  /* ---- Badges de dominio propio (patrón .badge-{dominio}-{valor}) ---- */
  .badge-triage-rojo{background:rgba(239,91,91,.14); color:#ef5b5b}
  .badge-triage-naranja{background:rgba(230,126,34,.14); color:#e67e22}
  .badge-triage-amarillo{background:rgba(226,196,58,.16); color:#c7a91e}
  .badge-triage-verde{background:rgba(52,199,123,.12); color:#34c77b}
  .badge-triage-azul{background:rgba(82,150,183,.14); color:#5296b7}

  /* ======================================================
     TABLA AVANZADA — título/subtítulo + tabs + search + filas por página +
     sort + checkbox + avatar + tags + menú de fila + scroll interno + pagination
     ====================================================== */
  .atbl-card{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow-depth); overflow:hidden}
  .atbl-head{padding:var(--sp-5) var(--sp-6) 0}
  .atbl-head h3{margin:0 0 2px; font-size:var(--fs-lg); font-weight:700; color:var(--ink)}
  .atbl-head .sub{margin:0 0 var(--sp-5); font-size:var(--fs-sm); color:var(--muted)}
  .atbl-toolbar{
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
    padding:0 var(--sp-6) var(--sp-5); flex-wrap:wrap;
  }
  .atbl-toolbar-right{display:flex; align-items:center; gap:8px}
  .atbl-toolbar-left{display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0}
  .atbl-rows-select{display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--muted-2); white-space:nowrap}
  .atbl-rows-select select{
    font-family:inherit; font-size:var(--fs-xs); color:var(--ink); background:var(--card-2);
    border:1px solid transparent; border-radius:var(--r-sm); padding:6px 8px;
  }
  .atbl-scroll{max-height:360px; overflow-y:auto; border-top:1px solid var(--border)}
  .atbl-scroll table{border-collapse:collapse}
  .atbl-scroll thead th{
    position:sticky; top:0; z-index:2; background:var(--card);
    box-shadow:inset 0 -1px 0 var(--border);
  }
  .atbl-footer{
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
    padding:var(--sp-4) var(--sp-6); border-top:1px solid var(--border);
  }
  .atbl-footer .pagination{flex:1}
  .atbl-tag{display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:3px 8px; border-radius:var(--r-xs); margin-right:4px; white-space:nowrap}
  .atbl-tag-brand{background:var(--brand-tint); color:var(--brand)}
  .atbl-tag-ok{background:var(--ok-tint); color:var(--ok)}
  .atbl-tag-warn{background:var(--warn-tint); color:var(--warn)}
  .atbl-name-cell{display:flex; align-items:center; gap:10px}
  .atbl-name-cell .nm{font-weight:600; color:var(--ink); font-size:var(--fs-sm)}
  .atbl-name-cell .em{font-size:var(--fs-xs); color:var(--muted-2)}

  /* ======================================================
     CHAT (mensajería — conversaciones + hilo, no confundir con AI Chat)
     ====================================================== */
  .im-shell{display:flex; height:560px; background:var(--bg); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-pop)}
  .im-list{width:280px; flex-shrink:0; background:var(--surface); display:flex; flex-direction:column}
  .im-list-head{padding:var(--sp-4) var(--sp-5); font-weight:700; font-size:var(--fs-base); color:var(--ink); flex-shrink:0}
  .im-list-search{padding:0 var(--sp-4) var(--sp-3); flex-shrink:0}
  .im-list-search .search-input{max-width:100%}
  .im-list-body{flex:1; overflow-y:auto}
  /* Usuario logueado + Configuración, anclado abajo — patrón para vistas de vertical
     standalone (sin header de catálogo), ej. Consulta médica en medico.html */
  .consult-user-footer{
    display:flex; align-items:center; gap:10px; padding:var(--sp-3) var(--sp-4);
    border-top:1px solid var(--border); flex-shrink:0;
  }
  .consult-user-footer .info{flex:1; min-width:0}
  .consult-user-footer .info .nm{font-size:var(--fs-sm); font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .consult-user-footer .info .sub{font-size:var(--fs-xs); color:var(--muted-2)}
  .im-conv{display:flex; gap:10px; padding:11px 16px; cursor:pointer; align-items:flex-start}
  .im-conv:hover{background:var(--card-2)}
  .im-conv.active{background:var(--card)}
  .im-conv .avatar{flex-shrink:0}
  .im-conv-body{flex:1; min-width:0}
  .im-conv-top{display:flex; justify-content:space-between; align-items:baseline; gap:6px}
  .im-conv-name{font-size:var(--fs-sm); font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .im-conv-time{font-size:10px; color:var(--muted-2); flex-shrink:0}
  .im-conv-bottom{display:flex; justify-content:space-between; align-items:center; gap:6px; margin-top:2px}
  .im-conv-preview{font-size:var(--fs-xs); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .im-conv-badge{background:var(--danger); color:#fff; font-size:10px; font-weight:700; border-radius:var(--r-xs); min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 5px; flex-shrink:0}

  .im-thread{flex:1; display:flex; flex-direction:column; min-width:0}
  .im-thread-head{display:flex; align-items:center; gap:10px; padding:var(--sp-3) var(--sp-5); border-bottom:1px solid var(--border); flex-shrink:0}
  .im-thread-head .info{flex:1; min-width:0}
  .im-thread-head .name{font-weight:700; font-size:var(--fs-sm); color:var(--ink)}
  .im-thread-head .status{font-size:var(--fs-xs); color:var(--ok)}
  .im-thread-actions{display:flex; align-items:center; gap:4px; flex-shrink:0}
  .im-thread-actions .chat-icon-btn{color:var(--muted)}

  .im-messages{flex:1; overflow-y:auto; padding:var(--sp-5); display:flex; flex-direction:column; gap:8px}
  .im-day-sep{align-self:center; font-size:var(--fs-xs); color:var(--muted-2); background:var(--surface); padding:4px 14px; border-radius:var(--r-xs); margin:8px 0}
  .im-msg{max-width:68%; padding:10px 14px; border-radius:var(--r-lg); font-size:var(--fs-sm); line-height:1.45}
  .im-msg.in{align-self:flex-start; background:var(--card); color:var(--ink); border-bottom-left-radius:4px; box-shadow:var(--shadow-depth)}
  .im-msg.out{align-self:flex-end; background:var(--brand); color:var(--on-brand); border-bottom-right-radius:4px}
  .im-msg-time{font-size:10px; opacity:.55; margin-top:4px; display:block}

  .im-composer{display:flex; align-items:center; gap:8px; padding:var(--sp-3) var(--sp-5); border-top:1px solid var(--border); flex-shrink:0}
  .im-composer input{
    flex:1; background:var(--card-2); border:1px solid transparent; border-radius:var(--r-md);
    padding:11px 16px; font-family:inherit; font-size:var(--fs-sm); color:var(--ink); outline:none;
    transition:border-color .12s, box-shadow .12s, background .12s;
  }
  .im-composer input:focus{background:var(--card); border-color:var(--border-strong); box-shadow:0 0 0 4px var(--brand-tint)}

  /* ---- CONSULTA MÉDICA — basado en Chat, 3 columnas (pacientes / notas / detalle) ---- */
  .consult-shell{display:flex; height:620px; background:var(--bg); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-pop)}
  .consult-main{flex:1; display:flex; flex-direction:column; min-width:0; border-left:1px solid var(--border); border-right:1px solid var(--border)}
  /* Altura igual a .consult-detail-header (padding var(--sp-5) + avatar 52px) para que
     ambos renglones —búsqueda al centro, encabezado del paciente a la derecha— queden
     alineados como una sola franja continua entre las dos columnas. */
  .consult-search-row{
    height:92px; box-sizing:border-box; display:flex; align-items:center;
    padding:0 var(--sp-5); border-bottom:1px solid var(--border); flex-shrink:0;
  }
  .consult-composer{
    background:var(--card); border-radius:var(--r-xl); box-shadow:var(--shadow-depth);
    padding:var(--sp-4) var(--sp-4) var(--sp-3); margin:0 var(--sp-5) var(--sp-4); flex-shrink:0;
  }
  .consult-composer textarea{
    width:100%; min-height:72px; resize:vertical; background:transparent; border:none;
    padding:var(--sp-2) var(--sp-2) var(--sp-4); font-family:inherit; font-size:var(--fs-base); color:var(--ink);
    outline:none;
  }
  .consult-composer-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
  .consult-detail{width:380px; flex-shrink:0; background:var(--surface); overflow-y:auto}
  .consult-detail-header{
    display:flex; align-items:center; gap:12px; padding:var(--sp-5);
    position:sticky; top:0; z-index:2; background:var(--surface); border-bottom:1px solid var(--border);
  }
  .consult-detail-header .avatar{width:52px; height:52px; font-size:var(--fs-base); flex-shrink:0}
  .consult-detail-header .nm{font-weight:700; font-size:var(--fs-base); color:var(--ink)}
  .consult-detail-header .sub{font-size:var(--fs-xs); color:var(--muted-2); margin-top:2px}
  .consult-detail-body{padding:var(--sp-5)}
  .consult-detail-body .md-metric-row{grid-template-columns:repeat(4,1fr)}
  .consult-detail-section{margin-bottom:var(--sp-5)}
  .consult-detail-section h4{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); font-weight:700; margin-bottom:var(--sp-3)}
  .consult-detail-row{display:flex; justify-content:space-between; font-size:var(--fs-sm); padding:5px 0; color:var(--ink)}
  .consult-detail-row span:first-child{color:var(--muted)}
  .consult-tags{display:flex; flex-wrap:wrap; gap:6px}

  .dx-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; justify-content:center}
  .dx-chip{display:inline-flex; align-items:center; gap:6px; background:var(--brand-tint); color:var(--brand); font-size:var(--fs-xs); font-weight:700; padding:5px 6px 5px 10px; border-radius:var(--r-sm)}
  .dx-chip button{background:none; border:none; color:var(--brand); cursor:pointer; display:flex; padding:2px}
  .dx-overlay-content{width:100%; max-width:480px; padding:0 var(--sp-4)}
  .dx-overlay-content h3{color:#fff; text-align:center; margin-bottom:2px; font-size:var(--fs-lg)}
  .dx-overlay-content .sub{color:rgba(255,255,255,.6); text-align:center; font-size:var(--fs-sm); margin-bottom:var(--sp-5)}
  .dx-overlay-close{
    display:block; margin:var(--sp-5) auto 0; color:#fff; background:rgba(255,255,255,.14); border:none;
    padding:9px 22px; border-radius:var(--r-md); cursor:pointer; font-family:inherit; font-weight:600; font-size:var(--fs-sm);
  }
  .dx-overlay-close:hover{background:rgba(255,255,255,.22)}
  .consult-attach-chips{display:flex; flex-wrap:wrap; gap:6px; padding:0 var(--sp-5)}
  .attach-chip{
    display:inline-flex; align-items:center; gap:6px; background:var(--card-2); padding:6px 10px;
    border-radius:var(--r-sm); font-size:var(--fs-xs); color:var(--ink);
  }
  .attach-chip button{background:none; border:none; color:var(--muted-2); cursor:pointer; display:flex; padding:0}
  .consult-doc-card{
    align-self:flex-start; max-width:78%; background:var(--card); box-shadow:var(--shadow-depth);
    border-radius:var(--r-lg); border-bottom-left-radius:4px; padding:12px 14px; font-size:var(--fs-sm); color:var(--ink);
  }
  .consult-doc-card h5{margin:0 0 8px; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); display:flex; align-items:center; gap:6px; font-weight:700}
  .consult-doc-card ul{margin:0; padding-left:18px}
  .consult-doc-card li{margin-bottom:3px}
  .consult-doc-card .doc-notes{margin-top:8px; color:var(--muted); font-size:var(--fs-xs)}

  .rx-row{display:flex; align-items:center; gap:8px; margin-bottom:8px}
  .rx-row input{
    flex:1; background:var(--card-2); border:1px solid transparent; border-radius:var(--r-md);
    padding:10px 12px; font-family:inherit; font-size:var(--fs-sm); color:var(--ink); outline:none;
  }
  .rx-row input:focus{background:var(--card); border-color:var(--border-strong); box-shadow:0 0 0 4px var(--brand-tint)}
  .rx-row .rx-remove{
    width:32px; height:32px; flex-shrink:0; border-radius:var(--r-sm); border:none; background:var(--card-2);
    color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .lab-test-item{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:var(--fs-sm)}
  .lab-test-item:last-child{border-bottom:none}
  .lab-test-item input{width:16px; height:16px; accent-color:var(--brand); cursor:pointer}


  /* ======================================================
     CONTEXT MENU (clic derecho)
     ====================================================== */
  .ctx-target-area{
    display:flex; align-items:center; justify-content:center; height:180px;
    border:1.5px dashed var(--border-strong); border-radius:var(--r-lg);
    color:var(--muted-2); font-size:var(--fs-sm); background:var(--surface); user-select:none;
  }
  .context-menu{
    position:fixed; z-index:300; display:none; min-width:210px;
    background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); padding:6px;
  }
  .context-menu.open{display:block}
  .context-menu-item{
    display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-md);
    font-size:var(--fs-sm); color:var(--ink); cursor:pointer; white-space:nowrap; font-weight:500;
  }
  .context-menu-item:hover{background:var(--card-2)}
  .context-menu-item .icon{color:var(--muted); width:16px; height:16px; flex-shrink:0}
  .context-menu-item .shortcut{margin-left:auto; padding-left:16px; font-size:var(--fs-xs); color:var(--muted-2); font-family:var(--mono)}
  .context-menu-item.danger{color:var(--danger)}
  .context-menu-item.danger .icon{color:var(--danger)}
  .context-menu-sep{height:1px; background:var(--border); margin:6px 4px}