:root{
    /* identidad */
    --navy:#0B1F3A; --petrol:#123B5D; --turq:#18B7B2; --turq-d:#139a96; --celeste:#DDF4F3;
    /* neutrales (LIGHT por defecto) */
    --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF; --border:#D9E1E8; --hover:#F4F6F9;
    --text:#1D2939; --text-2:#667085; --white:#FFFFFF;
    /* funcionales */
    --success:#2E8B57; --warning:#D99A21; --error:#C94A4A; --info:#3B82C4;
    --success-bg:#e8f3ec; --warning-bg:#faf1de; --error-bg:#f7e9e9; --info-bg:#e7f0f9;
    --ring:rgba(24,183,178,.35);
    --shadow:0 1px 2px rgba(11,31,58,.06), 0 8px 24px rgba(11,31,58,.08);
    --shadow-sm:0 1px 2px rgba(11,31,58,.07);
    /* Dos nombres que el codigo ya usaba y que nunca estuvieron definidos: --line en
       11 lugares (los bordes de Facturas y de Resumen de cuenta, que por eso nunca se
       pintaron — de ahi el !important de .fac-cli, que tampoco podia servir) y --card
       en .res-hero-card, con un #fff de respaldo que le dejaba la tarjeta BLANCA en
       modo oscuro. Se definen como lo que siempre quisieron decir, asi cambian solas
       con el tema. */
    --line:var(--border); --card:var(--surface);
    /* El color funcional puesto SOBRE su propio fondo tenue. Solo no alcanza: el
       ambar sobre el ambar claro da 2,18 y esos textos son de 10-11px, o sea lo
       mas chico de la app. Mezclado con --text se acomoda a los dos temas sin
       escribir un color nuevo: en claro oscurece, en oscuro aclara. */
    --success-fg:color-mix(in srgb,var(--success) 62%,var(--text));
    --warning-fg:color-mix(in srgb,var(--warning) 55%,var(--text));
    --error-fg:color-mix(in srgb,var(--error) 67%,var(--text));
    --turq-fg:color-mix(in srgb,var(--turq) 55%,var(--text));
    /* Otros ocho nombres en la misma situacion, 17 usos entre todos. Los que traian
       color de respaldo disimulaban (el gris de Facturas era un negro translucido,
       que sobre fondo oscuro no se ve); los que no lo traian directamente no hacian
       nada — el link de subir en Configuracion nunca fue turquesa, y el borde de las
       tarjetas del reporte no cambiaba al pasar por encima. */
    --primary:var(--turq); --primary-soft:var(--celeste); --accent:var(--turq); --brand:var(--turq);
    --soft:var(--hover); --surface-1:var(--surface); --text-1:var(--text); --text-3:var(--text-2);
    --sidebar-w:224px;
    --sidebar-wc:66px;
  }
  /* Tema oscuro: la paleta de WhatsApp oscuro, la misma que usa Gauss.
     Los tres fondos son los suyos (el del chat, el del panel y el de los globos), y el
     turquesa de la marca queda igual: sobre este fondo da 7,49 de contraste contra 7,40
     sobre el navy anterior, asi que la identidad no pierde nada.
     Lo unico que NO se copia literal es el texto secundario. WhatsApp usa #8696a0 para
     la hora de los mensajes —texto terciario— y con eso el secundario de NS caia a 4,68
     de contraste, peor que el 5,87 que tenia. Va #aebac1, el secundario legible de
     WhatsApp: deja el peor caso en 7,21. */
  [data-theme="dark"]{
    --bg:#0b141a;                 /* el fondo del chat */
    --surface:#111b21;            /* el panel lateral */
    --surface-2:#202c33;          /* lo que va encima: tarjetas, globos, menues */
    --border:#2a3942;             /* el divisor entre chats */
    --hover:#202c33;
    --text:#e9edef; --text-2:#aebac1; --white:#FFFFFF;
    --celeste:#143a38;            /* el celeste de los chips, en version oscura */
    /* Los colores funcionales, aclarados. Son los del tema claro y de noche quedaban en
       3,1 a 3,5 de contraste sobre las tarjetas: se usan casi siempre como TEXTO (el
       verde de "Activo", el rojo de los errores, el asterisco de los campos), 118 veces
       entre los cuatro, contra 6 veces como fondo. El ambar NO se toca: el D99A21 ya da
       5,85 sobre las tarjetas y aclararlo mas lo volvia amarillo fosforescente. */
    --success:#3fae6f; --error:#ef8080; --info:#5b9fdb;
    --success-bg:#0f2a1e; --warning-bg:#2a2211; --error-bg:#2a1616; --info-bg:#12262f;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  }
  *{box-sizing:border-box}
  /* Scrollbar celeste/turquesa en TODA la app, sin excepción - antes solo
     .nav y .ini-feed la tenían y el resto (tablas, modales, listas largas)
     quedaba con la barra gris nativa del navegador, que no combinaba. Va acá
     con "*" en vez de listar cada elemento con scroll uno por uno (son
     decenas) - así ningún elemento nuevo queda afuera por olvido. Un
     selector más específico (como .nav, que usa un track navy en vez de
     transparente) sigue ganando por especificidad si hace falta un track
     distinto en algún caso puntual. */
  *{scrollbar-width:thin;scrollbar-color:var(--turq) transparent}
  *::-webkit-scrollbar{width:8px;height:8px}
  *::-webkit-scrollbar-track{background:transparent}
  *::-webkit-scrollbar-thumb{background:var(--turq);border-radius:999px}
  *::-webkit-scrollbar-thumb:hover{background:var(--turq-d)}
  html,body{margin:0}
  /* Cursor celeste/turquesa de marca en vez de la flecha gris del sistema -
     pedido puntual (a alguien le gustó el cursor que se ve en las capturas
     automatizadas y quiso ese color en la web real). Va en <html> (no en *)
     para que sea el "de fondo" y cualquier cursor más específico de abajo
     (pointer en botones/links, text en inputs, grab en el drag&drop de
     clientes, not-allowed en disabled) lo pise sin tener que tocar nada acá:
     una regla que matchea directo al elemento siempre gana sobre uno heredado,
     sea cual sea el orden en el archivo. */
  html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 2 L3 19.5 L7.6 15.6 L10.7 22.5 L13.6 21.2 L10.6 14.5 L17 14.5 Z' fill='%2318B7B2' stroke='white' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto}
  body{background:var(--bg);color:var(--text);
    font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;
    font-size:14px;line-height:1.5;}
  button{font:inherit;cursor:pointer}
  a{color:inherit;text-decoration:none}
  /* Elementos nativos que hoy dependen del cursor por default del navegador
     (pointer/text) - sin esto, el cursor celeste de arriba (heredado) se les
     pegaría encima y perderían la pista visual de "esto se clickea"/"esto se
     escribe". Todo lo que YA tiene su propio cursor (botones de arriba,
     .client-nav-item[draggable] con grab, los charts .cursor-pointer, etc.)
     sigue intacto: esto solo cubre lo que faltaba. */
  a,select,summary,label,
  input[type="checkbox"],input[type="radio"],input[type="submit"],input[type="button"],
  [role="button"],[onclick]{cursor:pointer}
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
  textarea,[contenteditable="true"]{cursor:text}
  .tnum{font-variant-numeric:tabular-nums}

  /* ============ LOGO ============ */
  .brand{display:flex;flex-direction:column;gap:0;user-select:none}
  .mark{display:flex;align-items:center;gap:1px;font-weight:800;font-size:38px;letter-spacing:-.02em;line-height:1;color:#fff}
  .mark .cross{width:27px;height:27px;background:var(--turq);border-radius:6px;display:grid;place-items:center;margin:0 1px;transform:translateY(5px)}
  .mark .cross svg{width:17px;height:17px;display:block}
  .brand .divider{height:2px;background:var(--turq);border-radius:2px;margin:11px 0 7px;opacity:.9}
  .brand .tag{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#dcf1f0;font-weight:600;white-space:nowrap}
  .brand.sm .mark{font-size:33px}
  .brand.sm .mark .cross{width:24px;height:24px;transform:translateY(4px)}
  .brand.sm .tag{font-size:9.5px;letter-spacing:.11em}
  .logo-login{display:block;width:220px;height:auto}
  .logo-side{display:block;width:112px;height:auto;margin:1px auto 2px}

  /* ============ LOGIN ============ */
  .login{position:fixed;inset:0;display:grid;place-items:center;padding:24px;
    background:radial-gradient(1200px 600px at 70% -10%, #14335a 0%, var(--navy) 55%);z-index:50}
  .login-wrap{display:flex;flex-direction:column;align-items:center;gap:26px;width:100%;max-width:390px}
  .login-card{width:100%;max-width:390px;background:var(--surface);border:1px solid var(--border);border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.35);padding:30px 30px 26px}
  .login .brand{align-items:center;margin-bottom:22px}
  .login .brand .mark{color:var(--navy)}
  [data-theme="dark"] .login .brand .mark{color:#fff}
  .login .brand .tag{color:var(--text-2)}
  .login h1{font-size:18px;margin:0 0 3px;text-align:center}
  .login .sub{font-size:12.5px;color:var(--text-2);text-align:center;margin:0 0 22px}
  .change{position:fixed;inset:0;display:none;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 70% -10%, #14335a 0%, var(--navy) 55%);z-index:55}
  .ch-title{font-size:18px;margin:0 0 4px;text-align:center;color:var(--text)}
  .ch-sub{font-size:12.5px;color:var(--text-2);text-align:center;margin:0 0 20px}
  .msg{font-size:12.5px;margin:0 0 10px;line-height:1.4}
  .msg:empty{display:none}
  .msg.err{color:var(--error)}
  .msg.ok{color:var(--success)}
  .lc-notice{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 8px 24px rgba(15,23,42,.06);font-size:13px;line-height:1.35}
  .lc-notice b{display:block;color:var(--text);margin-bottom:2px}
  .lc-notice span{color:var(--text-2)}
  .lc-notice.ok{border-color:#bbf7d0;background:#f0fdf4}
  .lc-notice.err{border-color:#fecaca;background:#fff7f7}
  .lc-notice.warn{border-color:#fde68a;background:#fffbeb}
  .lc-notice.info{border-color:#bae6fd;background:#f0f9ff}
  [data-theme="dark"] .lc-notice{background:rgba(11,20,26,.78)}
  [data-theme="dark"] .lc-notice.ok{background:rgba(20,83,45,.22)}
  [data-theme="dark"] .lc-notice.err{background:rgba(127,29,29,.22)}
  [data-theme="dark"] .lc-notice.warn{background:rgba(113,63,18,.24)}
  [data-theme="dark"] .lc-notice.info{background:rgba(12,74,110,.22)}
  .chk.sm{font-size:12.5px;gap:7px;color:var(--text-2);margin-top:0}
  .chk.sm input{width:15px;height:15px}
  .reset{position:fixed;inset:0;display:none;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 70% -10%, #14335a 0%, var(--navy) 55%);z-index:55}
  body.booting .login, body.booting .app, body.booting .change, body.booting .reset{display:none !important}
  body.mustchange .login, body.mustchange .app, body.mustchange .reset{display:none !important}
  body.mustchange .change{display:grid}
  body.resetting .login, body.resetting .app, body.resetting .change{display:none !important}
  body.resetting .reset{display:grid}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:11.5px;font-weight:600;color:var(--text-2);margin-bottom:6px;letter-spacing:.02em}
  .inp{width:100%;height:42px;padding:0 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);font-size:14px;outline:none}
  .inp:focus{border-color:var(--turq);box-shadow:0 0 0 3px var(--ring)}
  /* Recorriendo con Tab no se veia donde estaba parado el foco en NINGUN boton ni
     link: de toda la app solo tres elementos sueltos lo mostraban. Es lo primero que
     se nota cuando alguien prueba el sistema con el teclado, y encima es accesibilidad
     basica. Va con :focus-visible, asi el anillo aparece solo cuando se llego con el
     teclado y nunca al hacer clic con el mouse. */
  button:focus-visible,a:focus-visible,summary:focus-visible,[role="button"]:focus-visible{
    outline:2px solid var(--turq);outline-offset:2px;border-radius:8px}
  .pwd-wrap{position:relative}
  .pwd-wrap .inp{padding-right:44px}
  .pwd-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--text-2);width:34px;height:34px;display:grid;place-items:center;border-radius:8px;cursor:pointer}
  .pwd-eye:hover{color:var(--turq)}
  .pwd-eye svg{width:19px;height:19px}
  .btn{height:42px;border:0;border-radius:10px;font-weight:700;font-size:14px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:filter .15s,background .15s}
  /* El icono del boton: mismo trazo que el del menu y atado al color del texto, asi
     acompana al boton en cualquier estado (primario, fantasma, apagado) sin que haya
     que acordarse de pintarlo. El gap de arriba ya lo separa del texto. */
  .btn svg{width:16px;height:16px;flex:0 0 auto}
  .btn-sm svg{width:15px;height:15px}
  .btn:hover{filter:brightness(1.05)}
  .btn-primary{background:var(--turq);color:#04302f}
  .btn-navy{background:var(--navy);color:#fff}
  .btn-block{width:100%}
  .btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
  .login .row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-2);margin:2px 0 18px}
  .login .row a{color:var(--turq);font-weight:600}
  .login .foot{text-align:center;font-size:11px;color:var(--text-2);margin-top:18px}

  /* ============ APP SHELL ============ */
  .app{display:none;min-height:100vh}
  body.authed .app{display:block}
  body.authed .login{display:none}

  .sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);background:var(--navy);
    display:flex;flex-direction:column;padding:16px 12px;z-index:40;transition:transform .22s ease}
  .sidebar .brand{padding:4px 8px 9px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
  /* min-height:0 es necesario para que el nav realmente scrollee dentro de su
     espacio flex en vez de crecer más allá de la pantalla (el default de un
     flex item es min-height:auto = "al menos lo que ocupa el contenido", lo
     que ignora el overflow-y de acá abajo). Sin esto, con todas las secciones
     desplegadas (Consultorios + Med. Cabecera + Potenciales) el menú entero
     terminaba más alto que el viewport y "Potenciales clientes" quedaba
     inalcanzable debajo del pie de usuario, sobre todo en pantallas bajas
     (1366x768). */
  .nav{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
  /* Los hijos directos del nav (links, el grupo Administración, el label
     "clientes" y el bloque con Consultorios/Med. Cabecera/Potenciales) no se
     tienen que achicar: si no entran todos, que scrollee el .nav de arriba
     (ya tiene overflow-y:auto), no que el navegador los comprima a la fuerza
     hasta que "quepan" — eso era lo que dejaba "Potenciales clientes" y
     "+ Nuevo cliente" recortados e inalcanzables al desplegar todo. */
  .nav>*{flex-shrink:0}
  /* Barra de scroll del menú con los colores de la marca (navy + celeste/turquesa)
     en vez de la gris del navegador, que quedaba pegada de otra web. */
  .nav{scrollbar-width:thin;scrollbar-color:var(--turq) var(--navy)}
  .nav::-webkit-scrollbar{width:8px}
  .nav::-webkit-scrollbar-track{background:var(--navy)}
  .nav::-webkit-scrollbar-thumb{background:var(--turq);border-radius:999px}
  .nav::-webkit-scrollbar-thumb:hover{background:var(--turq-d)}
  .nav .lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5f7893;padding:14px 12px 6px;font-weight:700}
  .nav a,.nav-parent{display:flex;align-items:center;gap:11px;width:100%;padding:6px 12px;border:0;border-radius:9px;background:transparent;color:#c4d2e2;font-size:13.5px;font-weight:500;text-align:left}
  .nav a svg,.nav-parent svg{width:18px;height:18px;flex:0 0 auto;opacity:.85}
  .nav a:hover,.nav-parent:hover{background:rgba(255,255,255,.06);color:#fff}
  .nav a.active,.nav-parent.active{background:var(--petrol);color:#fff}
  .nav a.active svg,.nav-parent.active svg{opacity:1;color:var(--turq)}
  .nav a .chip{margin-left:auto;background:var(--turq);color:#04302f;font-size:10px;font-weight:800;padding:1px 7px;border-radius:999px}
  .nav-group{display:grid;gap:2px}
  .nav-group.active .nav-parent{background:var(--petrol);color:#fff}
  .nav-group.active .nav-parent svg{opacity:1;color:var(--turq)}
  .nav-parent span{min-width:0;flex:1}
  .nav-caret{margin-left:auto;transition:transform .15s ease}
  .nav-group.open .nav-caret{transform:rotate(180deg)}
  .nav-sub{display:none;margin:0 0 2px 29px;padding-left:9px;border-left:1px solid rgba(255,255,255,.12)}
  /* El menu de noche. Era navy en los DOS temas, asi que con la paleta de WhatsApp
     quedaba una franja azul pegada al costado de una app verde-grisacea. Pasa al panel
     lateral de WhatsApp, y el renglon abierto al gris del chat seleccionado.
     Los rotulos de seccion tambien: el #5c7189 sobre el navy daba 3,29 de contraste y
     "Potenciales clientes" sobre el petrol 2,31 — los dos peores avisos que quedaban
     despues de todo el repaso, y los dos estaban aca. Con el panel nuevo y el gris de
     WhatsApp, el menu entero queda sin un solo texto por debajo de 4,5 (el peor, 5,72).
     El navy sigue siendo de la marca donde corresponde: la pantalla de ingreso, el
     banner y los avatares no se tocan. */
  [data-theme="dark"] .sidebar{background:var(--surface)}
  [data-theme="dark"] .nav{scrollbar-color:var(--turq) var(--surface)}
  [data-theme="dark"] .nav::-webkit-scrollbar-track{background:var(--surface)}
  [data-theme="dark"] .nav a.active,
  [data-theme="dark"] .nav-parent.active,
  [data-theme="dark"] .nav-group.active .nav-parent,
  [data-theme="dark"] .side-config a.active{background:#2a3942}
  [data-theme="dark"] .nav-group.rotulo .nav-parent,
  [data-theme="dark"] .nav-section,
  [data-theme="dark"] .nav-section-chevron,
  [data-theme="dark"] .nav .lbl{color:#8696a0}
  /* Grupos del menú en modo rótulo (Administración y los de clientes): se leen
     como el título "herramientas" — chiquito, en mayúsculas y sin la caja — para
     que el menú no sea una pila de botones grandes. El ícono a ese tamaño sobra. */
  .nav-group.rotulo .nav-parent{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8299b3;padding:7px 12px 3px;gap:6px}
  .nav-group.rotulo .nav-parent:hover{background:transparent;color:#8299b3}
  .nav-group.rotulo .nav-parent>svg:first-child{display:none}
  .nav-group.rotulo .nav-parent .nav-caret{width:12px;height:12px;opacity:.75}
  .nav-group.rotulo.active>.nav-parent{background:transparent;color:#8299b3}
  .nav-group.rotulo.active>.nav-parent svg{color:inherit}
  .nav-group.rotulo .nav-sub{margin-left:12px}
  /* El rótulo de "potenciales clientes" comparte renglón con el "+" de crear uno
     nuevo: antes era un botón grande punteado abajo de todo, ocupando una fila
     entera para algo que se usa cada tanto. */
  .nav-rotulo-row{display:flex;align-items:center;gap:2px}
  .nav-rotulo-row>.nav-parent{flex:1;min-width:0}
  .nav-rotulo-accion{display:none;align-items:center;justify-content:center;width:22px;height:22px;margin-right:10px;border:1px solid rgba(24,183,178,.45);border-radius:7px;background:rgba(24,183,178,.10);color:#8df0ed;font-size:14px;font-weight:800;line-height:1;cursor:pointer;flex:0 0 auto}
  .nav-rotulo-accion.is-admin{display:flex}
  .nav-rotulo-accion:hover{background:rgba(24,183,178,.22);border-color:#18B7B2;color:#fff}
  body.sidebar-collapsed .nav-rotulo-accion{display:none}
  body.sidebar-collapsed .nav-group.rotulo .nav-parent{display:none}
  .nav-group.open .nav-sub{display:grid;gap:2px}
  .client-new-btn{display:none;align-items:center;justify-content:center;margin:6px 0 2px 38px;width:calc(100% - 38px);height:34px;border:1px dashed rgba(24,183,178,.55);border-radius:9px;background:rgba(24,183,178,.08);color:#8df0ed;font-weight:800;font-size:12px;cursor:pointer}
  .client-new-btn.is-admin{display:flex}
  .client-new-btn:hover{background:rgba(24,183,178,.15);border-color:#18B7B2;color:#fff}
  .nav-section{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#5c7189;padding:6px 12px 2px}
  /* Sección colapsable del menú (como B2B/Ecom en Gauss): el encabezado abre/cierra
     todo su bloque. En modo icon-only (sidebar-collapsed) no colapsa. */
  .nav-section-collapsible{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:6px;user-select:none;transition:color .15s}
  .nav-section-collapsible:hover{color:#8299b3}
  .nav-section-chevron{font-size:9px;color:#5c7189;transition:transform .18s ease;line-height:1}
  .nav-section-collapsible.collapsed .nav-section-chevron{transform:rotate(-90deg)}
  .nav-section-items{overflow:hidden;max-height:3000px;transition:max-height .22s ease}
  .nav-section-items.collapsed{max-height:0}
  /* Los grupos de clientes ya no cuelgan de un rótulo "clientes": van sueltos
     (Consultorios / Med. Cabecera / Potenciales), cada uno con su desplegable.
     Sin el rótulo arriba necesitan su propio aire para no pegarse a la última
     herramienta. */
  .nav-section-items[data-section-items="clientes"]{margin-top:10px}
  /* Administración NO es una herramienta: va fuera de ese bloque, pero pegada
     abajo se leía como la octava de la lista. Una línea la separa. */
  #navGroupPagos{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08)}
  body.sidebar-collapsed #navGroupPagos{margin-top:8px;padding-top:8px}
  body.sidebar-collapsed .nav-section-chevron{display:none}
  body.sidebar-collapsed .nav-section-items{max-height:none !important}
  .client-nav-item{display:block;text-decoration:none;border:0;background:transparent;color:#9db2c8;border-radius:8px;padding:4px 10px;text-align:left;font-size:12.5px;font-weight:600;cursor:pointer}
  .client-nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
  .client-nav-item.active{background:rgba(24,183,178,.14);color:#dff8f7}
  .client-nav-item[draggable="true"]{cursor:grab}
  .client-nav-item[draggable="true"]:active{cursor:grabbing}
  /* Sección de menú resaltada mientras se arrastra un cliente encima (admin) */
  .nav-sub.drop-target{outline:1.5px dashed var(--turq,#18b7b2);outline-offset:2px;border-radius:8px;background:rgba(24,183,178,.08)}
  .side-user{display:flex;align-items:center;gap:7px;padding:3px 8px;border-radius:8px;background:rgba(255,255,255,.05);margin-top:2px}
  .side-user .avatar{width:22px;height:22px;font-size:10px}
  .avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--turq),#0f7f7c);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex:0 0 auto}
  .side-user .who{min-width:0}
  .side-user .who .nm{color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .side-user .who .rl{color:#8fa6bd;font-size:9px;line-height:1.1}
  .side-config{display:flex;flex-direction:column;gap:0;margin-top:1px;padding-top:1px;border-top:1px solid rgba(255,255,255,.08)}
  .side-config a{display:flex;align-items:center;gap:7px;padding:2px 10px;border-radius:6px;color:#9db2c8;font-size:11px;font-weight:500;cursor:pointer}
  .side-config a svg{width:13px;height:13px;flex:0 0 auto;opacity:.8}
  .side-config a:hover{background:rgba(255,255,255,.06);color:#fff}
  .side-config a.active{background:var(--petrol);color:#fff}
  .side-config a.active svg{color:var(--turq);opacity:1}
  .side-config a .chip{margin-left:auto;background:var(--turq);color:#04302f;font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:999px}
  .side-config a.logout{color:#d99a9a}
  .side-config a.logout:hover{background:rgba(201,74,74,.16);color:#f0b6b6}

  .main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;transition:margin-left .18s ease}
  .sidebar{transition:width .18s ease;overflow-x:hidden}
  /* --- Menú colapsable (desktop, solo íconos) --- */
  .side-collapse{position:absolute;top:14px;right:8px;width:24px;height:24px;border:0;border-radius:7px;background:rgba(255,255,255,.1);color:#c4d2e2;cursor:pointer;display:grid;place-items:center;font-size:16px;line-height:1;padding:0;z-index:3}
  .side-collapse:hover{background:rgba(255,255,255,.22);color:#fff}
  body.sidebar-collapsed .sidebar{width:var(--sidebar-wc)}
  body.sidebar-collapsed .main{margin-left:var(--sidebar-wc)}
  /* Laboratorio: menú mínimo — logo + Inicio (primer item del nav) + pie del sidebar.
     Se esconde el resto del nav para tener el espacio limpio del sistema paralelo. */
  /* En el sistema de turnos, la barra azul muestra SU menu: se esconde el de NS
     (menos Inicio, que es la puerta de vuelta) y se muestran los del modulo. */
  /* Se esconde TODO lo de NS, no solo lo marcado como ns-only: varios bloques del
     menu (Administracion, por ejemplo) no llevan esa clase y quedaban colados
     entre los modulos del sistema de turnos. */
  /* En el sistema de turnos la barra es TODA suya, incluido su propio "Inicio":
     el de NS llevaba de vuelta al otro sistema sin querer. La puerta de vuelta
     es el lapiz de la barra de arriba. */
  body.lab-mode .nav > *:not(.lab-only){display:none}
  .nav > .lab-only{display:none}
  body.lab-mode .nav > a.lab-only{display:flex}
  body.lab-mode .nav > div.lab-only{display:block}
  body.sidebar-collapsed .sidebar .brand{padding:6px 6px 14px}
  body.sidebar-collapsed .logo-side{width:42px}
  body.sidebar-collapsed .side-collapse{right:0;left:0;margin:0 auto}
  body.sidebar-collapsed .nav a,
  body.sidebar-collapsed .nav-parent,
  body.sidebar-collapsed .side-config a{justify-content:center;gap:0;padding-left:0;padding-right:0;font-size:0}
  body.sidebar-collapsed .nav a svg,
  body.sidebar-collapsed .nav-parent svg,
  body.sidebar-collapsed .side-config a svg{opacity:.9}
  body.sidebar-collapsed .nav-parent span,
  body.sidebar-collapsed .nav-caret,
  body.sidebar-collapsed .nav-sub,
  body.sidebar-collapsed .nav-section,
  body.sidebar-collapsed .client-new-btn,
  body.sidebar-collapsed .nav a .chip,
  body.sidebar-collapsed .side-config a .chip,
  body.sidebar-collapsed .side-user .who{display:none}
  body.sidebar-collapsed .side-user{justify-content:center;padding:8px}
  /* --- Menú de cuenta que cuelga del avatar (arriba a la derecha) --- */
  .avatar-wrap{position:relative;flex:0 0 auto}
  button.avatar{border:0;cursor:pointer;font-family:inherit}
  button.avatar:hover{filter:brightness(1.08)}
  .avatar-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:212px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(11,31,58,.18);padding:6px;z-index:60}
  [data-theme="dark"] .avatar-menu{box-shadow:0 12px 32px rgba(0,0,0,.5)}
  .avatar-menu-head{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:6px}
  .avatar-menu-head .nm{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .avatar-menu-head .rl{font-size:11px;color:var(--text-2);margin-top:1px}
  .avatar-menu a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
  .avatar-menu a svg{width:16px;height:16px;flex:0 0 auto;opacity:.7}
  .avatar-menu a:hover{background:var(--hover)}
  .avatar-menu a.logout{color:var(--error)}
  .avatar-menu a.logout:hover{background:var(--error-bg)}
  /* Atajos de la barra: iconos sueltos a las pantallas de todos los dias. */
  .atajos{display:flex;align-items:center;gap:4px;margin-right:6px}
  .atajos .atajo{width:34px;height:34px;border-radius:9px;border:1px solid transparent;
    background:transparent;color:var(--text-2);display:grid;place-items:center;cursor:pointer;
    font-size:13px;font-weight:800;transition:background .15s,color .15s}
  .atajos .atajo svg{width:18px;height:18px}
  .atajos .atajo:hover{background:var(--hover);color:var(--turq)}
  .atajos .atajo-mas{font-size:17px;color:var(--text-2);opacity:.75}
  .atajos .atajo-mas:hover{opacity:1}
  .atajos-panel{position:fixed;z-index:120;width:266px;max-height:60vh;overflow:auto;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    box-shadow:var(--shadow);padding:10px 0}
  .atajos-panel-cab{padding:2px 13px 4px;font-weight:800;font-size:13px;color:var(--text)}
  .atajos-panel-nota{padding:0 13px 8px;font-size:11.5px;color:var(--text-2);line-height:1.45}
  .atajos-panel-lista{display:flex;flex-direction:column}
  .atajos-opcion{display:flex;align-items:center;gap:9px;padding:6px 13px;cursor:pointer;font-size:13px;color:var(--text)}
  .atajos-opcion:hover{background:var(--hover)}
  .atajos-opcion input{accent-color:var(--turq);flex:0 0 auto}
  /* En el celular no van: la barra tiene lugar para el titulo y dos botones, y el menu
     esta a un toque de las rayas. El ancho cubre tambien las ventanas angostas. */
  @media(max-width:860px){ .atajos{display:none} }
  .topbar{height:60px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:30}
  .hamb{display:none;background:transparent;border:0;color:var(--text);padding:6px}
  .topbar h2{font-size:16px;margin:0;font-weight:700}
  /* El título/saludo nunca parte en dos líneas ni empuja los íconos: una sola
     línea, y si no entra, se recorta con puntos suspensivos. */
  #pageTitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .top-client-meta{display:none;align-items:center;gap:12px;min-width:0}
  .topbar.client-mode #pageTitle{display:none}
  .topbar.client-mode .top-client-meta{display:flex}
  .top-client-meta h2{font-size:17px;line-height:1.15;margin:0}
  /* min-width:0 en el bloque de texto: sin esto un ítem flex no se achica más que su
     contenido, el ellipsis del crumb nunca aplica y el texto se mete abajo de los
     botones de la derecha (se veía en celular). */
  .top-client-meta > div{min-width:0}
  .top-client-meta h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-client-meta .crumb{margin:0 0 2px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .sp{flex:1}
  /* Los botones de la derecha nunca se achican ni se deforman. */
  .topbar .icon-btn,.topbar .avatar{flex:0 0 auto}
  .icon-btn{position:relative;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);display:grid;place-items:center}
  .icon-btn:hover{border-color:var(--turq)}
  .icon-btn svg{width:18px;height:18px}
  .icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--error);border:2px solid var(--surface)}
  .icon-btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
  /* El aire de arriba y el de los costados, iguales y mas chicos: con el contenido
     plano, pegado al ancho de la pantalla, el margen grande sobraba. */
  .content{padding:14px 14px 30px;flex:1}
  body.client-view .content{padding-top:14px}
  /* Inicio: el saludo es el título de la barra (no hay bloque de saludo abajo),
     así que los paneles arrancan arriba con un poco de aire. */
  body.dash-view .content{padding-top:14px}
  body.dash-view .ini-grid,
  body.dash-view .op-grid{margin-top:0;gap:14px}
  .page-head{margin-bottom:18px}
  .page-head h1{font-size:20px;margin:0 0 3px}
  .page-head p{margin:0;color:var(--text-2);font-size:13px}

  /* cards / tiles */
  .grid{display:grid;gap:14px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  /* Las pantallas se leen como UNA hoja, no como un tablero de cajas (16/09/2026).
     El .card dejo de ser una caja: sin fondo propio, sin borde, sin sombra y sin
     recuadro. Lo unico que conserva es la separacion vertical, que es lo que de
     verdad hacia falta — el marco no agregaba informacion, repetia el limite que
     ya marca la pantalla.
     Las tarjetas de mes del dashboard de cliente (.mescurso-card) SI siguen siendo
     cajas, y a proposito: ahi cada recuadro es un mes distinto y el marco es lo
     que los separa. Tienen regla propia y no pasan por aca. */
  .card{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;margin-bottom:22px}
  .card:last-child{margin-bottom:0}
  /* Los titulos de seccion tenian cuatro medidas distintas para el mismo trabajo:
     16,38px los que nunca recibieron tamano y se quedaron con el del navegador
     (Afiliados, Cruzas), 15px en Generar OME y en Facturas, 14,5px en el dashboard
     del cliente. Eso es lo que hace que un sistema se vea armado de a pedazos. Una
     sola medida para todos. El h2 queda afuera: es el titulo de los paneles de
     Inicio y ahi el peso extra distingue el panel de lo que tiene adentro. */
  .content h3,.content h4{font-size:14.5px;font-weight:700}
  /* TODO icono suelto necesita medida. Un <svg> con viewBox y sin width/height se
     estira hasta llenar a su contenedor: al cambiar el emoji del titulo de
     "Credencial provisoria" por un icono, salio del tamano de media pantalla. Los
     que viven dentro de un boton, del menu o de un panel ya la tienen por su regla;
     esta cubre a los que quedan sueltos en un titulo o en una linea de texto. */
  .content h2 svg,.content h3 svg,.content h4 svg,.content b > svg,.content label svg{
    width:17px;height:17px;flex:0 0 auto;vertical-align:-3px}
  /* La red, para cualquier icono que no reciba medida de nadie. La primera version
     de esto solo cubria .content y por eso se colaron tres: el cartel de version
     nueva (se comia la barra entera), el aviso de modo espejo con un icono de
     152x152 y dos botones del modal de PDF. Los tres viven FUERA de .content.
     El :where() es lo que la hace segura: tiene especificidad CERO, asi que
     cualquier regla con clase (.btn svg, .nav a svg, .rowbtn svg) le gana. Y el
     :not([width]) deja en paz a los que traen la medida escrita en el HTML, que si
     no el CSS se las pisaria. Medido sobre los 666 iconos de una pantalla cargada:
     cambian los 3 rotos y ni uno de los que ya estaban bien. */
  svg:where(:not([width]):not([height])){width:16px;height:16px;flex:0 0 auto}
  /* El <b> que hace de titulo en las cabeceras es el mismo rol que un h3 y estaba
     medio punto mas chico, lo justo para que al ponerlos uno al lado del otro en
     Afiliados no terminaran de emparejar. */
  .nom-status b,.cab-head b{font-size:14.5px}
  .tile .k{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;gap:7px}
  .tile .k .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--celeste);color:var(--turq)}
  .tile .k .ic svg{width:15px;height:15px}
  .tile .v{font-size:26px;font-weight:750;margin-top:10px;letter-spacing:-.01em}
  .tile .m{font-size:12px;color:var(--text-2);margin-top:2px}
  .tile.ok .k .ic{background:var(--success-bg);color:var(--success)}
  .tile.warn .k .ic{background:var(--warning-bg);color:var(--warning-fg)}

  .banner{background:linear-gradient(100deg,var(--navy),var(--petrol));color:#fff;border-radius:14px;padding:20px 22px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow)}
  .banner .stage{background:var(--turq);color:#04302f;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;letter-spacing:.02em}
  .banner h3{margin:0 0 3px;font-size:17px}
  .banner p{margin:0;color:#c8d6e6;font-size:13px;max-width:640px}

  /* table */
  .toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
  .search{flex:1;min-width:180px;max-width:360px;position:relative}
  .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-2)}
  .search .inp{padding-left:34px;height:38px}
  /* La tabla tampoco es una caja: es la pantalla. Lo unico que sobrevive del marco es
     la linea de abajo de su cabecera (.table-head), que ahi si separa dos cosas
     distintas — los botones de arriba de las filas — en vez de repetir el borde. */
  .tablecard{background:transparent;border:0;border-radius:0;overflow:visible;box-shadow:none}
  .table-scroll{width:100%;overflow:auto}
  /* Los numeros de las tablas, siempre de ancho fijo. En Windows no cambia nada —
     los digitos de Segoe UI ya son de ancho fijo, medido: dos importes distintos de
     Facturas ocupan exactamente lo mismo—, pero system-ui en Mac y en iPhone resuelve
     a SF Pro, que los tiene proporcionales: ahi las columnas de importes se
     desalinean. Una linea y queda parejo en todos lados. */
  table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
  th{text-align:left;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);font-weight:700;padding:12px 16px;background:var(--hover);border-bottom:1px solid var(--border)}
  td{padding:12px 16px;border-top:1px solid var(--border);font-size:13.5px;vertical-align:middle}
  tbody tr:hover{background:var(--hover)}
  .u{display:flex;align-items:center;gap:10px}
  .u .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;flex:0 0 auto}
  .u .nm{font-weight:600}.u .em{font-size:12px;color:var(--text-2)}
  .role{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
  .role::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .role.admin{background:#e7eaf3;color:#3a3f8f}
  .role.oper{background:var(--celeste);color:#0f7f7c}
  .role.med{background:var(--info-bg);color:var(--info)}
  .role.clin{background:#efeafb;color:#7a4fd0}
  .role.demo{background:var(--hover);color:var(--text-2)}
  .role.colab{background:#f7ecdf;color:#9a5c26}
  [data-theme="dark"] .role.admin{background:#20264a}
  [data-theme="dark"] .role.clin{background:#251b3a}
  [data-theme="dark"] .role.colab{background:#33241a;color:#e0a76a}
  .st{font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:6px}
  .st.on{background:var(--success-bg);color:var(--success)}
  .st.off{background:var(--error-bg);color:var(--error)}
  .rowbtn{background:transparent;border:1px solid var(--border);border-radius:8px;padding:5px 8px;color:var(--text-2);
    display:inline-flex;align-items:center;justify-content:center;gap:6px}
  /* Los botones de las filas eran un emoji suelto y ahora son icono. Se centra el
     contenido y se le da medida al trazo: sin esto el dibujo sale del tamano de la
     letra, que en un boton chico queda enorme. */
  .rowbtn svg{width:15px;height:15px;flex:0 0 auto}
  .rowbtn:hover{border-color:var(--turq);color:var(--turq)}
  .rowbtn:hover{border-color:var(--turq);color:var(--turq)}
  .muted-row td{color:var(--text-2)}

  /* notifications drawer */
  .scrim{position:fixed;inset:0;background:rgba(11,31,58,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:44}
  .scrim.show{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:0;bottom:0;width:340px;max-width:88vw;background:var(--surface);border-left:1px solid var(--border);
    transform:translateX(100%);transition:transform .22s ease;z-index:45;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.2)}
  .drawer.show{transform:none}
  .drawer .dh{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)}
  .drawer .dh h3{margin:0;font-size:15px}
  .drawer .dh .x{margin-left:auto;background:transparent;border:0;color:var(--text-2);font-size:20px;line-height:1}
  .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-2);padding:30px;gap:12px}
  .empty .ico{width:56px;height:56px;border-radius:16px;background:var(--celeste);color:var(--turq);display:grid;place-items:center}
  .empty .ico svg{width:26px;height:26px}
  .empty b{color:var(--text);font-size:14px}
  .empty span{font-size:12.5px;max-width:220px}

  /* Drawer: contenedor de notificaciones + item de aviso de mensajes. */
  #drawerBody{flex:1;display:flex;flex-direction:column;overflow-y:auto}
  .drawer-item{display:flex;gap:12px;align-items:flex-start;padding:14px 15px;margin:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);cursor:pointer}
  .drawer-item:hover{background:var(--hover)}
  .drawer-item .di-ic{font-size:20px;line-height:1.1}
  .drawer-item .di-tx b{display:block;font-size:13.5px;color:var(--text)}
  .drawer-item .di-tx span{font-size:12px;color:var(--text-2)}
  /* Los avisos de la campana van apretados: son muchos y cortos, y con el alto de una
     tarjeta suelta entraban tres en la pantalla. */
  .drawer-item.compacto{padding:6px 10px;margin:5px 12px;border-radius:9px;gap:8px;align-items:center}
  .drawer-item.compacto .di-ic{font-size:15px;line-height:1.25}
  .drawer-item.compacto .di-tx b{font-size:12.5px;line-height:1.3}
  .drawer-item.compacto .di-tx span{font-size:11.5px;line-height:1.35}
  /* El titulo y la hora comparten renglon; abajo el detalle y el centro, en UNA linea:
     con un centro de nombre largo, sin esto la tarjeta se parte en dos y queda despareja. */
  .drawer-item.compacto .di-tx{flex:1;min-width:0}
  .drawer-item.compacto .di-tit{display:flex;align-items:baseline;gap:8px}
  .drawer-item.compacto .di-tit b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .drawer-item.compacto .di-hora{font-style:normal;font-size:11px;color:var(--text-2);white-space:nowrap;opacity:.8}
  .drawer-item.compacto .di-tx > span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ===== Inicio: mensajes internos + tareas compartidas + pendientes del
     operador + accesos rápidos - grid 2x2 fijo (antes eran 2 tarjetas de alto
     libre en una sola fila, que con muchos mensajes/tareas crecían sin límite
     y no dejaba lugar para las 2 tarjetas nuevas de abajo). */
  /* Chat a toda la columna izquierda; a la derecha se apilan Tareas + Pendientes +
     Accesos. IMPORTANTE: el chat NO debe estirarse a su propio contenido acá -
     probamos align-items:stretch + .ini-feed sin tope de alto para que
     coincidiera con la columna derecha, pero un grid con un item que abarca
     varias filas y no tiene alto fijo termina agrandando esas filas para
     entrar SU contenido (más mensajes = fila más alta = el feed crece de
     nuevo => crecimiento sin fin al escribir). El .ini-feed de abajo vuelve a
     tener un tope fijo en px con scroll interno - real, no infinito. */
  /* grid-auto-flow:dense + una altura de fila FIJA (no "auto"): el propio
     motor de grilla del navegador acomoda las tarjetas sin que se pisen ni
     dejen huecos, sin necesitar detección de colisiones a mano. Es clave que
     sea fija (no derivada del contenido) - así align-items:stretch es segura
     acá (no es lo mismo que el bug de crecimiento infinito de antes: ahí la
     fila se agrandaba CON el contenido y eso realimentaba el stretch; acá la
     fila mide siempre 210px, pase lo que pase adentro - el contenido que no
     entra scrollea, ver .ini-feed/.ini-tasks/.ini-pendop-list). Actividad de
     operadores es una tarjeta más de este mismo sistema (no un slot fijo
     aparte): cualquier elemento nuevo que se sume a Inicio entra así, con
     data-panel + un tamaño por defecto en iniPanelesTamDefault (app.js). */
  .ini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:210px;grid-auto-flow:row dense;align-items:stretch;gap:16px;margin-top:18px}
  /* El TAMAÑO de cada tarjeta es una de estas 4 clases - el usuario lo elige
     con el botón ⤢ del header (cicla s→m→w→l). El ORDEN es la posición real
     de la tarjeta en el DOM: iniPanelesAplicar() en app.js reordena los nodos
     según lo guardado y el auto-flow dense las va acomodando solo a partir de
     ahí (ver iniPanelesWireDrag para el arrastre). */
  .ini-size-s{grid-column:span 1;grid-row:span 1}
  .ini-size-m{grid-column:span 1;grid-row:span 2}
  .ini-size-w{grid-column:span 2;grid-row:span 1}
  .ini-size-l{grid-column:span 2;grid-row:span 2}
  /* En 3 columnas (desktop): Mensajes y Tareas ocupan 3 filas (bien altos) y
     así llenan sus columnas, empujando los 3 chicos (Pendientes, Actividad,
     Accesos) a la 3ra columna, apilados. */
  @media(min-width:1251px){
    .ini-grid > .ini-panel-msg,
    .ini-grid > .ini-panel-tareas{grid-row:span 3}
  }
  /* Pantallas medianas (laptops): 2 columnas para que no queden angostas. */
  @media(max-width:1250px){
    .ini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media(max-width:860px){
    .ini-grid{grid-template-columns:1fr}
    .ini-size-s,.ini-size-m,.ini-size-w,.ini-size-l{grid-column:1 !important}
  }
  /* Arrastrar para reordenar: se agarra desde el header (.ini-drag-handle),
     no desde cualquier punto de la tarjeta, para no pisar clicks en botones/
     inputs de adentro. */
  .ini-drag-handle{cursor:grab}
  [data-panel].ini-dragging{opacity:.45}
  [data-panel].ini-drop-target{outline:2px dashed var(--turq);outline-offset:-2px}
  /* Los paneles de Inicio SI son cajas, por el mismo motivo que las tarjetas de mes:
     estan uno al lado del otro y cada uno es una cosa distinta (los mensajes, las
     tareas, los pendientes). Ahi el marco separa; no repite el borde de la pantalla.
     Ademas se arrastran para reordenarlos, y hay que ver que se agarra. */
  .ini-card{display:flex;flex-direction:column;overflow:hidden;padding:0;
    background:var(--surface);border:1px solid var(--border);border-radius:14px;
    box-shadow:var(--shadow-sm);margin-bottom:0}
  /* Botón de tamaño (⤢) inyectado por JS en cada header - cicla chico/mediano/
     ancho/grande. Es un <button> real así que un click no dispara el arrastre
     del header (los navegadores ya evitan que un elemento interactivo anidado
     inicie drag). margin-left:auto lo manda al extremo derecho del header. */
  .ini-size-btn{margin-left:auto;flex:0 0 auto;width:26px;height:26px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;line-height:1}
  .ini-size-btn:hover{border-color:var(--turq);color:var(--turq)}
  .ini-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
  /* El icono del panel: cuadradito celeste con el trazo turquesa adentro. Es el
     mismo patron que ya usaban los tiles (.tile .k .ic), asi que no inventa nada:
     reusa el lenguaje que la app ya tenia. Antes era un emoji de 20px, que se
     dibuja distinto en cada sistema y no toma el color de la marca. */
  .ini-head .ini-ic{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:grid;
    place-items:center;background:var(--celeste);color:var(--turq);font-size:20px;line-height:1}
  .ini-head .ini-ic svg{width:17px;height:17px}
  /* Un color por panel, y que signifique algo. Al pasar los emojis a iconos los
     cinco quedaron identicos y la pantalla principal perdio el golpe de vista: antes
     uno encontraba las tareas por el verde sin leer el titulo.
     Vuelve el color, pero con la paleta funcional que la app ya tiene —no cinco
     paletas ajenas como traian los emojis— y ordenado por lo que cada panel pide:
     azul lo que es conversacion, verde lo que se tilda, ambar lo que reclama
     atencion, turquesa el atajo (es la marca) y gris la actividad, que es para mirar
     y no para hacer. Todos los tokens cambian solos con el tema oscuro. */
  .ini-card[data-panel="msg"] .ini-ic,
  .ini-card[data-panel="chat"] .ini-ic{background:var(--info-bg);color:var(--info)}
  .ini-card[data-panel="tareas"] .ini-ic{background:var(--success-bg);color:var(--success)}
  /* El ambar y el turquesa, mezclados con el color de texto: solos sobre su fondo
     claro daban 2,2 y el trazo casi no se veia. El color-mix contra --text se
     acomoda a los dos temas sin escribir un color nuevo — en claro oscurece, en
     oscuro aclara, porque --text cambia. */
  .ini-card[data-panel="pendop"] .ini-ic,
  .ini-card[data-panel="pendientes"] .ini-ic{background:var(--warning-bg);color:var(--warning-fg)}
  .ini-card[data-panel="accesos"] .ini-ic{background:var(--celeste);color:var(--turq-fg)}
  .ini-card[data-panel="actividad"] .ini-ic{background:var(--hover);color:var(--text-2)}
  .ini-head h2{margin:0;font-size:15px;font-weight:800}
  .ini-meta{font-size:12px;color:var(--text-2);margin-top:1px}
  .ini-unread{margin-left:auto;background:var(--error);color:#fff;font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
  /* mensajes - mismo tamaño para el chat del admin y el del operador (el de
     Javi quedó bien así, "esa está perfecta" - no llevan tope propio). */
  /* flex:1 + min-height:0 = llena lo que le toque a la tarjeta segun su tamaño
     (.ini-size-*), sin medirlo a mano: crece o achica con el tamaño elegido y
     lo que no entra scrollea (overflow-y:auto), nunca empuja a nadie. */
  .ini-feed{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:11px}
  /* Scrollbar del feed de mensajes: mismo celeste/turquesa que ya usa el menú
     lateral (.nav), para que se vea igual en vez del gris nativo del navegador. */
  .ini-feed{scrollbar-width:thin;scrollbar-color:var(--turq) transparent}
  .ini-feed::-webkit-scrollbar{width:8px}
  .ini-feed::-webkit-scrollbar-track{background:transparent}
  .ini-feed::-webkit-scrollbar-thumb{background:var(--turq);border-radius:999px}
  .ini-feed::-webkit-scrollbar-thumb:hover{background:var(--turq-d)}
  .ini-msg{display:flex;gap:9px;max-width:84%}
  .ini-av{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--petrol)}
  .ini-av.me{background:var(--turq-d)}
  /* Mensajes seguidos del mismo autor: sin avatar (espaciador para mantener la
     sangría) y más pegados al anterior. */
  .ini-av-sp{width:28px;flex:0 0 auto}
  .ini-msg.agr{margin-top:-6px}
  .ini-bub{background:var(--surface-2);border:1px solid var(--border);border-radius:4px 13px 13px 13px;padding:7px 11px}
  .ini-who{font-size:11px;font-weight:800;margin-bottom:1px;color:var(--text-2)}
  .ini-txt{font-size:13.5px;white-space:pre-wrap;word-break:break-word;color:var(--text)}
  .ini-tm{font-size:10.5px;color:var(--text-2);margin-top:2px;text-align:right}
  .ini-msg.me{align-self:flex-end;flex-direction:row-reverse}
  .ini-msg.me .ini-bub{background:var(--celeste);border-color:transparent;border-radius:13px 4px 13px 13px}
  [data-theme="dark"] .ini-msg.me .ini-bub{background:#005c4b}
  /* Interruptor "compartir con operadores" (cabecera del chat, solo admin) */
  .ini-switch{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-2);cursor:pointer;user-select:none;margin-left:auto;white-space:nowrap}
  .ini-switch input{appearance:none;-webkit-appearance:none;width:30px;height:17px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);position:relative;cursor:pointer;flex:0 0 auto;transition:background .15s ease}
  .ini-switch input::before{content:"";position:absolute;top:1px;left:1px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s ease}
  .ini-switch input:checked{background:var(--turq)}
  .ini-switch input:checked::before{transform:translateX(13px)}
  /* Badge de visibilidad por mensaje (solo lo ve un admin, junto al nombre) */
  .ini-vis-badge{margin-left:6px;font-size:10px;opacity:.8}
  /* Panel de operador (Inicio): mismo mecanismo que .ini-grid arriba (dense +
     fila fija + clases .ini-size-*), así el usuario mueve y redimensiona sus
     3 tarjetas igual que el admin. Default: chat mediano, pendientes chico,
     accesos ancho (ver iniPanelesTamDefault en app.js). */
  .op-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:210px;grid-auto-flow:row dense;align-items:stretch;gap:16px;margin-top:18px}
  @media(max-width:860px){
    .op-grid{grid-template-columns:1fr}
    .op-grid .ini-size-s,.op-grid .ini-size-m,.op-grid .ini-size-w,.op-grid .ini-size-l{grid-column:1 !important}
  }
  [data-theme="dark"] .ini-msg.me .ini-txt{color:#e9edef}
  /* La hora dentro del globo propio. Sobre el verde de WhatsApp el gris secundario
     queda en 3,33 (con el globo viejo ya estaba flojo: 3,91). Este da 4,77 y sigue
     discreto, que es lo que tiene que ser una hora. */
  [data-theme="dark"] .ini-msg.me .ini-tm{color:#d9e0e4}
  .ini-empty{color:var(--text-2);font-size:13px;text-align:center;padding:26px 10px}
  .ini-composer{border-top:1px solid var(--border);padding:11px 13px;display:flex;gap:9px;align-items:flex-end;background:var(--surface-2)}
  .ini-composer textarea{flex:1;resize:none;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;padding:9px 11px;min-height:40px;max-height:120px;outline:none}
  .ini-composer textarea:focus{border-color:var(--turq)}
  .ini-composer .icon-btn{flex:0 0 auto;align-self:center}
  /* selector de canales del chat */
  .ini-canales{display:flex;gap:6px}
  .ini-canales button{position:relative;border:1px solid var(--border);background:var(--surface);color:var(--text-2);border-radius:999px;padding:4px 14px;font-size:12.5px;font-weight:600;cursor:pointer}
  /* Texto OSCURO sobre el turquesa, no blanco. El blanco da 2,48 de contraste —
     por debajo de todo minimo legible— y ademas la app ya venia resolviendo esta
     misma combinacion con #04302f en siete lugares, .btn-primary el primero. Eran
     dos criterios opuestos para el mismo par de colores; queda el que ya usaba el
     boton mas visible del sistema. Con el oscuro da 5,76. */
  .ini-canales button.on{background:var(--turq);border-color:var(--turq);color:#04302f}
  .ini-cdot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--error);border:2px solid var(--surface)}
  /* adjuntos en los mensajes */
  .ini-adj-img{display:block;margin:2px 0 5px}
  .ini-adj-img img{max-width:220px;max-height:220px;border-radius:10px;display:block}
  .ini-adj-file{display:inline-flex;align-items:center;gap:7px;margin:2px 0 5px;padding:7px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);text-decoration:none;color:var(--text);max-width:240px}
  .ini-adj-file .ini-adj-nm{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ini-adj-file .ini-adj-sz{font-size:11px;color:var(--text-2);margin-left:auto;white-space:nowrap}
  /* preview del adjunto antes de enviar */
  .ini-adjp{display:flex;align-items:center;gap:6px;padding:8px 14px;border-top:1px solid var(--border);background:var(--surface-2);font-size:12.5px;color:var(--text-2)}
  .ini-adjp .ini-adjp-nm{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
  .ini-adjp .ini-adjp-x{margin-left:auto;border:none;background:transparent;color:var(--text-2);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:6px}
  .ini-adjp .ini-adjp-x:hover{background:var(--surface);color:var(--error)}
  /* tareas */
  /* Panel de Tareas: el input "Nueva tarea" va en el header (llena el hueco al lado
     del título y ahorra una fila). Abajo queda solo para/vence/Agregar. */
  .ini-panel-tareas .ini-head{gap:10px}
  .ini-panel-tareas .ini-head-tit{flex:0 0 auto}
  .ini-task-head{flex:1;min-width:120px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;padding:8px 11px;outline:none}
  .ini-task-head:focus{border-color:var(--turq)}
  .ini-addbar{padding:11px 15px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:9px;background:var(--surface-2)}
  .ini-addbar input{border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;padding:9px 11px;outline:none}
  .ini-addbar input:focus{border-color:var(--turq)}
  .ini-addrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .ini-lbl{font-size:11.5px;color:var(--text-2);font-weight:600}
  .ini-assign{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:2px;gap:1px;flex-wrap:wrap}
  .ini-assign button{border:0;background:transparent;color:var(--text-2);font:inherit;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;cursor:pointer}
  .ini-assign button.on{background:var(--celeste);color:var(--turq-fg)}
  /* Una tarea siempre tiene que quedar asignada a alguien - se puede tildar a
     Ignacio y/o Sebastian a la vez (multi), pero no queda "sin asignar". */
  .ini-task-err{font-size:11.5px;color:var(--error);font-weight:600}
  .ini-tasks{flex:1;min-height:0;overflow-y:auto;padding:6px 10px 8px}
  .ini-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .ini-task{display:flex;align-items:flex-start;gap:10px;padding:9px 8px;border-radius:10px}
  .ini-task:hover{background:var(--hover)}
  .ini-task:hover .ini-del{opacity:1}
  .ini-ck{width:20px;height:20px;border:2px solid var(--border);border-radius:6px;flex:0 0 auto;margin-top:1px;cursor:pointer;display:grid;place-items:center;background:var(--surface);padding:0}
  .ini-ck:hover{border-color:var(--turq)}
  .ini-ck svg{width:12px;height:12px;opacity:0;color:#fff}
  .ini-task.done .ini-ck{background:var(--turq);border-color:var(--turq)}
  .ini-task.done .ini-ck svg{opacity:1}
  .ini-tbody{flex:1;min-width:0}
  .ini-ttitle{font-size:13.5px;font-weight:600;color:var(--text)}
  .ini-task.done .ini-ttitle{text-decoration:line-through;color:var(--text-2);font-weight:500}
  .ini-tmeta{font-size:11px;color:var(--text-2);margin-top:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  /* El --turq-fg reemplaza al parche que habia aca abajo: era un color para el tema
     claro y otro escrito a mano para el oscuro. El token se acomoda a los dos solo,
     asi que el override sobra. */
  .ini-chip{font-size:10.5px;font-weight:800;padding:1px 8px;border-radius:999px;background:var(--celeste);color:var(--turq-fg)}
  /* Fecha de vencimiento: input en la barra de alta + chip por tarea (con calendario
     nativo por encima) + alerta cuando está vencida. */
  .ini-vence-in{border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font:inherit;font-size:12px;padding:5px 8px;outline:none;color-scheme:light dark}
  .ini-vence-in:focus{border-color:var(--turq)}
  .ini-due{position:relative;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;padding:2px 8px 2px 7px;border-radius:999px;cursor:pointer;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);color-scheme:light dark}
  .ini-due svg{width:11px;height:11px;flex:0 0 auto}
  .ini-due input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;cursor:pointer}
  .ini-due.none{opacity:.75}
  .ini-due.futuro{background:var(--celeste);color:var(--turq-fg);border-color:transparent}
  .ini-due.proxima{background:var(--warning-bg);color:var(--warning-fg);border-color:transparent}
  .ini-due.hoy{background:var(--warning-bg);color:var(--warning-fg);border-color:transparent}
  .ini-due.vencida{background:var(--error-bg);color:var(--error-fg);border-color:transparent}
  .ini-due.done{cursor:default;opacity:.75}
  .ini-task.venc{background:var(--error-bg)}
  .ini-task.venc:hover{background:var(--error-bg)}
  .ini-task.venc .ini-ttitle{color:var(--error-fg)}
  /* Próxima a vencer (ver PROXIMA_DIAS en app.js): mismo aviso que una vencida
     pero apenas insinuado - un sombreado más tenue, no el fondo rojo de lleno. */
  .ini-task.proxima{background:color-mix(in srgb,var(--warning-bg) 55%,var(--surface))}
  .ini-task.proxima:hover{background:color-mix(in srgb,var(--warning-bg) 55%,var(--surface))}
  .ini-task.proxima .ini-ttitle{color:var(--warning-fg)}
  .ini-venc-cnt{color:var(--error)}
  .ini-link{border:0;background:transparent;color:var(--turq-d);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;padding:0}
  .ini-link:hover{text-decoration:underline}
  /* Tarea vencida: en vez de dejarla en rojo pasivo, pide una acción concreta -
     resolverla o pasarla a una fecha nueva - en vez de que quede ahí sin más. */
  .ini-task-urgent{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;padding-top:6px;border-top:1px dashed color-mix(in srgb,var(--error) 35%,transparent)}
  .ini-task-urgent>span{font-size:11px;color:var(--error);font-weight:600}
  .ini-task-urgent .btn{padding:3px 10px;font-size:11px}
  .ini-due-btn{position:relative;display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--error);color:var(--error);cursor:pointer;color-scheme:light dark}
  .ini-due-btn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;cursor:pointer}

  /* Pendientes del operador: una fila por cliente, con badges numéricos estilo
     notificación de celular - el color ya avisa la urgencia, sin texto de más. */
  /* Un poco más alta que antes (300->420): que entren todos los clientes con
     pendientes sin achicharrarse a los primeros 5-6. */
  .ini-pendop-list{list-style:none;margin:0;padding:6px 10px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;min-height:0}
  .ini-pendop-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px}
  .ini-pendop-row:hover{background:var(--hover)}
  /* Fila clickeable: lleva a donde ESE pendiente se trabaja (dashboard del
     médico de cabecera o Cabina de informes). Los chips de vencimiento son
     botones adentro con su propio onclick (cortan la propagación). */
  .ini-pendop-row.is-link{cursor:pointer}
  .ini-pendop-row.is-link:hover .ini-pendop-nombre{color:var(--turq)}
  .ini-pendop-row.is-link:focus-visible{outline:2px solid var(--turq);outline-offset:-2px}
  .ini-pendop-nombre{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ini-pendop-badges{display:flex;gap:6px;flex:0 0 auto}
  .ini-pendop-badge{min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff}
  .ini-pendop-badge.pend{background:var(--warning)}
  .ini-pendop-badge.transm{background:var(--error)}
  .ini-pendop-badge.cup{background:var(--info)}
  /* Plan Salud: un chip por mes. Lleva el nombre del mes adentro, asi que es
     mas ancho que los demas y necesita ser boton (abre el detalle de ese mes). */
  .ini-pendop-badge.ps{background:var(--primary,#0d9488);border:0;cursor:pointer;font:inherit;font-size:11px;font-weight:800;padding:0 8px}
  .ini-pendop-badge.ps:hover{filter:brightness(1.1)}

  /* ===== Oftalmología: la tabla apaisada del seguimiento =====
     Una fila por paciente y ~11 columnas de pasos no entran en pantalla, así que
     la tabla scrollea al costado con la columna del paciente fija (sticky): sin
     eso, a la tercera columna ya no sabés de quién es la fila. */
  .oft-acciones{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  /* El scroll va en los DOS ejes y acotado en alto: sin un alto máximo, el
     encabezado pegajoso no tiene contra qué pegarse y la tabla scrollea con la
     página entera. */
  .oft-scroll{overflow:auto;max-height:72vh;border:1px solid var(--border);border-radius:8px}
  /* width:max-content y no 100%: con 100% la tabla se COMPRIME para entrar y nunca
     scrollea, asi que la columna fija del paciente no serviria de nada. Asi crece a
     lo que necesite, aparece el scroll lateral, y el min-width evita que quede
     angosta y flotando cuando sobra lugar. */
  .oft-t{border-collapse:separate;border-spacing:0;font-size:12px;white-space:nowrap;width:max-content;min-width:100%}
  .oft-t th,.oft-t td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:6px 8px;text-align:center}

  /* ===== Lo que queda fijo (pedido de Seba, 18/09/2026) =====
     La columna del paciente al moverse a los costados, y las DOS filas de
     encabezado (el paso y el código) al bajar. Sin eso, a la quinta columna no
     sabés de quién es la fila ni qué paso estás mirando.
     Los z-index importan: la esquina (encabezado + columna fija a la vez) tiene
     que estar por encima de las dos. */
  .oft-r1 th{position:sticky;top:0;height:40px;z-index:3}
  .oft-r2 th{position:sticky;top:40px;z-index:3}
  .oft-sticky{position:sticky;left:0;z-index:2;text-align:left!important;min-width:170px}
  .oft-r1 .oft-sticky,.oft-r2 .oft-sticky{z-index:4}
  /* El fondo es obligatorio en todo lo pegajoso: si es transparente, el contenido
     que pasa por debajo se ve a través. */
  .oft-r1 th,.oft-r2 th{background:var(--bg-2,var(--bg))}
  .oft-t tbody .oft-sticky{background:var(--card,var(--bg))}
  .oft-r1 th{font-weight:600;font-size:11px;color:var(--text-2);vertical-align:bottom;min-width:78px}
  .oft-r1 th b{display:block;font-size:13px;color:var(--text)}
  .oft-r2 th{font-size:10px;color:var(--text-2);font-weight:400;padding-top:0;font-variant-numeric:tabular-nums}
  .oft-r2 th.oft-nocode{font-style:italic}
  .oft-fin{border-left:2px solid var(--border)!important}
  /* Paciente y Avance son las dos columnas de referencia: un poco mas grandes y
     centradas verticalmente en la fila, para que la vista se apoye en ellas al
     recorrer los pasos (pedido de Seba). */
  .oft-sticky{vertical-align:middle}
  .oft-sticky b{display:block;font-weight:600;font-size:12.5px;line-height:1.35}
  .oft-benef{font-size:10.5px}
  .oft-prog{vertical-align:middle;font-size:11.5px}
  .oft-t tbody td.oft-sticky,.oft-t tbody td.oft-prog{padding-top:8px;padding-bottom:8px}
  .oft-benef{color:var(--text-2);font-size:10px;font-variant-numeric:tabular-nums}
  .oft-prog{min-width:150px;color:var(--text-2);font-size:11px;text-align:left!important}
  .oft-bar{display:block;height:4px;background:var(--border);border-radius:999px;overflow:hidden;margin-bottom:3px}
  .oft-bar i{display:block;height:100%;background:var(--primary)}

  /* ===== Los colores, como los definió Seba (18/09/2026) =====
       verde    = transmitida
       amarilla = validada sin transmitir -> falta el informe (todo oftalmo lleva)
       naranja  = pinchada pero sin validar
       roja     = no hay OME de ese paso en ninguna bandeja subida
     Se usa color de fondo Y texto oscuro/claro propio para que se lean en los dos
     temas; el color solo nunca alcanza, por eso cada celda ademas tiene tooltip. */
  .oft-c{font-size:11px;color:var(--text-2);font-variant-numeric:tabular-nums}

  /* ===== Los estados, con relleno solido =====
     Antes eran tintes al 16% sobre fondo oscuro y no se distinguian entre si:
     Seba no podia decir si una celda estaba transmitida o le faltaba algo. Ahora
     cada estado tiene su color plano y su texto en alto contraste. El orden de
     intensidad acompania el significado: verde cerrado, ambar y naranja en
     proceso, y el vacio casi sin peso, porque una celda vacia no es una alarma. */
  .oft-c.tx{background:#1f7a4d;color:#eafff3;font-weight:600}
  .oft-c.inf{background:#a8730f;color:#fff8e8;font-weight:600}
  .oft-c.pend{background:#b8541a;color:#fff1e8;font-weight:600}
  [data-theme="light"] .oft-c.tx{background:#d3f2e1;color:#14532d}
  [data-theme="light"] .oft-c.inf{background:#fdecc8;color:#7a4f04}
  [data-theme="light"] .oft-c.pend{background:#fadfce;color:#8a3a0b}
  /* Sin OME: el paso todavia no ocurrio. Se deja apenas marcado — antes era un
     rojo que dominaba la pantalla siendo que es, justamente, la ausencia de dato. */
  .oft-c.nada{background:transparent}
  .oft-c.nada::after{content:"·";color:var(--text-2);opacity:.35}

  /* ===== El aviso es una MARCA, no un color de estado =====
     Esto es lo que confundia: el aviso pintaba la celda de rojo y tapaba si la
     OME estaba transmitida o no. Una celda puede estar perfecta Y tener un aviso
     (por ejemplo, transmitida pero con un paso anterior sin hacer). Ahora conserva
     el color de su estado y el aviso se ve como un borde rojo con el simbolo. */
  .oft-c.oft-aviso{position:relative;box-shadow:inset 0 0 0 2px var(--error);cursor:help}
  .oft-warn{margin-right:3px;color:var(--error);font-weight:700}

  /* ===== Comentario de celda, estilo Excel =====
     Una esquinita en el borde superior derecho. No ocupa lugar ni cambia el color
     del estado: es una marca de que ahi hay algo escrito, y el texto se lee con el
     mouse encima. Doble clic para escribir (el clic simple es para leer la celda). */
  .oft-c{position:relative}
  .oft-com-marca{position:absolute;top:0;right:0;width:0;height:0;
    border-top:7px solid var(--primary);border-left:7px solid transparent}
  .oft-con-com{cursor:help}
  /* Al pasar por cualquier celda comentable se insinua que se puede escribir. */
  .oft-t tbody td.oft-c[ondblclick]:hover{outline:1px dashed var(--primary);outline-offset:-2px}
  .oft-c.tx .oft-warn,.oft-c.inf .oft-warn,.oft-c.pend .oft-warn{color:#fff;
    background:var(--error);border-radius:3px;padding:0 3px}
  /* Un aviso sobre una celda SIN OME (el paso no se hizo y ademas hay algo raro):
     ahi si el rojo es el estado, no solo la marca. */
  .oft-c.nada.oft-aviso{background:var(--error-bg,rgba(201,74,74,.18))}
  /* Los controles sin OME: se tocan para anotarlos, así que tienen que verse
     clickeables aunque estén vacíos. No van en rojo: que no tengan OME no es una
     falta, es que ese paso no la lleva. */
  .oft-c.oft-manual{cursor:pointer;background:repeating-linear-gradient(45deg,transparent,transparent 4px,var(--border) 4px,var(--border) 5px)}
  .oft-c.oft-manual:hover{outline:2px solid var(--primary);outline-offset:-2px}
  /* Para quien solo mira: la celda de control se ve igual pero no invita a tocarla. */
  .oft-c.oft-notoc{cursor:default}
  .oft-c.oft-notoc:hover{outline:none}
  .oft-c.oft-manual.puesto{background:var(--success-bg,rgba(46,139,87,.16));color:var(--success);font-weight:600}
  .oft-alerta .oft-sticky{box-shadow:inset 3px 0 0 var(--error)}
  .oft-tag{display:inline-block;margin-top:3px;margin-right:4px;padding:1px 6px;border-radius:999px;font-size:10px;font-weight:700}
  .oft-tag.frenado{background:var(--error-bg,rgba(201,74,74,.14));color:var(--error)}
  .oft-tag.rev{background:var(--warning-bg,rgba(217,154,33,.14));color:var(--warning)}
  .oft-prox{color:var(--text-2)}
  /* La referencia de colores, arriba de la tabla. */
  .oft-leyenda{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--text-2);margin:8px 0}
  .oft-leyenda span{display:flex;align-items:center;gap:5px}
  .oft-leyenda i{width:13px;height:13px;border-radius:3px;display:inline-block;border:1px solid var(--border)}
  /* Las bandejas subidas, con su botón de borrar. Solo la ve el admin. */
  .oft-subidas{border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:10px;font-size:12px}
  .oft-subidas>b{display:block;margin-bottom:6px;font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em}
  .oft-subida{display:flex;align-items:center;gap:10px;padding:4px 0;border-top:1px solid var(--border)}
  .oft-subida:first-of-type{border-top:0}
  .oft-sub-arch{flex:1 1 auto;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .oft-sub-arch i{font-style:normal;font-weight:400;color:var(--text-2);font-size:11px}
  .oft-sub-meta{flex:0 0 auto;color:var(--text-2);font-size:11px}
  /* De que centro es cada bandeja. CIMA es el arranque del circuito, UOM la
     continuacion: se distinguen a simple vista para no cargar una como la otra. */
  .oft-sub-origen{flex:0 0 auto;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.04em}
  .oft-sub-origen.cima{background:var(--info-bg,rgba(59,130,196,.16));color:var(--info)}
  .oft-sub-origen.uom{background:var(--primary-soft,rgba(24,183,178,.16));color:var(--primary)}

  /* Celda con aviso: la atencion que hubo ahi no era la que correspondia, o las
     fechas no cierran. Pisa al color de estado porque es lo primero que hay que
     ver; el detalle esta en el tooltip. */
  .oft-c.oft-aviso{background:var(--error-bg,rgba(201,74,74,.2));color:var(--error);font-weight:700;cursor:help}

  /* El numero de OME, debajo de la fecha. Chico y tenue: la fecha es lo que se
     escanea, el OME es lo que se copia cuando hay que ir al CUP. */
  .oft-cod{display:block;font-size:9px;line-height:1.3;opacity:.62;font-variant-numeric:tabular-nums;letter-spacing:.02em}

  /* Paso que se da por hecho al entrar por el 2do (el paciente venia derivado).
     Neutro a proposito: no es un logro verificado ni una falta. */
  .oft-c.previo{background:transparent;color:var(--text-2);font-style:italic;opacity:.75}

  /* La leyenda es tambien el filtro: cada tono es un boton. */
  .oft-leyenda-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;
    background:transparent;color:var(--text-2);font:inherit;font-size:12.5px;cursor:pointer;
    padding:3px 8px;border-radius:999px;transition:background .12s,border-color .12s;white-space:nowrap}
  .oft-leyenda-chip:hover{background:var(--bg-2,var(--bg));border-color:var(--border)}
  .oft-leyenda-chip.activo{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600}
  .oft-leyenda-chip.activo i{border-color:rgba(255,255,255,.6)}
  .oft-leyenda-chip i{width:13px;height:13px;border-radius:3px;display:inline-block;border:1px solid var(--border);flex:0 0 auto}
  .oft-leyenda-sep{width:1px;height:18px;background:var(--border);margin:0 2px}

  /* Retoque del encabezado: solo espaciado, alineacion y jerarquia tipografica.
     Las celdas y la grilla no se tocan, funcionan y no hay que arreglarlas. */
  .oft-leyenda{align-items:center;padding:2px 0}
  .oft-r1 th{padding-top:8px;padding-bottom:5px;letter-spacing:.02em}
  .oft-r1 th b{margin-bottom:2px;font-size:12px;letter-spacing:0}
  .oft-r2 th{padding-bottom:7px;opacity:.85}
  /* Las dos columnas fijas se separan del resto con una linea mas marcada: son la
     referencia, no una columna mas de datos. */
  .oft-prog{border-right:2px solid var(--border)!important}
  /* Paciente y Avance ocupan las dos filas del encabezado: se centran vertical
     y quedan alineados con el bloque entero, no colgados de la primera fila. */
  /* Encabezado que ordena: tiene que verse tocable, y la flechita dice por cual
     esta ordenando y en que sentido. */
  .oft-orden{cursor:pointer;user-select:none}
  .oft-orden:hover{background:var(--primary-soft,rgba(24,183,178,.12))!important}
  .oft-flecha{margin-left:4px;font-size:8px;color:var(--primary);vertical-align:middle}

  .oft-doble{vertical-align:middle!important;font-size:10px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--text-2);font-weight:700}
  /* Al tener rowspan, el th del encabezado tiene que pegarse arriba Y a la
     izquierda al mismo tiempo. */
  .oft-r1 .oft-sticky.oft-doble{top:0;z-index:4}
  .oft-r1 .oft-prog.oft-doble{position:sticky;top:0;z-index:3;background:var(--bg-2,var(--bg))}
  .oft-t tbody tr:hover .oft-c{background-image:linear-gradient(rgba(127,127,127,.06),rgba(127,127,127,.06))}
  .oft-t tbody tr:hover .oft-sticky{background:var(--bg-2,var(--bg))}
  .oft-alta{color:var(--success);font-weight:700}
  /* La cuenta regresiva del detalle. .warn/.bad sueltas no existen como clase
     global (las que hay estan scopeadas a otros paneles), asi que van aca. */
  #psPendModal .warn{color:var(--warning);font-weight:700}
  #psPendModal .bad{color:var(--error);font-weight:700}
  /* Por vencer / vencida: estos dos SON botones (abren el detalle), no un número
     suelto como los otros - por eso el hover y el cursor. */
  .ini-pendop-badge.vence,.ini-pendop-badge.vencida{border:0;cursor:pointer;font:inherit;font-size:11px;font-weight:800}
  .ini-pendop-badge.vence{background:#b45309;box-shadow:0 0 0 2px rgba(180,83,9,.3)}
  .ini-pendop-badge.vence:hover{background:#92400e}
  .ini-pendop-badge.vencida{background:var(--text-2);opacity:.85}
  .ini-pendop-badge.vencida:hover{opacity:1}
  .ov-estado{font-weight:700;white-space:nowrap}
  .ov-estado.vencida{color:var(--error)}
  /* La práctica es el texto largo: que se recorte ella (con el nombre completo
     en el tooltip) y no empuje al plazo fuera de la pantalla. */
  .ov-practica{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cup-informe-upload{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:10px 0}
  .cup-informe-upload .field-inline{display:flex;flex-direction:column;gap:4px;font-size:12px}
  .cup-informe-upload .field-inline input{width:170px}
  .cup-historial-item{padding:10px 0;border-bottom:1px solid var(--line)}
  .cup-historial-item:last-child{border-bottom:none}
  .cup-historial-item .ini-pendop-badge{font-size:11.5px;padding:0 8px}
  .cup-historial-item .cup-live{background:var(--turq);color:#04302f;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:999px;margin-left:6px;letter-spacing:.02em}
  /* Actividad de operadores (Inicio del admin): horas conectado hoy + ícono
     de detalle. Mismo lenguaje visual que .ini-pendop-* de arriba. */
  .acted-list{list-style:none;margin:0;padding:6px 10px 10px;display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto}
  .acted-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px}
  .acted-row:hover{background:var(--hover)}
  .acted-dot{width:8px;height:8px;border-radius:999px;background:var(--border);flex:0 0 auto}
  .acted-dot.on{background:var(--success)}
  .acted-nombre{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .acted-horas{font-size:12.5px;font-weight:700;color:var(--text-2);white-space:nowrap}
  .acted-row .rowbtn{flex:0 0 auto}
  /* Detalle (modal): barra de horas por día + tabla de ingresos. */
  .act-dias{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;max-height:220px;overflow-y:auto}
  .act-dia-row{display:flex;align-items:center;gap:10px;font-size:12.5px}
  .act-dia-fecha{flex:0 0 78px;color:var(--text-2)}
  .act-dia-barwrap{flex:1;background:var(--surface-2);border-radius:6px;overflow:hidden;height:8px}
  .act-dia-bar{height:100%;background:var(--turq);border-radius:6px}
  .act-dia-val{flex:0 0 54px;text-align:right;font-weight:700;color:var(--text)}
  .act-subtit{margin:0 0 8px;font-size:13px;font-weight:800;color:var(--text)}
  /* Accesos rápidos: grilla de hasta 9 atajos elegidos por el usuario + editor
     desplegable con el catálogo completo (todas las vistas + todos los clientes).
     min-height: sin nada elegido todavía, que la tarjeta no se vea como un
     recorte vacío al lado de Tareas/Pendientes - el aviso de "Elegí hasta 9..."
     queda centrado en un espacio con algo de presencia real. */
  .ini-accesos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 16px;min-height:130px;align-content:center}
  .ini-acceso-tile{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);cursor:pointer;font:inherit;text-align:center}
  .ini-acceso-tile:hover{border-color:var(--turq);background:var(--hover)}
  .ini-acceso-tile .ic{font-size:19px;line-height:1}
  .ini-acceso-tile .tx{font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  /* Catálogo de Accesos rápidos: vive en el modal-body de #accesosModal (no
     adentro de la tarjeta de alto fijo, que lo recortaba) - el tope de alto es
     relativo al viewport para que entre completo en cualquier resolución, con
     scroll propio si aun así no alcanza. */
  .ini-accesos-catalogo{max-height:min(420px,55vh);overflow-y:auto;padding:8px 0 0;display:flex;flex-direction:column;gap:1px}
  .ini-acceso-opt{display:flex;align-items:center;gap:9px;padding:6px 4px;font-size:13px;cursor:pointer;color:var(--text)}
  .ini-acceso-opt input{flex:0 0 auto}
  .ini-acceso-opt.disabled{opacity:.4;cursor:not-allowed}
  .ini-acceso-grupo{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);margin:10px 0 2px}
  .ini-acceso-grupo:first-child{margin-top:2px}
  .ini-del{border:0;background:transparent;color:var(--text-2);cursor:pointer;font-size:14px;opacity:0;transition:opacity .12s;flex:0 0 auto;padding:2px;line-height:1}
  .ini-del:hover{color:var(--error)}
  .ini-donehead{display:flex;align-items:center;gap:7px;padding:9px 8px 5px;color:var(--text-2);font-size:12px;font-weight:700;cursor:pointer;user-select:none}
  .ini-donecnt{color:var(--text-2);font-weight:600;opacity:.8}
  .ini-donehead svg{width:14px;height:14px;transition:transform .15s}
  .ini-donewrap.closed .ini-list{display:none}
  .ini-donewrap.closed .ini-donehead svg{transform:rotate(-90deg)}

  /* demo toggle (solo del prototipo) */
  .demo{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:60;background:var(--navy);color:#fff;border-radius:999px;
    display:flex;gap:4px;padding:5px;box-shadow:0 8px 30px rgba(0,0,0,.3);font-size:12px}
  .demo button{background:transparent;border:0;color:#b8c8db;padding:6px 13px;border-radius:999px;font-weight:600}
  .demo button.on{background:var(--turq);color:#04302f}

  /* Fondo del menú lateral en celular: oscurece el contenido y se cierra al tocarlo.
     Fuera de mobile no existe (el menú es fijo). z-index entre contenido (30) y sidebar (40). */
  .nav-scrim{position:fixed;inset:0;background:rgba(11,31,58,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:38}
  /* Laptops chicas / pantallas con escalado de Windows (ej. 1360x768 al 125-150%):
     el viewport CSS queda en ~900-1180px y no dispara el modo mobile, pero con los
     tamaños de escritorio el menú lateral y la barra quedan enormes. Se compacta el
     costado (sigue siendo el menú fijo, no el cajón de la hamburguesa). */
  @media(min-width:861px) and (max-width:1180px){
    :root{ --sidebar-w:190px; }
    .sidebar{padding:12px 9px}
    .sidebar .brand{padding:5px 6px 12px;margin-bottom:9px}
    .logo-side{width:118px}
    .nav{gap:1px}
    .nav .lbl{font-size:9.5px;padding:10px 10px 5px}
    .nav a,.nav-parent{font-size:12.5px;padding:5px 10px;gap:9px;border-radius:8px}
    .nav a svg,.nav-parent svg{width:16px;height:16px}
    .nav a .chip{font-size:9px;padding:1px 6px}
    .nav-sub{margin-left:24px}
    .client-nav-item{font-size:11.5px;padding:3px 9px}
    .side-config a{font-size:10.5px;padding:2px 9px}
    .topbar{padding:0 16px}
    .content{padding:14px 14px 26px}
  }
  @media(max-width:860px){
    .tiles{grid-template-columns:repeat(2,1fr)}
    /* Cajón en celular: más angosto, con el logo chico y a la izquierda, para que
       no quede tan desproporcionado. */
    .sidebar{width:200px;transform:translateX(-100%);box-shadow:10px 0 40px rgba(0,0,0,.3);overscroll-behavior:contain}
    .sidebar .brand{padding:6px 8px 10px;margin-bottom:8px;text-align:left}
    .logo-side{width:74px;margin:2px auto 6px 2px}
    body.nav-open .sidebar{transform:none}
    body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
    /* Con el cajón abierto el fondo NO scrollea: evita que la barra "salte" al tirar
       para abajo (el toolbar del navegador cambiaba el alto y la barra fija saltaba). */
    body.nav-open{overflow:hidden}
    .main{margin-left:0}
    .hamb{display:grid;place-items:center}
    .em-hide{display:none}
    /* Barra de arriba en celular: más lugar para el nombre del cliente. El crumb
       ("Dashboard cliente / X") se esconde porque repite el título que está debajo. */
    .topbar{padding:0 12px;gap:8px}
    .top-client-meta{gap:8px}
    .top-client-meta .crumb{display:none}
    .top-client-meta h2{font-size:15.5px}
    /* El nombre del cliente es lo que dice DONDE estás parado: se queda con el
       lugar. Antes tenía min-width:0 y los chips no se achican, así que el que
       desaparecía era siempre el nombre y quedaba "Activo · UP (" cortado. */
    .top-client-meta{flex:1 1 auto}
    .top-client-meta > div{flex:1 1 auto}
    .top-client-meta .client-status{display:none}
    .top-client-meta .client-up-header{flex:0 0 auto;max-width:46%;overflow:hidden}
    /* El estado del server es información de guardia, no de trabajo diario. */
    #srvBtn{display:none !important}

    /* ---- Informes recibidos en celular ---- */
    /* Una tabla de 10 columnas en un teléfono se lee de costado y cada fila ocupa
       media pantalla. Acá cada informe es una tarjeta y el orden lo manda el CSS:
       primero el paciente, después la práctica, y el nombre del archivo al final
       (es lo que menos se mira y lo más largo). */
    #view-cabina .table-scroll{overflow:visible}
    #view-cabina .nom-results-table{min-width:0;table-layout:auto;display:block}
    #view-cabina .nom-results-table thead{display:none}
    #view-cabina .nom-results-table tbody{display:block}
    #view-cabina .nom-results-table tr{display:grid;grid-template-columns:24px minmax(0,1fr);
      gap:3px 9px;padding:12px 13px;border-bottom:1px solid var(--border);align-items:start}
    #view-cabina .nom-results-table td{display:block;grid-column:2;padding:0;border:0;
      font-size:12.5px;line-height:1.35;white-space:normal;max-width:none;min-width:0}
    #view-cabina .nom-results-table td.cab-c-check{grid-column:1;grid-row:1;text-align:left}
    #view-cabina .nom-results-table td.cab-c-paciente{order:1;font-weight:700;font-size:14px}
    #view-cabina .nom-results-table td.cab-c-estado{order:2}
    #view-cabina .nom-results-table td.cab-c-practica{order:3;color:var(--text-2)}
    #view-cabina .nom-results-table td.cab-c-ome{order:4}
    #view-cabina .nom-results-table td.cab-c-obs{order:5}
    #view-cabina .nom-results-table td.cab-c-archivo{order:6;font-size:11.5px;color:var(--text-2);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #view-cabina .nom-results-table td.cab-c-archivo .cab-file{font-weight:500}
    #view-cabina .nom-results-table td.cab-c-recibido{order:7;font-size:11.5px;color:var(--text-2)}
    /* El asunto del mail y la observación vacía no dicen nada en una pantalla chica. */
    #view-cabina .nom-results-table td.cab-c-asunto,#view-cabina .nom-results-table td.cab-vacio{display:none}
    #view-cabina .nom-results-table td.cab-c-acciones{order:8;margin-top:8px;display:flex;gap:9px;
      flex-wrap:wrap;text-align:left;white-space:normal}
    #view-cabina .nom-results-table td.nom-empty{grid-column:1/-1;text-align:center}

    /* La botonera de arriba: cada botón entero y la tira se corre de costado. El
       .btn tiene alto fijo, así que al apretarlos el texto se partía y "PAMI"
       terminaba escrito ABAJO del botón, fuera de la caja. */
    .nom-table .table-head{flex-direction:column;align-items:stretch;gap:9px;padding:11px 0}
    .nom-table .table-head > div{min-width:0}
    .nom-table .table-head > div:last-child{overflow-x:auto;overflow-y:hidden;padding-bottom:3px}
    .nom-table .table-head .btn{flex:0 0 auto;white-space:nowrap;height:38px;font-size:13px;padding:0 13px}

    /* En mobile manda el drawer (hamburguesa), no el modo colapsado */
    .side-collapse{display:none}
    body.sidebar-collapsed .sidebar{width:200px}
    body.sidebar-collapsed .main{margin-left:0}
  }
  /* En celular: más ancho útil (menos padding) y botones de fila más cómodos al toque. */
  @media(max-width:560px){
    /* En teléfono el nombre del cliente se lleva la barra entera: el UP se copia
       desde la configuración PAMI del cliente, el nombre no está en ningún otro lado. */
    .top-client-meta .client-up-header{display:none}
    /* Los dos botones verdes de Informes recibidos: a todo lo ancho y uno abajo del
       otro. Sueltos y de anchos distintos quedaban desparejos, y el texto de la
       casilla alineado a la derecha no se ataba a nada. */
    #view-cabina .cab-head-controls{align-items:stretch}
    #view-cabina .cab-head-controls > .field,#view-cabina .cab-mailbox{width:100%}
    #view-cabina .cab-mailbox .field{flex:1 1 0;min-width:0}
    #view-cabina .cab-mailbox .btn{flex:1 0 100%;width:100%}
    #view-cabina #cabUploadBtn{width:100%;justify-content:center}
    #view-cabina .cab-head-info{margin-left:0;text-align:left;width:100%}
    .content{padding:12px 13px 26px}
    .page-head h1{font-size:18px}
    .rowbtn{padding:7px 10px}
    .row-actions,.cab-actions{gap:8px}
    /* En celular el saludo va sin el "Buenas tardes," (queda "Ignacio 👋") para
       que entre en una línea al lado de los íconos. */
    .hi-pre{display:none}
    #pageTitle{font-size:15px}
  }
  /* fila de encabezado con acción a la derecha */
  .head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}

  /* select con estética de input */
  select.inp{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat;background-position:right 12px center}

  /* botones de acción por fila */
  .row-actions{display:flex;gap:6px;justify-content:flex-end}
  .rowbtn svg{width:16px;height:16px;display:block}
  .rowbtn.danger:hover{border-color:var(--error);color:var(--error)}
  .file-btn{position:relative;overflow:hidden}
  .file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
  .report-attach-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .report-uploading{margin-bottom:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
  .report-uploading-bar{height:6px;border-radius:999px;background:var(--hover);overflow:hidden;position:relative}
  .report-uploading-bar span{position:absolute;top:0;bottom:0;width:40%;border-radius:999px;background:var(--turq);animation:reportUploadSlide 1.1s ease-in-out infinite}
  @keyframes reportUploadSlide{0%{left:-42%}100%{left:100%}}
  .report-uploading-text{font-size:12.5px;color:var(--text-2);margin-top:8px;font-weight:650}
  .report-more-row td{background:var(--surface-2);text-align:center;font-size:12.5px;color:var(--text-2);padding:12px!important}
  .report-more-btn{background:none;border:0;color:var(--turq-d);font-weight:750;cursor:pointer;text-decoration:underline;font-size:12.5px}
  .auto-debit-note{font-size:10.5px;margin-top:3px;color:var(--turq-d)}
  .debit-warning-note{font-size:10.5px;margin-top:3px;color:var(--warning)}
  /* Panel Débitos: reglas de cruce */
  .debito-umbral{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--celeste);margin-bottom:12px;flex-wrap:wrap}
  .debito-umbral-txt{flex:1;min-width:200px;font-size:13px}
  .debito-umbral-txt b{color:var(--text)}
  .debito-umbral-input{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:650;white-space:nowrap}
  .debito-umbral-input input{width:64px;text-align:center}
  .debito-reglas-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
  .debito-regla-item{display:flex;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
  .debito-regla-item.off{opacity:.55}
  .general-card{padding:20px}
  .general-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
  .general-card-head>button{flex-shrink:0}
  .general-card-head h3{margin:0 0 4px}
  .general-card-head .nom-muted{display:block;max-width:640px}
  .general-debitos-meta{font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:10px}
  .general-debito-estado{font-size:11px;font-weight:700;color:var(--text-2);white-space:nowrap;align-self:center}
  .debito-regla-txt{flex:1;min-width:0;font-size:13px}
  .debito-regla-txt b{font-size:13.5px}
  .debito-regla-nota{font-size:11.5px;color:var(--text-2);margin-top:5px;font-style:italic}
  .debito-regla-toggle{position:relative;display:inline-block;width:38px;height:22px;flex:none;margin-top:2px;cursor:pointer}
  .debito-regla-toggle input{opacity:0;width:0;height:0;position:absolute}
  .debito-regla-toggle span{position:absolute;inset:0;background:var(--border);border-radius:999px;transition:background .15s ease}
  .debito-regla-toggle span::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s ease;box-shadow:0 1px 2px rgba(0,0,0,.25)}
  .debito-regla-toggle input:checked + span{background:var(--turq)}
  .debito-regla-toggle input:checked + span::before{transform:translateX(16px)}
  .debito-regla-nueva{margin-top:4px;border-top:1px solid var(--border);padding-top:12px}
  .debito-regla-nueva summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--turq-d)}
  .debito-nueva-form{margin-top:12px}
  .debito-nueva-form .field span{display:block;font-size:11.5px;font-weight:600;color:var(--text-2);margin-bottom:5px}
  .nom-upload{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
  .month-field{display:grid;gap:5px;min-width:150px}
  .month-field span{font-size:11.5px;font-weight:700;color:var(--text-2)}
  .month-field .inp{height:42px}
  /* Cabecera de las pantallas de lista (Informes recibidos, Padrón, Nomencladores,
     Reportes del cliente): tarjeta de estado + filtros. Achicado a propósito para
     que quede más aire para la tabla en pantallas de 768px de alto — el padding
     genérico de .card (16px) sobraba acá, así que se pisa puntual, sin tocar .card. */
  /* Sin el marco, una cabecera con el titulo a la izquierda y el boton a la derecha
     queda flotando: son dos cosas a 1.200px de distancia sin nada que las relacione,
     y el bloque no se lee como un bloque. La linea de abajo hace ese trabajo y ademas
     marca donde arranca la seccion. Es lo mismo que ya venia haciendo .table-head,
     que fue la unica cabecera que quedo bien de entrada. */
  .nom-status{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;padding:12px 0;border-bottom:1px solid var(--border)}
  /* En Afiliados no: ahi el bloque tiene su cuadro y la linea sobraria. */
  #view-padron .nom-status{border-bottom:0}
  .nom-status b,.nom-status span,#nomStatusText{display:block}
  #nomStatusText{min-width:0}
  .nom-status span,.nom-muted{color:var(--text-2);font-size:11.5px;line-height:1.3}
  /* Nomencladores: la cabecera va en UN renglon (12/09/2026). Lo que hay cargado a
     la izquierda y el boton a la derecha; el mes se pregunta al apretarlo. Se pisa solo
     este id y no .nom-status, que lo comparten otras seis pantallas. */
  #nomStatus{padding:9px 0 12px;gap:12px}
  #nomStatus #nomStatusText{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
  #nomStatus #nomStatusText b{display:inline;font-size:13.5px}
  #nomStatus .nom-head-meta{display:inline;color:var(--text-2);font-size:11.5px}
  #nomStatus .nom-upload .btn{gap:7px;white-space:nowrap}
  .ome-topbar{justify-content:flex-start;padding:8px 0 12px;margin-bottom:14px}
  .ome-topbar .nom-upload{display:grid;grid-template-columns:240px minmax(300px,1fr);gap:10px;width:100%;align-items:end}
  .ome-topbar .nom-upload .field{min-width:0!important;margin:0}
  .ome-topbar .inp{height:36px;border-radius:9px;font-size:13px}
  @media(max-width:980px){ .ome-topbar .nom-upload{grid-template-columns:1fr} }
  .nom-cols{font-size:12px;color:var(--text-2);white-space:nowrap}
  .nom-filters{display:grid;grid-template-columns:minmax(170px,1fr) 72px minmax(240px,2fr) minmax(160px,1fr) minmax(140px,.8fr) minmax(170px,1fr);gap:12px;margin-bottom:10px;padding:12px 0}
  .nom-filters .field{margin:0}
  .ome-card{margin-bottom:8px;padding:12px 0}
  .ome-card .client-card-head{margin-bottom:10px}
  .ome-card .client-card-head h3{font-size:15px}
  .ome-card .inp{height:38px;border-radius:9px;font-size:13px}
  .ome-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px}
  .ome-grid .field{margin:0}
  .ome-grid .field span,.nom-upload .field span{display:block;font-size:11.5px;font-weight:700;color:var(--text-2);margin-bottom:5px}
  .ome-span-2{grid-column:span 2}
  .ome-span-all{grid-column:1/-1}
  .ome-textarea{height:58px!important;min-height:58px;resize:vertical;padding-top:9px;line-height:1.35}
  .ome-actions-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
  .ome-practice-field{position:relative}
  .ome-suggestions{position:absolute;left:0;right:0;top:calc(100% + 6px);border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:320px;background:var(--surface);box-shadow:var(--shadow);z-index:45}
  .ome-suggestions button{width:100%;border:0;border-bottom:1px solid var(--border);background:var(--surface);color:var(--text);display:grid;grid-template-columns:84px minmax(0,1fr) 120px;gap:10px;text-align:left;padding:10px 12px;align-items:center}
  .ome-suggestions button:last-child{border-bottom:0}
  .ome-suggestions button:hover{background:var(--hover)}
  .ome-suggestions b{font-variant-numeric:tabular-nums;color:var(--text)}
  .ome-suggestions .ome-sug-name{font-weight:750;white-space:normal;line-height:1.25}
  .ome-suggestions .ome-sug-module{display:block;color:var(--text-2);font-size:11.5px;font-weight:500;margin-top:2px}
  .ome-suggestions .ome-sug-money{color:var(--text-2);font-size:12px;text-align:right;white-space:nowrap}
  .ome-result-empty{padding:16px;text-align:center;color:var(--text-2)}
  .ome-result-card{padding:16px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
  .ome-result-card b{display:block;font-size:18px;color:var(--text)}
  .ome-result-card span{display:block;color:var(--text-2);font-size:12.5px}
  .ome-result-card code{font-size:20px;font-weight:800;color:var(--turq-d);background:var(--celeste);border-radius:8px;padding:5px 9px}
  .ome-result-card.err code{color:var(--error);background:var(--error-bg)}
  .nom-delete-field{max-width:72px}
  .icon-danger-btn{width:42px;height:42px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text-2);display:grid;place-items:center}
  .icon-danger-btn:hover{border-color:var(--error);color:var(--error);background:var(--error-bg)}
  .icon-danger-btn svg{width:17px;height:17px}
  .multi-select{position:relative}
  .multi-trigger{display:flex;align-items:center;justify-content:space-between;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .multi-trigger::after{content:"";width:9px;height:9px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(45deg) translateY(-2px);margin-left:10px;flex:0 0 auto}
  .multi-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;display:none;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);z-index:35;overflow:hidden}
  .multi-menu.show{display:block}
  .multi-menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-bottom:1px solid var(--border);background:var(--hover);font-size:11.5px;font-weight:750;color:var(--text-2)}
  .multi-menu-head button{border:0;background:transparent;color:var(--turq);font-size:11.5px;font-weight:750;padding:2px 4px}
  .multi-search{width:calc(100% - 16px);margin:8px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:12.5px}
  .multi-search:focus{outline:none;border-color:var(--turq)}
  .multi-options{max-height:260px;overflow:auto;padding:6px}
  .multi-option{display:flex;align-items:flex-start;gap:8px;padding:7px 8px;border-radius:8px;font-size:12.5px;line-height:1.25;color:var(--text);cursor:pointer}
  .multi-option:hover{background:var(--hover)}
  .multi-option input{width:15px;height:15px;margin:0;accent-color:var(--turq);flex:0 0 auto}
  .multi-empty{padding:12px;color:var(--text-2);font-size:12.5px}
  .nom-table{border-radius:12px}
  .nom-table .table-head{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);background:transparent}
  .nom-table .table-head b,.nom-table .table-head span{display:block}
  .nom-table .table-head span{color:var(--text-2);font-size:11.5px;margin-top:1px}
  .nom-results-table{min-width:1040px;table-layout:fixed}
  .nom-results-table .col-module{width:175px}
  .nom-results-table .col-practice{width:430px}
  .nom-results-table .col-type{width:170px}
  .nom-results-table .col-scope{width:130px}
  .nom-results-table .col-total{width:150px}
  .nom-results-table .col-auth{width:130px}
  .nom-results-table th{padding:6px 12px;font-size:9.5px;background:#f7f9fc}
  .nom-results-table td{padding:5px 12px;font-size:12px;line-height:1.2}
  .nom-results-table tbody tr:hover{background:#fbfdff}
  .nom-code{font-weight:750;color:var(--text);line-height:1.15}
  .nom-practice-line{display:flex;align-items:baseline;gap:8px;max-width:100%}
  .nom-practice-line .nom-code{flex:0 0 auto}
  .nom-desc{font-weight:650;max-width:100%;line-height:1.2}
  .nom-type{color:var(--text);font-size:11.5px}
  .nom-money b{font-size:12.5px}
  .nom-auth{color:var(--text-2)}
  .scope-badge{display:inline-flex;align-items:center;gap:6px;min-height:22px;border-radius:999px;padding:0 9px;font-size:11px;font-weight:750;white-space:nowrap}
  .scope-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
  .scope-ambulatorio{background:#e4f8f6;color:#0b817e}
  .scope-internacion{background:var(--info-bg);color:var(--info)}
  .scope-otros{background:#eef2f7;color:var(--text-2)}
  [data-theme="dark"] .nom-results-table th{background:var(--surface-2)}
  [data-theme="dark"] .nom-results-table tbody tr:hover{background:var(--hover)}
  [data-theme="dark"] .scope-ambulatorio{background:#123b3a;color:#66d5d0}
  [data-theme="dark"] .scope-otros{background:#2a3942;color:#aebac1}
  .muted-cell{color:var(--text-2);padding:18px!important;text-align:center}

  /* clientes */
  .client-layout{display:grid;grid-template-columns:238px minmax(0,1fr);gap:14px}
  .client-list{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:7px;box-shadow:var(--shadow-sm);align-self:start}
  .client-list-item{width:100%;border:0;background:transparent;border-radius:9px;padding:10px 11px;text-align:left;color:var(--text);display:grid;gap:2px}
  .client-list-item strong{font-size:13px;line-height:1.25}
  .client-list-item span{font-size:11.5px;color:var(--text-2)}
  .client-list-item:hover,.client-list-item.active{background:var(--hover)}
  .client-list-item.active{box-shadow:inset 3px 0 0 var(--turq)}
  .client-detail{display:grid;gap:10px;min-width:0}
  /* Mismo criterio que .card: las pantallas del cliente son una hoja, no un tablero.
     Lo que SI sigue siendo caja son las tarjetas de mes (.mescurso-card), que tienen
     regla propia unas lineas mas abajo y no pasan por aca. */
  .client-top,.client-card,.client-nomenclador{background:transparent;border:0;border-radius:0;box-shadow:none}
  .client-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0}
  .crumb{font-size:11.5px;color:var(--text-2);margin-bottom:3px}
  .client-top h2{margin:0;font-size:19px;line-height:1.2}
  .client-status{background:var(--success-bg);color:var(--success);border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:750;white-space:nowrap}
  [data-theme="dark"] .client-status{color:#3fae6f}  /* el verde del tema claro daba 3,61 sobre el fondo oscuro; este da 5,47 */
  .client-status.muted{background:var(--hover);color:var(--text-2)}
  .client-up-header{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);border-radius:999px;padding:2px 4px 2px 10px;font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .client-up-header b{color:var(--text);font-weight:700}
  .client-up-header .icon-btn.mini{padding:2px}
  /* Centro que todavía es un POTENCIAL (en análisis): se avisa en la cabecera,
     que es lo que se ve entre en la solapa que entre. */
  .client-potencial{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
  .client-potencial .pot-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:var(--warning-fg);background:var(--warning-bg);border:1px solid color-mix(in srgb,var(--warning) 38%,var(--border));border-radius:999px;padding:3px 10px;white-space:nowrap}
  .client-potencial .btn{height:28px;padding:0 11px;font-size:12px}
  .client-tabs{display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .client-tabs::-webkit-scrollbar{display:none}
  .client-tabs button{border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:999px;flex-shrink:0;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
  .client-tabs button:hover{background:var(--hover);color:var(--text)}
  .client-tabs button.active{background:var(--petrol);color:#fff;border-color:var(--petrol)}
  /* Inicio del operador_clinica: "Pendientes en tu centro", un bloque por
     período (mes en curso / sin cerrar) con sus 3 categorías clickeables. */
  .centro-ini-cuerpo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;padding:14px 16px 16px}
  .centro-ini-periodo{border:1px solid var(--border);border-radius:12px;padding:12px 13px;background:var(--surface-2)}
  .centro-ini-per-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
  .centro-ini-per-head b{font-size:13.5px}
  .centro-ini-per-head .mescurso-chip.live{background:var(--success-bg);color:var(--success)}
  .centro-ini-ayuda{display:block;font-size:11px;color:var(--text-2);font-weight:400;margin-top:1px}
  /* Herramientas de NS como pestaña del cliente (rol operador): mismo chip que
     las solapas, pero separadas por una línea para que se lea que son otra
     familia (solapas del cliente | herramientas sobre ese cliente). */
  .client-tool-tabs{display:flex;gap:7px;align-items:center;flex-shrink:0}
  .client-tool-tabs:not(:empty){margin-left:5px;padding-left:12px;border-left:1px solid var(--border)}
  .client-section{display:block}
  .client-grid{display:grid;grid-template-columns:minmax(320px,.62fr) minmax(0,1.55fr);gap:14px}
  .client-card{padding:0;margin-bottom:20px}
  .client-card:last-child{margin-bottom:0}
  .client-info-card{padding:13px 0}
  .client-card h3,.client-nom-head h3{margin:0 0 10px;font-size:14.5px}
  .client-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
  /* Mismo motivo que arriba, para los titulos de seccion que estan dentro de una
     pantalla plana (Generar OME: "Datos de la orden" con su boton al otro extremo).
     Solo los que cuelgan derecho de un .card de una pantalla: los de adentro de los
     paneles de Inicio y de Afiliados ya tienen el cuadro que los contiene. */
  .content > section .card > .client-card-head{border-bottom:1px solid var(--border);padding-bottom:10px}
  .client-card-head h3{margin:0}
  .client-info-actions{display:flex;gap:6px;flex:0 0 auto}
  .dashboard-head{align-items:flex-end}
  .dashboard-head p{margin:2px 0 0;color:var(--text-2);font-size:12px}
  .client-dashboard-controls{display:grid;grid-template-columns:170px 170px auto;gap:9px;align-items:end}
  .dashboard-export{display:flex;flex-direction:column;gap:6px}
  .dashboard-export .field-lbl{font-size:11.5px;font-weight:600;color:var(--text-2)}
  .dashboard-export>div{display:flex;gap:8px}
  .dashboard-export .btn{height:36px;border-radius:9px;font-size:12.5px;gap:6px;padding:0 12px}
  .client-dashboard-controls .field{margin:0}
  .client-dashboard-controls .field span{display:block;font-size:11px;font-weight:750;color:var(--text-2);margin-bottom:4px}
  .client-dashboard-controls .inp{height:36px;border-radius:9px;font-size:12.5px}
  .dashboard-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
  .dashboard-kpis div{border:1px solid var(--border);border-radius:10px;background:var(--surface-2);padding:10px 11px}
  @media(min-width:981px) and (max-width:1200px){ .dashboard-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
  .dashboard-kpis b,.dashboard-kpis span,.dashboard-kpis small{display:block}
  .dashboard-kpis b{font-size:16px;line-height:1.2}
  .dashboard-kpis span{font-size:11px;color:var(--text-2);margin-top:2px}
  .dashboard-kpis small{font-size:10.5px;color:var(--text-2);margin-top:4px}
  .dashboard-kpis .dashboard-delta{display:inline-flex;align-items:center;gap:5px;font-weight:750;margin-top:8px;padding:3px 8px;border-radius:999px;font-size:11px}
  .dashboard-kpis .dashboard-delta.good{color:var(--success);background:var(--success-bg)}
  .dashboard-kpis .dashboard-delta.bad{color:var(--error);background:var(--error-bg)}
  .dashboard-kpis div.kpi-clickable{cursor:pointer;transition:border-color .15s ease,background .15s ease}
  .dashboard-kpis div.kpi-clickable:hover{border-color:var(--turq);background:var(--hover)}
  .dashboard-delta-arrow{font-size:9px;line-height:1}
  .dashboard-delta-pct{font-weight:600;opacity:.75}
  .mod-share-row{display:flex;align-items:center;gap:7px;margin-top:5px}
  .mod-neto-line{display:flex;align-items:center;gap:8px}
  .mod-neto-line b{white-space:nowrap}
  .mod-fuera-corte{font-size:11px;font-weight:700;color:var(--warning);white-space:nowrap;font-variant-numeric:tabular-nums}
  .mod-bar{flex:0 0 120px;height:4px;border-radius:3px;background:var(--hover);overflow:hidden;margin-left:auto}
  .mod-bar-fill{height:100%;border-radius:3px;background:var(--turq)}
  .mod-share{font-size:11px;font-weight:750;color:var(--turq-d);font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
  .mod-prev{font-size:10.5px;font-weight:650;color:var(--text-2);font-variant-numeric:tabular-nums;margin-top:2px}
  .mod-neto-prev{font-size:11px;color:var(--text-2);font-variant-numeric:tabular-nums;margin-top:4px;display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:wrap}
  .dashboard-detail-scroll .cmp-cell{display:flex;flex-direction:column;gap:1px}
  .dashboard-detail-scroll td.tnum .cmp-cell{align-items:center}
  .dashboard-detail-scroll td.nom-money .cmp-cell{align-items:flex-end}
  /* Resumen ejecutivo */
  .dashboard-resumen{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--turq);border-radius:10px;padding:12px 14px;margin-bottom:12px;font-size:13.5px;line-height:1.55;color:var(--text)}
  .dashboard-resumen b{color:var(--text)}
  .resumen-var{font-weight:800;padding:1px 7px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .resumen-var.pos{color:var(--success);background:var(--success-bg)}
  .resumen-var.neg{color:var(--error);background:var(--error-bg)}
  .resumen-hint{color:var(--text-2)}
  /* Valor del mes comparado en tarjetas KPI */
  .dashboard-kpis .kpi-prev{display:block;font-size:10.5px;color:var(--text-2);margin-top:3px;font-variant-numeric:tabular-nums}
  /* Ranking "Qué explica la variación" */
  .dashboard-ranking{margin-bottom:14px}
  .rk-head{font-size:13px;font-weight:750;color:var(--text);margin:2px 0 8px}
  .rk-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:640px){ .rk-cols{grid-template-columns:1fr} }
  .rk-col{border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--surface-2)}
  .rk-col-title{font-size:11.5px;font-weight:750;letter-spacing:.02em;margin-bottom:8px}
  .rk-col-title.pos{color:var(--success)}
  .rk-col-title.neg{color:var(--error)}
  .rk-item{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--border)}
  .rk-item:first-of-type{border-top:0}
  .rk-mod{flex:1;min-width:0;font-size:12.5px}
  .rk-right{text-align:right;white-space:nowrap}
  .rk-net{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
  .rk-net.pos{color:var(--success)}
  .rk-net.neg{color:var(--error)}
  .rk-deltas{display:flex;gap:6px;justify-content:flex-end;margin-top:2px}
  .rk-sub{font-size:10.5px;font-weight:650;color:var(--text-2);font-variant-numeric:tabular-nums}
  .rk-empty{font-size:12px;color:var(--text-2);padding:6px 0}
  /* Toggle de orden de la tabla de módulos */
  .dashboard-module-sort{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:11.5px;color:var(--text-2)}
  .dashboard-module-sort button{border:1px solid var(--border);background:var(--surface);color:var(--text-2);border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:650;cursor:pointer}
  .dashboard-module-sort button.active{background:var(--turq);border-color:var(--turq);color:#04302f}
  /* Filtro de módulos de la tabla (seleccionar 1+ y ver solo esos) */
  .dashboard-module-filter{position:relative;margin-bottom:8px}
  .dmf-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .dmf-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .dmf-btn:hover{border-color:var(--turq)}
  .dmf-count{background:var(--turq);color:#04302f;border-radius:999px;min-width:16px;height:16px;font-size:10px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
  .dmf-chips{display:flex;gap:6px;flex-wrap:wrap}
  .dmf-chip{display:inline-flex;align-items:center;gap:4px;background:var(--celeste);color:#0f7f7c;border-radius:999px;padding:3px 4px 3px 9px;font-size:11px;font-weight:650;max-width:260px}
  .dmf-chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:2px 6px;border-radius:999px}
  .dmf-chip button:hover{background:rgba(0,0,0,.08)}
  .dmf-clear{border:0;background:transparent;color:var(--turq-d);font-size:11.5px;font-weight:650;cursor:pointer;text-decoration:underline;padding:0}
  .dmf-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:20;width:300px;max-width:90vw;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.28);padding:10px}
  .dmf-pop-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
  .dmf-pop-head .inp{flex:1;height:32px;font-size:12.5px;padding:0 10px}
  .dmf-pop-close{border:0;background:transparent;color:var(--text-2);font-size:18px;cursor:pointer;line-height:1;padding:0 4px}
  .dmf-pop-list{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:1px}
  .dmf-pop-list label{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:7px;font-size:12.5px;cursor:pointer}
  .dmf-pop-list label:hover{background:var(--hover)}
  .dmf-pop-list b{font-size:11px;color:var(--text-2)}
  .dmf-pop-actions{display:flex;justify-content:space-between;gap:8px;margin-top:8px;border-top:1px solid var(--border);padding-top:8px}
  .dmf-summary-row td{background:var(--celeste);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
  .dmf-summary-row .mod-share{color:#0f7f7c}
  /* Capita del afiliado (Mi Cartilla PAMI) */
  .capita-loading{padding:20px 0;text-align:center;color:var(--text-2);font-size:13px}
  .capita-destacados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
  .capita-resto-head{font-size:11px;color:var(--text-2);text-transform:uppercase;font-weight:750;letter-spacing:.04em;margin:4px 0 8px}
  .capita-resto{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;max-height:320px;overflow:auto}
  .capita-card{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface-2)}
  .capita-card--destacado{border-color:var(--turq);background:var(--celeste)}
  .capita-card-modulo{font-size:10.5px;color:var(--text-2);text-transform:uppercase;font-weight:750;letter-spacing:.03em;margin-bottom:3px}
  .capita-card-prestador{font-weight:700;font-size:14px;color:var(--text);margin-bottom:2px}
  .capita-card--destacado .capita-card-prestador{font-size:15.5px}
  .capita-card-dato{font-size:12px;color:var(--text-2)}
  .capita-card-red{display:block;margin-top:4px;font-size:11px;color:var(--turq-d);font-weight:650}
  .capita-card-vacio{font-size:12.5px;color:var(--text-2);font-style:italic}
  @media (max-width:640px){ .capita-destacados{grid-template-columns:1fr} }
  /* Cotejo por módulo vs PAMI */
  .cotejo-tablewrap{margin-top:12px;overflow-x:auto}
  .cotejo-table{width:100%;border-collapse:collapse;font-size:13px}
  .cotejo-table th{text-align:left;font-size:11px;color:var(--text-2);font-weight:700;padding:6px 10px;border-bottom:1px solid var(--border)}
  .cotejo-table th.nom-money,.cotejo-table td.nom-money{text-align:right;font-variant-numeric:tabular-nums}
  .cotejo-table td{padding:6px 10px;border-bottom:1px solid var(--border)}
  .cotejo-table tr.cotejo-gap{background:var(--error-bg)}
  .cotejo-table tr.cotejo-row{cursor:pointer}
  .cotejo-table tr.cotejo-row:hover td{filter:brightness(.97);text-decoration:none}
  .cotejo-table tr.cotejo-row:hover td:first-child{box-shadow:inset 3px 0 0 var(--turq)}
  .debit-motivo{color:var(--text-2)}
  .cotejo-table td.pos{color:var(--success)}
  .cotejo-table td.neg{color:var(--error)}
  .cotejo-table tfoot td{border-top:2px solid var(--border);border-bottom:0;padding-top:8px}
  .cotejo-hint{font-size:11.5px;margin-top:8px}
  .cotejo-ajuste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:12px;border:1px solid var(--turq);background:var(--celeste);border-radius:10px}
  .cotejo-ajuste .nom-muted{font-size:12px;flex:1;min-width:220px}
  .cotejo-resumen{padding:10px 12px;border-radius:8px;font-size:13px;margin:12px 0}
  .cotejo-resumen.bad{background:var(--error-bg);color:var(--error)}
  .cotejo-resumen.ok{background:var(--success-bg);color:var(--success)}
  .cotejo-resumen b{color:inherit}
  .cotejo-table tr.cotejo-toggle td{text-align:center;padding:8px!important;background:var(--surface-2)}
  .btn.cotejo-pendiente{border-color:var(--warning);color:var(--warning-fg);background:var(--warning-bg)}
  .btn.cotejo-pendiente small{font-weight:800;font-size:10.5px;margin-left:2px}
  .pami-ok{color:var(--success);font-weight:650;margin-top:8px;font-size:12.5px;line-height:1.5}
  .btn.btn-done,.btn.btn-done:disabled{background:var(--success-bg)!important;color:var(--success)!important;border:1px solid var(--success)!important;cursor:default!important;opacity:1!important;box-shadow:none!important}
  .app-update-banner{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--turq);color:#04302f;padding:9px 14px;font-size:13px;font-weight:650;box-shadow:0 2px 10px rgba(0,0,0,.18)}
  .app-update-banner button{background:#fff;color:var(--turq-d);border:0;border-radius:999px;padding:5px 16px;font-weight:750;cursor:pointer;font-size:12.5px}
  .pami-umbral-alert{background:var(--warning-bg);border:1px solid var(--warning);border-radius:8px;padding:10px 12px;margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--text)}
  .pami-umbral-alert b{color:var(--text)}
  /* Estado de débitos por reporte (falta confirmar / confirmados) */
  .report-badges{margin-top:6px}
  .debit-status{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;border:1px solid transparent;cursor:pointer;line-height:1.2}
  .debit-status.pendiente{color:var(--warning-fg);background:var(--warning-bg);border-color:var(--warning)}
  .debit-status.confirmado{color:var(--success);background:var(--success-bg);border-color:var(--success)}
  .debit-status:hover{filter:brightness(.97)}
  .dashboard-trend{margin-top:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);padding:12px 14px}
  .dashboard-trend-title{font-size:10.5px;font-weight:750;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;display:flex;align-items:baseline;gap:8px}
  .dashboard-trend-hint{font-size:10px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text-3,var(--text-2));opacity:.75}
  .dashboard-trend-bars{display:flex;align-items:flex-end;gap:8px;height:118px}
  .dtb{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;background:transparent;border:0;cursor:pointer;padding:6px 0 4px;border-radius:9px;transition:background .15s ease}
  .dtb-flag{position:absolute;top:16px;left:-4px;font-size:12px;line-height:1;cursor:help;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
  .dtb:hover,.dtb:focus-visible{background:var(--hover)}
  .dtb:focus-visible{outline:2px solid var(--turq);outline-offset:-2px}
  .dtb-area{flex:1;width:100%;min-height:0;display:flex;align-items:flex-end;justify-content:center}
  .dtb-col{display:block;width:100%;max-width:44px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#9bb6cd,#7593b0);box-shadow:0 2px 5px rgba(15,40,60,.2);transition:transform .15s ease,box-shadow .15s ease}
  .dtb:hover .dtb-col{transform:translateY(-3px);box-shadow:0 6px 12px rgba(15,40,60,.3)}
  .dtb.hot .dtb-col{background:linear-gradient(180deg,var(--turq),var(--turq-d));box-shadow:0 2px 6px rgba(15,120,110,.32)}
  .dtb.hot:hover .dtb-col{box-shadow:0 6px 14px rgba(15,120,110,.4)}
  .dtb-amt{font-size:10.5px;font-weight:750;color:var(--text-2);font-variant-numeric:tabular-nums}
  .dtb.hot .dtb-amt{color:var(--turq-d)}
  .dtb-mo{font-size:10.5px;color:var(--text-2);font-weight:600}
  /* El aumento del nomenclador era un recuadro y, con todo lo demas plano, se leia
     como si fuera de otra pantalla. Pasa a franja: barra de color a la izquierda y
     fondo tenue de lado a lado, que resalta igual sin ser una caja aparte. Mismo
     recurso que ya usaba .dashboard-resumen. Los chips de adentro SI conservan su
     borde: son pildoras, no contenedores. */
  .nom-increase{border:0;border-left:3px solid var(--turq);border-radius:0;padding:13px 16px 13px 14px;background:var(--celeste);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  .nom-inc-ic{width:42px;height:42px;border-radius:12px;background:var(--turq);color:#04302f;display:grid;place-items:center;font-size:21px;flex:0 0 auto}
  .nom-inc-txt{flex:1;min-width:200px}
  .nom-inc-lead{font-size:12.5px;color:var(--text-2);font-weight:600}
  .nom-inc-lead b{color:var(--text)}
  .nom-inc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
  .nom-inc-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text)}
  .nom-inc-chip.up{border-color:var(--success);background:var(--success-bg)}
  .nom-inc-chip.up b{color:var(--success-fg)}
  .nom-inc-chip.down{border-color:var(--error);background:var(--error-bg)}
  .nom-inc-chip.down b{color:var(--error-fg)}
  .dashboard-nomnote{margin-top:8px;border-radius:10px;padding:9px 12px;font-size:12.5px;line-height:1.45;display:flex;gap:8px;align-items:flex-start}
  .dashboard-nomnote .nn-ic{flex:0 0 auto}
  .dashboard-nomnote b{color:var(--text)}
  .dashboard-nomnote.warn{background:var(--warning-bg);border:1px solid var(--warning);color:var(--text)}
  .dashboard-nomnote.flat{background:var(--success-bg);border:1px solid var(--success);color:var(--text)}
  .dashboard-module-detail .dashboard-detail-scroll table{min-width:360px}
  .client-pami-card{max-width:640px;margin-top:16px}
  .pami-help{margin:0 0 12px;font-size:12.5px;color:var(--text-2);line-height:1.45}
  .pami-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pami-form .field{margin:0}
  .pami-actions{display:flex;align-items:center;gap:12px;margin-top:14px}
  @media(max-width:560px){ .pami-form{grid-template-columns:1fr} }
  .bandeja-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:600px}
  .bandeja-table th{background:var(--surface-2);text-align:left;padding:8px 10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);border-bottom:1px solid var(--border);white-space:nowrap}
  .bandeja-table td{padding:7px 10px;border-bottom:1px solid var(--border);white-space:nowrap;color:var(--text)}
  /* OSDOP: calculadora de facturación (Scheffelaar) */
  .osdop-table{width:100%;max-width:640px;border-collapse:collapse;font-size:13px}
  .osdop-table th{background:var(--surface-2);text-align:left;padding:9px 10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);border-bottom:1px solid var(--border)}
  .osdop-table td{padding:7px 10px;border-bottom:1px solid var(--border);color:var(--text)}
  .osdop-table th.num,.osdop-table td.num{text-align:right}
  .osdop-table tfoot th{padding:10px;border-top:2px solid var(--border);border-bottom:0;font-size:13px}
  .osdop-table tfoot th.num{font-size:16px;color:var(--turq-d);font-variant-numeric:tabular-nums}
  .osdop-table input.inp{height:34px;text-align:right;font-variant-numeric:tabular-nums;max-width:130px}
  .osdop-table select.inp{height:34px;max-width:170px}
  .osdop-table .osdop-subtotal{font-weight:700;font-variant-numeric:tabular-nums}
  .osdop-table .osdop-col-acciones{width:38px}
  .osdop-table .icon-danger-btn.mini{width:30px;height:30px}
  .osdop-add-btn{margin-top:10px}
  .osdop-print-head{display:none}
  /* Exportar a PDF = imprimir solo la tarjeta de OSDOP (nada de sidebar, topbar
     ni pestañas), con un encabezado con el nombre del cliente y la fecha.
     Cruzas (#czPrintArea) usa su propio bloque @media print más abajo, con una
     estrategia distinta (display:none sobre #root en vez de visibility:hidden
     por toda la página) — ver el comentario ahí para el porqué. */
  .cz-print-area{display:none}
  .cz-historial-item:hover{background:var(--surface-2)}
  .cz-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
  .cz-tag.ok{background:color-mix(in srgb,#12b3a6 14%,var(--surface));border-color:color-mix(in srgb,#12b3a6 40%,var(--border));color:#0a7d73}
  /* Colores metalizados de estado (Cruzas): gradiente + sombra interior en vez
     de un relleno plano - un pastel plano con la palabra encima del mismo
     color era ilegible ("VERDE" sobre fondo verde clarito). El color ya dice
     todo, por eso el pill de cada fila no lleva texto - solo el popover al
     tocarlo aclara cuál es cuál (title + los 5 para elegir). */
  .cz-swatch{width:26px;height:26px;border-radius:8px;border:1px solid rgba(0,0,0,.25);cursor:pointer;padding:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 3px rgba(0,0,0,.25);transition:transform .1s ease}
  .cz-swatch:hover{transform:scale(1.08)}
  .cz-swatch-lg{width:34px;height:34px;border-radius:9px}
  .cz-swatch-tiny{width:11px;height:11px;border-radius:50%;cursor:default;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
  .cz-leyenda-item{display:inline-flex;align-items:center;gap:6px;margin-right:16px;font-size:12px;color:var(--text-2)}
  .cz-swatch-verde{background:linear-gradient(135deg,#8bf0ab 0%,#2fa360 45%,#155c33 100%)}
  .cz-swatch-amarillo{background:linear-gradient(135deg,#ffe694 0%,#e8b013 45%,#93700a 100%)}
  .cz-swatch-naranja{background:linear-gradient(135deg,#ffbb7a 0%,#e8720f 45%,#93460a 100%)}
  .cz-swatch-rojo{background:linear-gradient(135deg,#ff9d9d 0%,#d63031 45%,#7d1c1d 100%)}
  .cz-swatch-gris{background:linear-gradient(135deg,#e7eaed 0%,#9aa3ab 45%,#5c646b 100%)}
  .cz-color-popover{position:fixed;z-index:80;display:flex;gap:6px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
  .cz-chip-row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0;align-items:center}
  /* Semáforo: el color ya dice cuál es, el número es lo único que hace falta
     leer - nada de "VERDE: 233" repitiendo lo que el color ya muestra. */
  .cz-chip{font:inherit;font-size:13px;font-weight:800;letter-spacing:.02em;color:#fff;min-width:38px;height:38px;padding:0 10px;border-radius:999px;border:1px solid rgba(0,0,0,.2);cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);opacity:.85;transition:opacity .12s ease,box-shadow .12s ease,transform .12s ease;display:inline-flex;align-items:center;justify-content:center}
  .cz-chip:hover{opacity:1;transform:translateY(-1px)}
  .cz-chip.on{opacity:1;box-shadow:0 0 0 3px var(--ring),inset 0 1px 0 rgba(255,255,255,.35)}
  .cz-chip-mini{min-width:26px;height:22px;font-size:11px;padding:0 7px;cursor:default}
  .cz-chip-verde{background:linear-gradient(135deg,#4fcf82,#1f7d47)}
  .cz-chip-amarillo{background:linear-gradient(135deg,#f0c33e,#a9790a);color:#2b1e00;text-shadow:0 1px 0 rgba(255,255,255,.3)}
  .cz-chip-naranja{background:linear-gradient(135deg,#f0904a,#a9560a)}
  .cz-chip-rojo{background:linear-gradient(135deg,#e85c5d,#a11f20)}
  .cz-chip-gris{background:linear-gradient(135deg,#b9c0c6,#6b747c)}
  .cz-filtros{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
  .cz-filtros #czBuscar{max-width:320px}
  .cz-paginador{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
  /* Anchos fijos para que "Detalle" (la columna que importa leer entera) se
     lleve el espacio que sobra, en vez de repartirse parejo con columnas
     angostas como Beneficio o el pill de Estado. */
  #czPacientesTable{table-layout:fixed;width:100%}
  #czPacientesTable th:nth-child(1),#czPacientesTable td:nth-child(1){width:150px}
  #czPacientesTable th:nth-child(2),#czPacientesTable td:nth-child(2){width:90px}
  #czPacientesTable th:nth-child(3),#czPacientesTable td:nth-child(3){width:170px}
  #czPacientesTable th:nth-child(4),#czPacientesTable td:nth-child(4){width:160px}
  #czPacientesTable th:nth-child(5),#czPacientesTable td:nth-child(5){width:56px}
  #czPacientesTable td:nth-child(1),#czPacientesTable td:nth-child(2),#czPacientesTable td:nth-child(3),#czPacientesTable td:nth-child(4){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* "Nueva cruza": dos filas separadas en vez de un solo flex-wrap mezclando
     campos con label (dos líneas) y botones (una línea) - mezclados en la
     misma fila quedaban desalineados y el orden de wrap saltaba feo. */
  .cz-nueva-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
  .cz-nueva-row + .cz-nueva-row{margin-top:14px}
  .cz-nueva-row-acciones{align-items:center}
  @media print {
    body *{visibility:hidden}
    #osdopCard,#osdopCard *{visibility:visible}
    #osdopCard{position:absolute;top:0;left:0;width:100%;box-shadow:none;border:0}
    #osdopCard .client-card-head button{display:none}
    .osdop-print-head{display:block;margin-bottom:14px}
    .osdop-print-head .op-title{font-size:18px;font-weight:800;color:#000}
    .osdop-print-head .op-sub{font-size:12px;color:#555;margin-top:2px}
    .osdop-table input.inp{border:0;background:transparent;padding:0;height:auto;color:#000;-webkit-appearance:none;appearance:none}
    .osdop-table input.inp::-webkit-outer-spin-button,.osdop-table input.inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
    .osdop-table select.inp{border:0;background:transparent;padding:0;height:auto;color:#000;-webkit-appearance:none;appearance:none}
    .osdop-table th,.osdop-table td{color:#000;border-color:#ccc}
    .osdop-table tfoot th.num{color:#000}
    .osdop-table .osdop-col-acciones,.osdop-add-btn{display:none}
  }
  /* Cruzas: bloque @media print propio, aparte del de OSDOP de arriba.
     OSDOP oculta todo con visibility:hidden porque su página es corta y no se
     nota que ese truco no colapsa el alto de lo oculto. Cruzas sí lo sufre: con
     239 filas paginadas de por medio la página completa mide varias pantallas,
     y visibility:hidden deja ese alto ocupando lugar → salían ~5 hojas en
     blanco al final. Acá en cambio, exportarCrucePDF() pone la clase
     "cz-imprimiendo" en <body> antes de imprimir: eso oculta #root ENTERO con
     display:none (que sí colapsa alto de verdad) y muestra #czPrintArea, que
     vive fuera de #root a propósito (ver index.html) para no quedar oculto con él. */
  @media print {
    body.cz-imprimiendo > #root{display:none}
    /* El bloque de OSDOP de arriba oculta TODO con "body *{visibility:hidden}",
       y #czPrintArea también es descendiente de <body> - sin este override
       quedaría oculto por esa regla aunque display:block lo mostrara. Gana por
       especificidad (id+clase) sin tener que tocar la regla de OSDOP. */
    body.cz-imprimiendo #czPrintArea,body.cz-imprimiendo #czPrintArea *{visibility:visible}
    body.cz-imprimiendo #czPrintArea{display:block;position:static}
    #czPrintArea{font-family:Arial,Helvetica,sans-serif;color:#000;padding:0 4px}
    .cz-print-head{margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid #1F4E5F}
    .cz-print-head .op-title{font-size:19px;font-weight:800;color:#1F4E5F}
    #czPrintArea section{margin-bottom:22px}
    #czPrintArea section:last-child{margin-bottom:0}
    #czPrintArea h3{font-size:13px;font-weight:800;color:#fff;background:#1F4E5F;margin:0 0 8px;padding:6px 10px;page-break-after:avoid}
    #czPrintArea h4{font-size:11px;font-weight:700;color:#444;margin:12px 0 4px;text-transform:uppercase;letter-spacing:.03em}
    #czPrintArea p.cz-print-vacio{font-size:12px;color:#666;font-style:italic;margin:2px 0 0}
    /* Barra de resumen arriba de todo: el PDF debe leerse como un resumen
       ejecutivo antes que como una planilla - 3 conteos + el total valorizado
       en riesgo, de un vistazo, sin tener que entrar al detalle. */
    .cz-print-resumen{display:flex;border:1px solid #c7d0d4;margin-bottom:20px}
    .cz-print-resumen>div{flex:1;padding:10px 12px;border-right:1px solid #c7d0d4;text-align:center}
    .cz-print-resumen>div:last-child{border-right:0}
    .cz-print-resumen b{display:block;font-size:18px;color:#1F4E5F;font-variant-numeric:tabular-nums}
    .cz-print-resumen span{display:block;font-size:9.5px;color:#667079;text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
    .cz-print-resumen-total{background:#1F4E5F}
    .cz-print-resumen-total b,.cz-print-resumen-total span{color:#fff}
    #czPrintArea table{width:100%;border-collapse:collapse;margin-bottom:4px;font-size:10.5px}
    #czPrintArea td.cz-print-mes{background:#dfe6e9;color:#1F4E5F;font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.03em;border:1px solid #b9c4c9}
    #czPrintArea th{border:1px solid #8a9aa1;padding:5px 7px;text-align:left;color:#fff;background:#43606c;font-weight:700}
    #czPrintArea td{border:1px solid #ccc;padding:4px 7px;text-align:left;color:#000}
    #czPrintArea th.num,#czPrintArea td.num{text-align:right;font-variant-numeric:tabular-nums}
    #czPrintArea th.centro,#czPrintArea td.centro{text-align:center}
    #czPrintArea tr{page-break-inside:avoid}
    #czPrintArea tbody tr:nth-child(even) td{background:#f7f9fa}
    #czPrintArea tr.cz-print-total td{font-weight:800;border-top:2px double #1F4E5F;background:#e9eef0}
  }
  .cfg-block{margin-bottom:12px;border:1px solid var(--border);border-radius:10px;overflow:hidden}
  .cfg-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2)}
  summary.cfg-head{margin:0;padding:11px 12px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;background:var(--surface-2);user-select:none}
  summary.cfg-head::-webkit-details-marker{display:none}
  summary.cfg-head::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(45deg);transition:transform .15s ease}
  .cfg-block[open]>summary.cfg-head::after{transform:rotate(-135deg)}
  .cfg-count{font-weight:800;color:var(--turq);font-size:11px;letter-spacing:0}
  .cfg-block>.cfg-list{padding:10px 12px 0}
  .cfg-block>.cfg-add{padding:0 12px 12px}
  .cfg-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
  .cfg-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2)}
  .cfg-row .cfg-name{font-weight:600;color:var(--text);font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cfg-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
  .cfg-tag.on{background:var(--success-bg);color:var(--success)}
  /* El chip de la firma es un boton: se aprieta para verla. Se le nota que se
     puede apretar, si no nadie lo descubre. */
  /* La bajada de cada pestaña de Configuracion: dice de que son los datos de
     abajo, sin repetir el titulo de la pestaña. */
  .cfg-bajada{margin:0 0 14px;color:var(--text-2);font-size:12.5px;line-height:1.5;max-width:620px}
  .cfg-tag-btn{border:0;cursor:pointer;font:inherit;font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:999px}
  .cfg-tag-btn:hover{filter:brightness(.94)}
  /* "ya trae el sello": el tilde va junto a la firma, que es de lo que habla. */
  .cfg-sello{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-2);
    cursor:pointer;white-space:nowrap}
  .cfg-sello input{accent-color:var(--turq);margin:0}
  .cfg-firma-ver{margin:8px 0 2px;padding:10px 12px;background:var(--hover);border-left:3px solid var(--turq);
    display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  /* Fondo blanco siempre: la firma es un PNG con transparencia y sobre el gris
     oscuro del tema de noche el trazo negro no se ve. */
  .cfg-firma-ver img{max-width:260px;max-height:110px;background:#fff;padding:6px;border:1px solid var(--border)}
  .cfg-firma-nota{font-size:11.5px;color:var(--text-2);line-height:1.45;max-width:320px}
  .cfg-tag.off{background:var(--error-bg);color:var(--error)}
  .cfg-upload{font-size:12px;font-weight:600;color:var(--primary);cursor:pointer;white-space:nowrap}
  .cfg-upload input{display:none}
  .cfg-add{display:flex;gap:8px;align-items:center}
  .cfg-add .inp{flex:1}
  .cfg-empty{font-size:12.5px;color:var(--text-2);padding:2px}
  .lote-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:740px}
  .lote-table th{text-align:left;padding:7px 8px;border-bottom:1px solid var(--border);color:var(--text-2);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
  .lote-table td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:top}
  .lote-nom{font-weight:600;color:var(--text)}
  .lote-muted{font-size:11px;color:var(--text-2)}
  .lote-inp{height:30px;padding:0 8px;border-radius:7px;font-size:12px;min-width:118px;max-width:200px}
  select.lote-inp{padding-right:26px;background-position:right 8px center}
  .lote-inp.lote-req{border-color:var(--error);box-shadow:0 0 0 2px var(--error-bg)}
  .lote-row-off td{background:var(--surface-2);opacity:.7}
  .cfg-textoprev{font-size:11.5px;color:var(--text-2);padding:5px 2px 0;line-height:1.35}
  .inf-gen-layout{display:grid;grid-template-columns:minmax(0,560px) minmax(0,560px);gap:18px;align-items:start;justify-content:start}
  /* El formulario va al lado de la vista previa, que si tiene marco (es un lienzo).
     Sin el suyo las dos columnas quedaban desparejas: una enmarcada y la otra
     flotando al lado. Mismo criterio que en Afiliados — lo que esta una al lado de
     la otra lleva cuadro. */
  .inf-gen-layout #infFormCard{max-width:none;background:var(--surface);
    border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);
    padding:16px 17px}
  .inf-preview-live{position:sticky;top:76px;border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column;height:calc(100vh - 190px);min-height:420px}
  .inf-preview-bar{padding:10px 14px;border-bottom:1px solid var(--border);font-weight:700;font-size:13px;color:var(--text);background:var(--surface-2)}
  .inf-preview-bar span{font-weight:500;color:var(--turq-fg);font-size:12px}
  .inf-preview-stage{position:relative;flex:1;background:#f3f4f6;min-height:0}
  /* De noche el escenario va oscuro, como cualquier visor de PDF: el papel blanco del
     informe se recorta igual, y el cartel de "completá los datos" se lee (pasa de 1,80
     de contraste a 7,21 — con el fondo claro fijo era texto gris sobre gris claro). */
  [data-theme="dark"] .inf-preview-stage{background:var(--surface-2)}
  #infLiveFrame{width:100%;height:100%;border:0;display:none}
  .inf-preview-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:28px;color:var(--text-2);font-size:13px;line-height:1.5}
  @media(max-width:980px){ .inf-gen-layout{grid-template-columns:1fr} .inf-preview-live{display:none} }
  /* En celular: barras más juntas para que el form entre sin scrollear tanto. */
  @media(max-width:640px){
    #inf-tab-generar .field{margin-bottom:8px}
    #inf-tab-generar .field label{margin-bottom:4px}
    #inf-tab-generar .form-grid.two,#inf-tab-generar .form-grid.nombre-doc{gap:9px;margin-bottom:8px}
    #inf-tab-generar .inp{height:38px}
    #inf-tab-generar #infFormCard{padding:14px}
    #inf-tab-generar #infCamposWrap{margin-bottom:8px !important}
  }
  .inf-campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:7px 8px}
  .inf-campo{display:flex;flex-direction:column;gap:2px;min-width:0}
  .inf-campo.inf-wide{grid-column:span 2}
  .inf-campo span{font-size:10.5px;color:var(--text-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .inf-campo .inp{height:32px;padding:0 9px;border-radius:8px;font-size:12.5px}
  .cfg-valores{margin-top:8px;padding:10px;border:1px dashed var(--border);border-radius:9px;background:var(--surface-2)}
  .cfg-valores .cfg-scope-lbl{display:block;margin-bottom:8px}
  @media(max-width:560px){ .inf-campos{grid-template-columns:1fr 1fr} }
  /* Holter: campos en secciones plegables (Resumen / detalle / VFC / …) */
  .inf-grupos{display:block}
  .inf-grupo{border:1px solid var(--border);border-radius:9px;margin-bottom:7px;background:var(--surface-2)}
  .inf-grupo>summary{cursor:pointer;padding:7px 11px;font-weight:700;font-size:12px;color:var(--text-2);list-style:none;user-select:none}
  .inf-grupo>summary::-webkit-details-marker{display:none}
  .inf-grupo>summary:before{content:'▸';margin-right:6px;font-size:10px}
  .inf-grupo[open]>summary:before{content:'▾'}
  .inf-grupo>.inf-campos{padding:2px 11px 11px}
  /* Urodinamia: avisos de coherencia + pantalla de revisión */
  .inf-avisos{margin-top:10px;padding:8px 11px;border-radius:8px;background:color-mix(in srgb,#e8a13a 14%,var(--surface));border:1px solid color-mix(in srgb,#e8a13a 40%,var(--surface))}
  .inf-avisos-tit{font-size:12px;font-weight:700;color:#a15c00;margin-bottom:3px}
  .inf-avisos-list{margin:0;padding-left:18px;font-size:12.5px;color:var(--text)}
  .inf-avisos-list li{margin:1px 0}
  .rev-sec{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text-2);margin:14px 0 6px}
  .rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
  .rev-kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0;border-bottom:1px solid var(--border)}
  .rev-kv span{color:var(--text-2)}
  .rev-kv b{text-align:right}
  .rev-texto{font-size:13px;line-height:1.5}
  .rev-avisos{padding:8px 11px;border-radius:8px;background:color-mix(in srgb,#e8a13a 14%,var(--surface));border:1px solid color-mix(in srgb,#e8a13a 40%,var(--surface));font-size:12.5px}
  .rev-avisos ul{margin:4px 0 0;padding-left:18px}
  .rev-nota{margin-top:12px;font-size:12px;color:var(--text-2);font-style:italic}
  @media(max-width:560px){ .rev-grid{grid-template-columns:1fr} }
  .cfg-item{border:1px solid var(--border);border-radius:9px;background:var(--surface-2);padding:8px 10px}
  .cfg-item .cfg-row{border:0;background:transparent;padding:0}
  details.cfg-sub{margin-top:8px}
  .cfg-sub-head{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--turq);user-select:none;padding:3px 0}
  .cfg-sub-head::-webkit-details-marker{display:none}
  .cfg-sub-head::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s;flex:0 0 auto}
  details.cfg-sub[open] > .cfg-sub-head::after{transform:rotate(-135deg)}
  .cfg-sub-head .cfg-item-meta{font-weight:600;color:var(--text-2)}
  .cfg-sub > .cfg-scope{margin-top:8px}
  .cfg-scope{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
  .cfg-scope-lbl{font-size:11px;font-weight:700;color:var(--text-2);min-width:92px}
  .scope-chip{border:1px solid var(--border);background:transparent;color:var(--text-2);font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;cursor:pointer}
  .scope-chip:hover{border-color:var(--turq);color:var(--text)}
  .scope-chip.on{background:var(--turq);border-color:var(--turq);color:#04302f}
  .dashboard-compare{margin-top:10px;border:1px solid var(--border);border-radius:10px;background:var(--hover);padding:11px 13px;display:flex;flex-direction:column;align-items:stretch;gap:8px;font-size:12px;color:var(--text-2)}
  .dashboard-compare b{color:var(--text);font-size:12.5px}
  .dashboard-compare .good{color:var(--success);font-weight:750}
  .dashboard-compare .bad{color:var(--error);font-weight:750}
  .cmp-title{font-weight:700;font-size:13.5px;color:var(--text)}
  .cmp-table-wrap{overflow-x:auto}
  .cmp-table{width:100%;border-collapse:collapse;font-size:12.5px}
  .cmp-table th,.cmp-table td{padding:6px 10px;border-bottom:1px solid var(--border);text-align:left}
  .cmp-table th{font-size:10.5px;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
  .cmp-table td{color:var(--text)}
  .cmp-table .num{text-align:right;white-space:nowrap}
  .cmp-table td.good{color:var(--success);font-weight:700}
  .cmp-table td.bad{color:var(--error);font-weight:700}
  .cmp-table tbody tr:last-child td{border-bottom:0}
  .dashboard-module-wrap{margin-top:10px;border:1px solid var(--border);border-radius:10px;overflow:auto}
  .dashboard-module-table{min-width:560px}
  .dashboard-module-table th{padding:7px 10px;font-size:9.5px}
  .dashboard-module-table td{padding:7px 10px;font-size:12px}
  .dashboard-module-row:hover{background:var(--hover)}
  .dashboard-count-btn{height:28px;min-width:42px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-weight:800;cursor:pointer}
  .dashboard-count-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
  .dashboard-count-btn:disabled{cursor:default;color:var(--text-2);background:transparent;border-color:transparent}
  .mod-metric{display:flex;flex-direction:column;align-items:center;gap:4px}
  .dashboard-module-row .dashboard-delta,.nom-money .dashboard-delta{display:inline-flex;align-items:center;gap:3px;font-weight:750;font-size:10.5px;padding:2px 7px;border-radius:999px;white-space:nowrap}
  .dashboard-module-row .dashboard-delta.good,.nom-money .dashboard-delta.good{color:var(--success);background:var(--success-bg)}
  .dashboard-module-row .dashboard-delta.bad,.nom-money .dashboard-delta.bad{color:var(--error);background:var(--error-bg)}
  .dashboard-module-detail td{background:var(--surface-2);padding:0}
  .dashboard-detail-title{padding:9px 10px 6px;font-size:12px;font-weight:850;color:var(--text)}
  .dashboard-detail-scroll{max-height:280px;overflow:auto}
  .dashboard-detail-scroll table{min-width:860px}
  .dashboard-detail-scroll th{padding:7px 10px;font-size:9px}
  .dashboard-detail-scroll td{padding:7px 10px;font-size:11.5px;background:var(--surface)}
  .icon-btn.mini{width:32px;height:32px;border-radius:8px}
  .icon-btn.mini svg{width:16px;height:16px}
  .info-list{display:grid;gap:10px;margin:0}
  .info-list div{display:grid;gap:2px}
  .info-list .client-info-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .info-list .client-info-row-2{grid-template-columns:2fr 1fr;gap:14px}
  .info-list dt{font-size:10.5px;color:var(--text-2);text-transform:uppercase;font-weight:750;letter-spacing:.04em}
  .info-list dd{margin:0;font-weight:650;font-size:13px}
  .module-chip-list{display:flex;gap:7px;flex-wrap:wrap}
  .module-chip{display:inline-flex;gap:6px;align-items:center;background:var(--celeste);color:#0f7f7c;border-radius:999px;padding:4px 9px;font-size:11.5px;font-weight:650}
  .client-nomenclador{overflow:hidden}
  .client-nom-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:1px solid var(--border)}
  .client-nom-head h3{margin-bottom:2px}
  .client-nom-head p{margin:0;color:var(--text-2);font-size:12px}
  .client-nom-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
  .client-nom-actions .btn{height:34px;border-radius:8px;font-size:12px;padding:0 12px;gap:6px}
  .client-nom-controls{display:grid;grid-template-columns:170px minmax(220px,320px);gap:10px}
  .dash-hojas{margin:2px 0 16px}
  .report-model-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .report-model-grid div{border:1px solid var(--border);border-radius:10px;padding:11px;background:var(--surface-2)}
  .report-model-grid b,.report-model-grid span{display:block}
  .report-model-grid b{font-size:12px}
  .report-model-grid span{font-size:11.5px;color:var(--text-2);margin-top:2px}
  .report-upload-card{display:grid;gap:10px}
  .report-head-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
  .report-search{width:300px;height:36px;border-radius:9px;font-size:13px}
  .report-attach-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .report-attach-info h3{margin:0 0 2px;font-size:15px}
  .report-attach-info span{font-size:12.5px}
  .report-list-card .table-scroll{max-height:360px;overflow-y:auto}
  .pdf-options{display:flex;flex-direction:column;gap:8px}
  .pdf-options button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);cursor:pointer}
  .pdf-options button:hover{border-color:var(--turq);background:var(--hover)}
  .pdf-options button b{font-size:13.5px;color:var(--text)}
  .pdf-options button span{font-size:12px;color:var(--text-2)}
  .report-zero-panel{border:1px solid var(--warning);border-radius:12px;padding:12px 14px;margin-bottom:14px;background:var(--surface-2)}
  .report-zero-head{font-size:13px;color:var(--text);margin-bottom:10px}
  .report-zero-head b{color:var(--warning)}
  .report-zero-head span{color:var(--text-2);font-weight:400}
  .report-zero-list{display:flex;flex-direction:column;gap:8px}
  .report-zero-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface)}
  .report-zero-info{font-size:12.5px;color:var(--text);min-width:0}
  .report-zero-assign{display:flex;gap:8px;align-items:center}
  .report-zero-assign .inp{height:34px;width:130px}
  .nom-table .table-head.report-head{flex-direction:column;align-items:stretch;gap:12px}
  .report-head>div:first-child{display:flex;flex-direction:column;align-items:flex-start}
  .report-filter-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;align-items:end}
  .report-filter-bar .report-search{width:100%}
  .report-filter-bar .inp{height:36px;border-radius:9px;font-size:13px}
  .date-filter{display:grid;gap:3px;margin:0}
  .date-filter span{font-size:10.5px;font-weight:750;color:var(--text-2)}
  .report-list-card{overflow:hidden}
  .saved-report-table{min-width:1350px;table-layout:fixed}
  .saved-report-table th{padding:8px 10px;font-size:9.5px;background:#f7f9fc}
  .saved-report-table td{padding:8px 10px;font-size:12px}
  .saved-report-table th:nth-child(1){width:330px}
  .saved-report-table th:nth-child(2){width:160px}
  .saved-report-table th:nth-child(3){width:90px}
  .saved-report-table th:nth-child(4){width:135px}
  .saved-report-table th:nth-child(5){width:640px}
  .medicos-table{min-width:920px;table-layout:fixed}
  .medicos-table th{padding:7px 12px;font-size:9.5px;background:#f7f9fc}
  .medicos-table td{padding:9px 12px;font-size:12.5px;line-height:1.25}
  .medicos-table th:nth-child(1){width:23%}
  .medicos-table th:nth-child(2){width:21%}
  .medicos-table th:nth-child(3){width:31%}
  .medicos-table th:nth-child(4){width:10%}
  .medicos-table th:nth-child(5){width:15%;text-align:right}
  .medicos-table tbody tr:hover{background:#fbfdff}
  .medicos-table .muted-cell{padding:22px 12px;text-align:center}
  .med-main{min-width:0}
  .med-main b{display:block;font-size:12.5px;font-weight:800;color:var(--text);white-space:normal}
  .med-spec-wrap{display:flex;align-items:center;gap:7px;min-width:0}
  .med-spec{display:inline-flex;align-items:center;max-width:100%;min-height:26px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);padding:4px 8px;color:var(--text);font-size:12px;font-weight:650;line-height:1.2}
  .med-star{width:28px;height:28px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-2);display:grid;place-items:center;font-size:15px;font-weight:800;cursor:pointer;flex:0 0 auto}
  .med-star:hover{border-color:var(--warning);color:var(--warning)}
  .med-star.on{background:var(--warning-bg);border-color:color-mix(in srgb,var(--warning) 40%,var(--border));color:var(--warning-fg)}
  /* Médico con el usuario PAMI deshabilitado (bloqueado / clave vencida). */
  .icon-btn.mini.med-deshab-on{background:color-mix(in srgb,var(--error) 14%,var(--surface));border-color:color-mix(in srgb,var(--error) 45%,var(--border))}
  .icon-btn.mini.med-comodin-on{background:color-mix(in srgb,var(--turq) 16%,var(--surface));border-color:color-mix(in srgb,var(--turq) 45%,var(--border))}
  .med-deshab-badge{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--error);background:color-mix(in srgb,var(--error) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--error) 35%,var(--border));border-radius:999px;padding:2px 8px;vertical-align:middle}
  tr.medico-deshabilitado{opacity:.62}
  /* Estado del acceso a PAMI del médico (verificación). */
  .med-estado{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:750;border-radius:999px;padding:3px 9px;border:1px solid var(--border);white-space:nowrap}
  .med-estado-when{font-weight:600;opacity:.8}
  .med-estado.ok{background:var(--success-bg);border-color:color-mix(in srgb,var(--success) 30%,var(--border));color:var(--success)}
  .med-estado.bad{background:color-mix(in srgb,var(--error) 12%,var(--surface));border-color:color-mix(in srgb,var(--error) 38%,var(--border));color:var(--error)}
  .med-estado.warn{background:var(--warning-bg);border-color:color-mix(in srgb,var(--warning) 38%,var(--border));color:var(--warning)}
  .med-estado.prog{background:var(--surface-2);color:var(--text-2)}
  .med-estado.muted{background:var(--surface-2);color:var(--text-2);border-style:dashed}
  /* Plan Salud: conexión de la planilla. */
  .ps-conn{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
  .ps-badge{display:inline-flex;align-items:center;font-size:12px;font-weight:750;border-radius:999px;padding:3px 10px}
  .ps-badge.ok{background:var(--success-bg);color:var(--success);border:1px solid color-mix(in srgb,var(--success) 30%,var(--border))}
  .med-access{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .med-user,.med-pass{display:inline-flex;align-items:center;gap:5px;min-height:28px}
  .med-user code,.med-pass.saved{border:1px solid var(--border);border-radius:8px;background:var(--surface-2);padding:5px 8px;font-family:inherit;font-size:12px;font-weight:750;color:var(--text)}
  .med-pass.saved{background:var(--success-bg);border-color:color-mix(in srgb,var(--success) 28%,var(--border));color:var(--success)}
  .med-pass.missing,.med-user.muted{color:var(--text-2);font-size:12px;font-weight:650}
  .med-user .icon-btn.mini,.med-pass .icon-btn.mini{width:28px;height:28px;border-radius:7px}
  .med-user .icon-btn.mini svg,.med-pass .icon-btn.mini svg{width:14px;height:14px}
  .med-phone{color:var(--text-2);font-weight:650;white-space:nowrap}
  .medico-actions{gap:6px;align-items:center;justify-content:flex-end;white-space:nowrap}
  .medico-actions .icon-btn.mini,.medico-actions .icon-danger-btn.mini{width:31px;height:31px}
  tr.medico-sin-clave{opacity:.72}
  tr.medico-sin-clave td{background:color-mix(in srgb,var(--text-2) 9%,var(--surface))}
  [data-theme="dark"] .medicos-table th{background:var(--surface-2)}
  [data-theme="dark"] .medicos-table tbody tr:hover{background:var(--hover)}
  .report-open-btn{height:32px;border-radius:8px;font-size:12px;padding:0 10px}
  .report-row-actions{display:flex;gap:6px;flex-wrap:wrap}
  .client-report-controls{display:grid;grid-template-columns:minmax(240px,360px) 220px minmax(0,1fr);gap:12px;align-items:end}
  .client-report-controls .field{margin:0}
  .client-report-controls .field span{display:block;font-size:11.5px;font-weight:700;color:var(--text-2);margin-bottom:5px}
  .report-notes-field{grid-column:1/-1}
  .report-notes-field textarea.inp{height:68px;padding-top:9px;resize:vertical;line-height:1.35}
  .report-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .report-summary-grid div{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;box-shadow:var(--shadow-sm)}
  .report-summary-grid b,.report-summary-grid span,.report-summary-grid small{display:block}
  .report-summary-grid b{font-size:17px}
  .report-summary-grid span{font-size:11.5px;color:var(--text-2);margin-top:2px}
  .report-summary-grid small{font-size:11px;color:var(--warning);font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
  .debit-breakdown{margin-top:5px;display:flex;flex-direction:column;gap:0}
  .debit-breakdown span{font-size:9.5px;line-height:1.5;color:var(--text-2);display:flex;justify-content:space-between;gap:8px;font-weight:600}
  .debit-breakdown b{font-size:9.5px;color:var(--text-2);font-weight:750;font-variant-numeric:tabular-nums}
  .mescurso-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
  .mescurso-cards.tres{grid-template-columns:1fr 1fr 1fr}
  .mescurso-cards.cuatro{grid-template-columns:repeat(4,1fr);gap:9px}
  @media(max-width:1100px){ .mescurso-cards.tres{grid-template-columns:1fr 1fr} }
  @media(max-width:1340px){ .mescurso-cards.cuatro{grid-template-columns:1fr 1fr} }
  @media(max-width:640px){ .mescurso-cards, .mescurso-cards.tres, .mescurso-cards.cuatro{grid-template-columns:1fr} }
  .mescurso-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);padding:12px 13px;min-width:0}
  /* Con 4 cuadros achicamos un toque para que entren cómodos. */
  .mescurso-cards.cuatro .mescurso-card{padding:11px 12px}
  .mescurso-cards.cuatro .mescurso-val{font-size:23px}
  .mescurso-cards.cuatro .mescurso-val.chico{font-size:19px}
  .mescurso-card.cerrado{border-color:var(--border)}
  .mescurso-card.cerrado .mescurso-chip{background:var(--celeste);color:var(--turq-d, #139a96)}
  .mescurso-card.sincerrar{border-color:var(--warning)}
  .mescurso-card.adelante{border-color:var(--accent, #6c5ce7);border-style:dashed}
  .mescurso-cards.medcab-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .medcab-dashboard-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
  .medcab-dashboard-head h3{margin:0 0 3px;font-size:18px}
  .medcab-dashboard-head p{margin:0;color:var(--text-2);font-size:12.5px}
  .medcab-totals{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .medcab-totals>div{min-width:118px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);padding:8px 10px}
  .medcab-totals b,.medcab-totals span{display:block}
  .medcab-totals b{font-size:18px;line-height:1.15;font-variant-numeric:tabular-nums}
  .medcab-totals span{font-size:11px;color:var(--text-2);margin-top:2px}
  .medcab-card.warn{border-color:var(--warning)}
  .medcab-card.ok{border-color:var(--success)}
  .medcab-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
  .medcab-list{border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm);padding:13px 14px}
  .medcab-list h3{margin:0 0 10px;font-size:15px}
  .medcab-list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--border)}
  .medcab-list-row span{color:var(--text);font-weight:700}
  .medcab-list-row b{font-variant-numeric:tabular-nums}
  /* Los números del tablero de bandeja abren la lista de pacientes de ese mes. */
  .medcab-list-row.mescurso-click{cursor:pointer;border-radius:8px;padding-left:8px;padding-right:8px;transition:background .15s ease}
  .medcab-list-row.mescurso-click:hover{background:var(--hover)}
  .medcab-total-link{cursor:pointer;transition:border-color .15s ease,background .15s ease}
  .medcab-total-link:hover{border-color:var(--turq);background:var(--hover)}
  .medcab-total-link:focus-visible{outline:2px solid var(--turq);outline-offset:2px}
  @media(max-width:1100px){ .mescurso-cards.medcab-grid{grid-template-columns:1fr 1fr}.medcab-dashboard-head{align-items:stretch;flex-direction:column}.medcab-totals{justify-content:flex-start} }
  @media(max-width:640px){ .mescurso-cards.medcab-grid,.medcab-columns{grid-template-columns:1fr}.medcab-totals>div{flex:1 1 120px} }
  .mescurso-head{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:8px}
  .mescurso-title{font-size:13.5px;font-weight:700;color:var(--text)}
  .mescurso-abarca{font-size:10.5px;font-weight:600;color:var(--text-2);margin-left:5px}
  .mescurso-chip{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--hover);color:var(--text-2)}
  .mescurso-chip.warn{background:var(--warning-bg);color:var(--warning)}
  .mescurso-val-lbl{font-size:10.5px;color:var(--text-2);margin-bottom:1px}
  .mescurso-val{font-size:27px;font-weight:750;line-height:1.03;letter-spacing:0;color:var(--text);font-variant-numeric:tabular-nums}
  .mescurso-val.chico{font-size:22px}
  .mescurso-val-note{font-size:10.5px;color:var(--text-2);margin-top:2px;line-height:1.35}
  .mescurso-arrastre{font-size:11px;color:var(--text-2);margin-top:3px;line-height:1.35}
  .mescurso-arrastre b{color:var(--text);font-variant-numeric:tabular-nums}

  /* ===== Calculadora de proyecciones (pestaña de Nomencladores) ===== */
  .calc-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
  @media(max-width:900px){ .calc-grid{grid-template-columns:1fr} }
  .calc-col{display:flex;flex-direction:column;gap:18px;min-width:0}
  .calc-result{position:sticky;top:16px}
  .card-pad{padding:16px 0}
  .calc-search-field{position:relative;margin-bottom:2px}
  .calc-or{font-size:11px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;text-align:center;margin:10px 0 8px;position:relative}
  .calc-or::before,.calc-or::after{content:"";position:absolute;top:50%;width:calc(50% - 78px);height:1px;background:var(--border)}
  .calc-or::before{left:0} .calc-or::after{right:0}
  .calc-search-results{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;background:var(--surface);
    border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow);max-height:320px;overflow:auto;padding:5px}
  .calc-sr-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer}
  .calc-sr-item:hover,.calc-sr-item.active{background:var(--hover)}
  .calc-sr-main{flex:1;min-width:0}
  .calc-sr-main b{font-size:13px;font-variant-numeric:tabular-nums}
  .calc-sr-main .d{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .calc-sr-main .m{font-size:10.5px;color:var(--turq);font-weight:700}
  [data-theme="dark"] .calc-sr-main .m{color:#8df0ed}
  .calc-sr-val{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
  .calc-sr-tag{font-size:9.5px;font-weight:700;color:var(--text-2);background:var(--hover);padding:1px 6px;border-radius:5px}
  .calc-sr-warn{font-size:9.5px;font-weight:700;color:var(--warning);background:var(--warning-bg);padding:1px 6px;border-radius:5px}
  .calc-sr-empty{padding:14px;text-align:center;color:var(--text-2);font-size:12.5px}
  .calc-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  /* Filtro dentro del módulo elegido: algunos módulos tienen 40+ prácticas y
     escrolear un <select> nativo tan largo (que además no se puede pintar de
     celeste, es un popup del sistema operativo) es incómodo. */
  .calc-cod-filtro{margin-bottom:6px;font-size:12.5px;height:32px}
  @media(max-width:520px){ .calc-pick{grid-template-columns:1fr} }
  .calc-pick .field{margin:0}
  .calc-filter{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
  .chk-mini{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);cursor:pointer;user-select:none}
  .chk-mini input{width:16px;height:16px;accent-color:var(--turq);cursor:pointer}
  .calc-preview{font-size:11.5px;color:var(--text-2);font-weight:600}
  .calc-items{overflow-x:auto}
  .calc-items table{width:100%;border-collapse:collapse;min-width:560px}
  .calc-items th{text-align:left;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);font-weight:700;padding:9px 8px;border-bottom:1px solid var(--border)}
  .calc-items td{padding:10px 8px;border-top:1px solid var(--border);font-size:13px;vertical-align:middle}
  .calc-items .num{text-align:right;font-variant-numeric:tabular-nums}
  .calc-items .qty{width:56px;height:32px;padding:0 6px;text-align:center;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-variant-numeric:tabular-nums}
  .calc-items .ccode{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
  .calc-items .cdesc{color:var(--text-2);font-size:12px;max-width:230px}
  .calc-mod-chip{display:inline-block;font-size:10px;font-weight:700;color:var(--turq);background:var(--celeste);padding:1px 7px;border-radius:6px;margin-top:3px}
  [data-theme="dark"] .calc-mod-chip{color:#8df0ed}
  .calc-warn-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--warning);background:var(--warning-bg);padding:2px 7px;border-radius:6px;margin-top:4px}
  .calc-hon{display:flex;align-items:center;gap:5px;justify-content:flex-end}
  .calc-hon input{width:80px;height:32px;padding:0 8px;text-align:right;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-variant-numeric:tabular-nums}
  .calc-tgl{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-2)}
  .calc-tgl button{border:0;background:transparent;color:var(--text-2);font-size:12px;font-weight:800;width:26px;height:32px;cursor:pointer}
  .calc-tgl button.on{background:var(--turq);color:#04302f}
  .calc-x{background:transparent;border:0;color:var(--text-2);cursor:pointer;font-size:16px;line-height:1;padding:4px 6px;border-radius:7px}
  .calc-x:hover{color:var(--error);background:var(--error-bg)}
  .calc-empty{text-align:center;color:var(--text-2);font-size:13px;padding:24px 10px}
  .calc-empty b{display:block;color:var(--text);font-size:13.5px;margin-bottom:3px}
  .calc-conflict{display:flex;gap:9px;align-items:flex-start;background:var(--warning-bg);border:1px solid var(--warning);border-radius:10px;padding:10px 12px;margin:0 0 14px;font-size:12.5px;color:var(--warning)}
  .calc-taxes{padding-top:6px;padding-bottom:6px}
  .calc-tax{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border)}
  .calc-tax:first-child{border-top:0}
  .calc-tax-r{display:flex;align-items:center;gap:10px}
  .calc-amt{width:110px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px;color:var(--text-2)}
  .calc-pct{position:relative;width:88px}
  .calc-pct input{width:100%;height:36px;text-align:right;padding:0 24px 0 10px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-variant-numeric:tabular-nums}
  .calc-pct::after{content:"%";position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-2);font-size:12.5px;pointer-events:none}
  .calc-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;font-size:13.5px;color:var(--text-2)}
  .calc-line + .calc-line{border-top:1px solid var(--border)}
  .calc-line b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
  .calc-line.neg b{color:var(--error)}
  .calc-final{margin-top:6px;padding:16px;border-radius:12px;background:var(--success-bg);border:1px solid var(--success)}
  .calc-final-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .calc-final-lbl{font-size:12px;font-weight:750;color:var(--success);text-transform:uppercase;letter-spacing:.04em}
  .calc-final-margin{font-size:12px;font-weight:750;color:var(--success);background:color-mix(in srgb,var(--success) 16%,transparent);padding:2px 9px;border-radius:999px}
  .calc-final-val{font-size:30px;font-weight:780;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:6px;color:var(--text)}
  .calc-final.warn{background:var(--warning-bg);border-color:var(--warning)}
  .calc-final.warn .calc-final-lbl,.calc-final.warn .calc-final-margin{color:var(--warning)}
  .calc-final.warn .calc-final-margin{background:color-mix(in srgb,var(--warning) 16%,transparent)}
  .calc-save{display:flex;gap:8px;margin-top:14px}
  .calc-save input{flex:1}
  .calc-saved-list{display:flex;flex-direction:column;gap:8px}
  .calc-saved{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--border);border-radius:10px;padding:9px 12px;background:var(--surface-2)}
  .calc-saved .sv-name{font-size:13px;font-weight:700}
  .calc-saved .sv-meta{font-size:11px;color:var(--text-2);margin-top:1px}
  .calc-saved .sv-val{text-align:right;font-variant-numeric:tabular-nums;font-weight:750;font-size:14px;color:var(--success)}
  .calc-saved .sv-margin{font-size:10.5px;color:var(--text-2);text-align:right;margin-top:1px}
  .calc-saved-empty{font-size:12px;color:var(--text-2);text-align:center;padding:14px}
  .calc-saved-actions{display:flex;gap:8px;margin-top:12px}
  .calc-saved-actions .btn{flex:1;height:38px;font-size:12.5px}
  .mescurso-desglose{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  .mescurso-desglose span{font-size:11px;border-radius:999px;padding:3px 9px;color:var(--text-2);background:var(--hover)}
  .mescurso-desglose b{font-variant-numeric:tabular-nums;font-weight:750}
  .mescurso-desglose span.ok{color:var(--success);background:var(--success-bg)}
  .mescurso-desglose span.err{color:var(--error);background:var(--error-bg)}
  .mescurso-desglose span.warn{color:var(--warning);background:var(--warning-bg)}
  .mescurso-foot{font-size:10.5px;color:var(--text-2);margin-top:9px;padding-top:8px;border-top:1px solid var(--border)}
  .mescurso-ausentes{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:6px;padding:6px 8px;border-radius:8px;background:var(--hover)}
  .mescurso-ausentes span{font-size:11px;color:var(--text-2)}
  .mescurso-ausentes b{font-size:11.5px;color:var(--text-2);font-weight:750;font-variant-numeric:tabular-nums}
  .mescurso-sync{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:6px;padding:6px 8px;border-radius:8px;background:var(--hover)}
  .mescurso-sync span{font-size:11px;color:var(--text-2)}
  .mescurso-sync b{font-size:11.5px;color:var(--text);font-weight:750;font-variant-numeric:tabular-nums}
  .mescurso-lines{margin-top:9px;display:flex;flex-direction:column;gap:6px}
  .mescurso-lines.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  /* Fichas apiladas: etiqueta arriba (puede ir en 2 líneas, sin cortarse) y el
     número grande abajo. Antes iban en una fila con ellipsis y el número largo
     ($ 13.430.791,38) se comía la etiqueta ("Faltante de trans…"). La grilla
     estira las dos cajas de cada fila a la misma altura. */
  .mescurso-lines.duo .mescurso-line{min-width:0;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
  .mescurso-lines.duo .mescurso-line.wide{grid-column:1 / -1}
  .mescurso-lines.duo .mescurso-line span{min-width:0;white-space:normal;line-height:1.2}
  .mescurso-lines.duo .mescurso-line b{white-space:nowrap;font-size:13px}
  @media(max-width:640px){ .mescurso-lines.duo{grid-template-columns:1fr} }
  .mescurso-line{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border)}
  .mescurso-line span{font-size:11.5px;color:var(--text-2)}
  .mescurso-line b{font-size:12px;font-weight:750;color:var(--text);font-variant-numeric:tabular-nums}
  .mescurso-debnote{display:block;margin-top:2px;font-size:10.5px;font-weight:700;line-height:1.15;white-space:normal;opacity:.9}
  .mescurso-line.alert{background:var(--error-bg);border-color:var(--error)}
  .mescurso-line.alert span,.mescurso-line.alert b{color:var(--error-fg)}
  .mescurso-line.warn{background:var(--warning-bg);border-color:var(--warning)}
  .mescurso-line.warn span,.mescurso-line.warn b{color:var(--warning)}
  /* Centro potencial: lo que le transmitiríamos nosotros. No es un problema del
     centro, es lo que ganaría con nosotros — por eso va en turquesa y no en
     amarillo, que en estas tarjetas significa "algo que revisar". */
  .mescurso-line.oportunidad{background:var(--celeste);border-color:var(--turq)}
  .mescurso-line.oportunidad span,.mescurso-line.oportunidad b{color:var(--turq-d)}
  .mescurso-nota-pot{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;padding:9px 11px;border-radius:10px;background:var(--celeste);border:1px solid color-mix(in srgb,var(--turq) 40%,var(--border));color:var(--text);font-size:12px;line-height:1.5}
  .mescurso-nota-pot b{font-weight:800}
  .mescurso-line.mescurso-click{cursor:pointer;transition:border-color .15s ease,background .15s ease}
  .mescurso-line.mescurso-click:hover{border-color:var(--turq)}
  .mescurso-line.alert.mescurso-click:hover{border-color:var(--error)}
  .mescurso-caret{font-size:10px;opacity:.8}
  .mescurso-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);padding:12px 14px;margin-bottom:14px}
  .mescurso-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
  .mescurso-panel-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap}
  .mescurso-panel-actions .btn{padding:5px 9px;font-size:12px}
  .bandeja-table th.mc-chk-th,.bandeja-table td.mc-chk-td{width:30px;text-align:center;padding-left:6px;padding-right:2px}
  .bandeja-table .mc-falt-chk{cursor:pointer}
  .mescurso-panel-head b{font-size:13px;color:var(--text)}
  .mescurso-panel-vacio{font-size:12px;color:var(--text-2);padding:10px 2px 2px}
  .mescurso-panel.error .mescurso-panel-head b{color:var(--error)}
  .mescurso-panel.warn .mescurso-panel-head b{color:var(--warning)}
  .mescurso-panel .table-scroll{max-height:340px;overflow:auto}
  /* Aviso "sin valorizar" en la tabla de módulos: chip ámbar clickeable (abre el
     modal para asignarle valor a los códigos faltantes). */
  .mc-sinvalor{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:11px;font-weight:700;color:#b45309;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.35);border-radius:999px;padding:2px 9px;white-space:nowrap;cursor:pointer;transition:background .12s ease}
  .mc-sinvalor:hover{background:rgba(245,158,11,.26)}
  [data-theme="dark"] .mc-sinvalor{color:#fbbf24}
  /* Modal "sin valorizar": filas código + input + botón. */
  .sv-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px}
  .sv-row .sv-info{flex:1;min-width:0}
  .sv-row .sv-info>div:first-child{font-weight:700}
  .sv-row input{width:130px;flex:0 0 auto}
  .sv-row.sv-done{opacity:.55}
  /* Tabla al 100%: las columnas cortas (width:1% + nowrap) pegan al contenido y
     las de texto (.mc-exp) absorben el ancho sobrante → sin huecos entre columnas
     ni bloque vacío a la derecha. La práctica/cruce envuelven si no entran. */
  .mescurso-panel table.bandeja-table{width:100%;min-width:0;border-collapse:collapse;font-size:11px;table-layout:auto}
  .mescurso-panel th{position:sticky;top:0;background:var(--surface);text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);color:var(--text-2);font-weight:700;white-space:nowrap}
  .mescurso-panel th .mc-sort{display:inline-flex;align-items:center;gap:3px;max-width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
  .mescurso-panel th .mc-sort:hover{color:var(--text)}
  .mescurso-panel th.sort-asc .mc-sort,.mescurso-panel th.sort-desc .mc-sort{color:var(--petrol)}
  .mescurso-panel th .mc-sort span{font-size:10px;line-height:1}
  /* Columnas cortas: se ajustan al contenido en una línea. */
  .mescurso-panel td,.mescurso-panel th{padding:4px 8px;border-bottom:1px solid var(--border);vertical-align:top;white-space:nowrap;width:1%}
  /* Columnas de texto largo: toman el ancho sobrante y envuelven por palabra si
     hace falta. overflow-wrap:break-word (no 'anywhere') para que NO se colapsen a
     una letra cuando el espacio aprieta: su mínimo es la palabra más larga. */
  .mescurso-panel td.mc-exp,.mescurso-panel th.mc-exp{white-space:normal;width:auto;min-width:80px;overflow-wrap:break-word}
  .mescurso-panel td.mc-acc{white-space:nowrap;width:1%;text-align:right}
  .mescurso-panel .mc-crear{padding:2px 8px;font-size:12px;white-space:nowrap}
  /* En celular la tabla no entra: benef, turno, valor y los botones no se pueden
     achicar, así que se iba de la pantalla y quedaba cortada. Cada fila pasa a
     ser una tarjeta con los datos uno abajo del otro y el nombre de la columna
     como etiqueta (de ahí el data-col que pone mesCursoTablaHtml). */
  @media(max-width:640px){
    .mescurso-panel{padding:10px}
    .mescurso-panel .table-scroll{max-height:none;overflow:visible}
    .mescurso-panel table.bandeja-table,
    .mescurso-panel table.bandeja-table tbody,
    .mescurso-panel table.bandeja-table tr,
    .mescurso-panel table.bandeja-table td{display:block;width:auto}
    .mescurso-panel table.bandeja-table thead{display:none}
    .mescurso-panel table.bandeja-table tr{position:relative;border:1px solid var(--border);border-radius:12px;padding:9px 40px 9px 11px;margin-bottom:9px;background:var(--surface)}
    .mescurso-panel table.bandeja-table td{border:0;padding:2px 0;white-space:normal;width:auto;text-align:left;vertical-align:baseline}
    /* La etiqueta sale del encabezado de esa columna. Las celdas sin data-col
       (la del check y la de acciones) no llevan. */
    /* Etiqueta en la MISMA línea que el valor: en bloque cada tarjeta ocupaba el
       doble de alto y entraba una sola por pantalla. Lo largo (la práctica)
       envuelve solo, debajo de su etiqueta. */
    .mescurso-panel table.bandeja-table td[data-col]:not([data-col=""])::before{
      content:attr(data-col) " ";font-size:9px;font-weight:700;
      text-transform:uppercase;letter-spacing:.04em;color:var(--text-2)}
    .mescurso-panel table.bandeja-table td{font-size:12.5px;line-height:1.45}
    /* Una celda vacía no tiene que ocupar un renglón con su etiqueta sola. */
    .mescurso-panel table.bandeja-table td.mc-vacio{display:none}
    .mescurso-panel table.bandeja-table td.mc-chk-td{position:absolute;top:9px;right:11px;width:auto;padding:0}
    .mescurso-panel table.bandeja-table td.mc-acc{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px;margin-top:6px;border-top:1px solid var(--border)}
    .mescurso-panel table.bandeja-table td.mc-acc:empty{display:none}
    .mescurso-panel .mc-crear{padding:5px 10px;font-size:12px}
    /* La barra de arriba en una columna: el botón largo no entra al lado del filtro. */
    .mescurso-panel-actions{width:100%}
    .mescurso-panel-actions .mc-filtro{max-width:none!important;flex:1 1 100%}
  }
  /* Credencial provisoria */
  .cred-card{max-width:760px}
  /* Afiliados: Consultar cápita + Credencial provisoria lado a lado (más cuadradas). */
  /* Afiliados: las tres herramientas de la pantalla (consultar capita, credencial
     provisoria y padron) SI van en cuadros. Son tres cosas sueltas que se usan por
     separado, dos de ellas una al lado de la otra: el marco dice donde empieza y
     termina cada una, igual que en Inicio. La tabla de abajo queda plana.
     Va con el id de la pantalla y no sobre .nom-status, que lo comparten seis
     pantallas donde esa cabecera va pegada a su tabla y el marco sobra. */
  #view-padron .card{background:var(--surface);border:1px solid var(--border);
    border-radius:14px;box-shadow:var(--shadow-sm);padding:16px 17px}
  /* stretch y no start: con start cada cuadro tomaba el alto de su contenido y
     terminaban 7,7px desfasados, que es de lo primero que se ve al entrar. */
  .afil-tools{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;margin-bottom:14px}
  .afil-tools .nom-status,.afil-tools .cred-card{margin-bottom:0;max-width:none}
  .afil-tools .nom-status{flex-direction:column;align-items:stretch;gap:12px}
  .afil-tools .nom-upload{flex-direction:column;align-items:stretch;gap:10px}
  .afil-tools .nom-upload .field{min-width:0 !important}
  .afil-tools .nom-upload .btn{align-self:flex-start}
  @media(max-width:860px){ .afil-tools{grid-template-columns:1fr} }
  .cred-head{margin-bottom:16px}
  .cred-head h3{margin:0 0 4px}
  .cred-form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}
  .cred-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--text-2)}
  .cred-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
  .cred-hint{font-size:12px}
  .cred-result{margin-top:14px}
  .cred-ok{font-weight:750;color:var(--turq);margin-bottom:10px}
  .cred-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .cred-preview{width:100%;height:540px;border:1px solid var(--border);border-radius:10px;background:#fff}
  @media(max-width:640px){.cred-form{grid-template-columns:1fr}.cred-preview{height:420px}}
  .cred-salud{display:flex;flex-direction:column;gap:6px;margin:10px 0}
  .cred-salud-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;background:var(--surface-2);border-radius:9px;font-size:13px}
  .cred-salud-fila>span{color:var(--text-2);font-weight:600}
  .cred-salud-fila>b{font-variant-numeric:tabular-nums}
  .cred-sched{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:10px 12px;background:var(--surface-2);border-radius:10px;margin-bottom:6px}
  .cred-sched label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--text-2)}
  .cred-sched-chk{flex-direction:row!important;align-items:center;gap:7px;font-size:13px;color:var(--text)}
  .cred-lote-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:6px}
  .cred-lote-controls label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--text-2)}
  .cred-lote-bar{height:10px;border-radius:6px;background:var(--surface-2);overflow:hidden}
  .cred-lote-bar>div{height:100%;width:0;background:var(--turq);transition:width .2s ease}
  .mescurso-salud{margin:0 0 10px;padding:8px 11px;border-radius:9px;font-size:12px;font-weight:600;line-height:1.4}
  .mescurso-salud.err{background:var(--error-bg);border:1px solid var(--error);color:var(--error)}
  .mescurso-salud.warn{background:var(--warning-bg);border:1px solid var(--warning);color:var(--warning)}
  .mescurso-salud-detalle{margin-top:6px;font-size:11px;font-weight:500;line-height:1.5;opacity:.92}
  .mescurso-salud-detalle b{font-weight:700}
  .mescurso-empty{padding:16px 4px 6px;text-align:center}
  .mescurso-empty b{display:block;font-size:14px;color:var(--text);margin-bottom:4px}
  .mescurso-empty span{font-size:12px;color:var(--text-2);line-height:1.5}
  .report-summary-card.filterable{cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
  .report-summary-card.filterable:hover,.report-summary-card.filterable.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(18,184,177,.16)}
  .report-summary-card.filterable.active{background:#effefd}
  .report-expected-card{display:grid;gap:7px}
  .report-expected-card label{display:grid;gap:5px}
  .report-expected-card .inp{height:34px;border-radius:8px;font-size:13px}
  .report-match-status{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800}
  .report-match-status svg{width:16px;height:16px}
  .report-match-status.ok{color:var(--success)}
  .report-match-status.bad{color:var(--error)}
  .report-match-status.muted{color:var(--text-2)}
  .report-results-table{min-width:1260px;table-layout:fixed}
  .report-results-table th{padding:8px 10px;font-size:9.5px;background:#f7f9fc}
  .report-results-table td{padding:7px 10px;font-size:12px;line-height:1.2}
  .th-sort{border:0;background:transparent;color:inherit;font:inherit;font-weight:800;text-transform:uppercase;padding:0;display:inline-flex;align-items:center;gap:5px}
  .th-sort span{font-size:9px;color:var(--text-2)}
  .report-results-table th:nth-child(1){width:205px}
  .report-results-table th:nth-child(2){width:360px}
  .report-results-table th:nth-child(3){width:160px}
  .report-results-table th:nth-child(4){width:120px}
  .report-results-table th:nth-child(5){width:115px}
  .report-results-table th:nth-child(6){width:220px}
  .report-results-table th:nth-child(7){width:115px}
  .report-value-cell{cursor:pointer}
  .report-value-cell:hover{background:var(--hover)}
  .report-status{display:inline-flex;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:750;white-space:nowrap;background:var(--hover);color:var(--text-2)}
  .report-status.ok{background:var(--success-bg);color:var(--success)}
  .report-status.warn{background:var(--warning-bg);color:var(--warning)}
  .debit-controls{display:grid;grid-template-columns:70px 82px;gap:5px;align-items:center}
  .debit-controls .inp{height:32px;border-radius:8px;font-size:12px;padding:0 8px}
  .debit-check{display:flex;gap:5px;align-items:center;font-size:11.5px;color:var(--text-2);font-weight:700}
  .debit-check input{width:14px;height:14px;accent-color:var(--turq)}
  .auto-debit-note{margin-top:4px;color:var(--warning)!important;font-weight:650}
  .debit-warning-note{margin-top:4px;color:var(--warning);font-weight:600;font-size:11px;line-height:1.3;max-width:190px}
  .debit-amount:disabled{opacity:.55}
  .icon-danger-btn.mini{width:34px;height:34px;border-radius:8px}
  .icon-danger-btn.mini svg{width:16px;height:16px}
  .icon-danger-btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
  .btn:disabled{opacity:.55;cursor:not-allowed;filter:none}

  /* checkbox simple */
  .chk{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text);cursor:pointer;user-select:none;margin-top:2px}
  .chk input{width:17px;height:17px;accent-color:var(--turq);cursor:pointer}
  .hint{font-size:11.5px;color:var(--text-2);margin-top:5px;line-height:1.4}

  /* botón peligro */
  .btn-danger{background:var(--error);color:#fff}
  /* Los seis lugares donde un color funcional es FONDO con texto blanco encima. Con el
     tono aclarado el blanco quedaria en 2,3 de contraste, asi que el texto pasa a
     oscuro. De paso arregla algo que ya venia mal: el blanco sobre el ambar estaba en
     2,44 y ahora da 7,61. */
  [data-theme="dark"] .btn-danger,
  [data-theme="dark"] .ini-unread,
  [data-theme="dark"] .ini-pendop-badge{color:var(--bg)}

  /* modal centrado */
  .modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);width:420px;max-width:calc(100vw - 32px);
    background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 60px rgba(11,31,58,.28);
    z-index:50;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;display:flex;flex-direction:column;max-height:calc(100vh - 32px)}
  .modal.wide{width:680px}
  /* El aviso y la confirmacion van SIEMPRE arriba de todo. Se disparan desde
     adentro de otros modales —el de crear informe vive en z-index 10000— y con
     el z-index 50 del modal comun quedaban DETRAS: se veia la pantalla trabada
     y el cartel tapado, sin entender que estaba esperando una respuesta. */
  #nsAskScrim{z-index:10040}
  #nsAskModal{z-index:10050}
  #taskResScrim{z-index:10020}
  #taskResModal{z-index:10030}
  /* Para modales con TABLA de datos (detalle de pacientes, OMEs por vencer…):
     680px recorta las últimas columnas. Ancho cómodo pero siempre dentro del
     viewport, y el modal sigue centrado por la regla de arriba. */
  .modal.xwide{width:1060px}
  #pendDetalleModal{width:min(1320px,calc(100vw - 48px));max-height:calc(100vh - 24px)}
  #pendDetalleModal .modal-body{padding:16px 18px}
  #pendDetalleModal .modal-table-scroll{max-height:min(72vh,720px)}
  .modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
  .modal-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)}
  .modal-head h3{margin:0;font-size:15.5px}
  .modal-head .x{margin-left:auto;background:transparent;border:0;color:var(--text-2);font-size:22px;line-height:1;cursor:pointer}
  .modal-head .x:hover{color:var(--text)}
  .modal-body{padding:18px;overflow:auto}
  .form-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
  .form-grid.nombre-doc{display:grid;grid-template-columns:1fr 200px;gap:12px;margin-bottom:12px}
  .form-grid label{display:grid;gap:6px;font-size:12px;font-weight:750;color:var(--text-2)}
  .form-grid .span-2{grid-column:1/-1}
  /* El lote usa .field>label>select (no el patrón label>input de los modales):
     evitamos que la regla de arriba apile el "(por defecto)" y desalinee. */
  #inf-tab-lote .form-grid.two{align-items:end}
  #inf-tab-lote .form-grid.two .field{margin:0}
  #inf-tab-lote .form-grid.two label{display:block}
  .modal-note{margin:0 0 14px;font-size:13.5px;color:var(--text-2);line-height:1.5}
  .modal-note b{color:var(--text)}
  .modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--border)}

  /* ===== Tabla de datos DENTRO de un modal =====
     Base para cualquier pop-up de detalle (pacientes, OMEs por vencer, lo que
     venga). NO reusar .saved-report-table acá: esa tiene min-width:1350px y
     anchos fijos por columna (th:nth-child) pensados para la pantalla de
     reportes guardados - metida en un modal deja las últimas columnas afuera y
     trunca el texto con "…". Esta se adapta al contenido, scrollea sola y deja
     el encabezado fijo. */
  .modal-table-scroll{width:100%;max-height:min(58vh,520px);overflow:auto;
    border:1px solid var(--border);border-radius:10px;background:var(--surface)}
  .modal-table{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:auto}
  .modal-table thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);
    text-align:left;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;
    color:var(--text-2);font-weight:700;padding:9px 12px;white-space:nowrap;
    border-bottom:1px solid var(--border)}
  .modal-table td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top}
  .modal-table tbody tr:last-child td{border-bottom:0}
  .modal-table tbody tr:hover td{background:var(--hover)}
  /* Columnas cortas (beneficio, turno, estado): en una sola línea. */
  .modal-table .num{font-variant-numeric:tabular-nums;white-space:nowrap}
  /* Columna de texto largo (práctica, nombre): envuelve en vez de cortarse.
     El min-width es chico a propósito: si es grande, la suma de las columnas
     pasa el ancho del modal y las últimas (Estado, Turno) quedan afuera. */
  .modal-table .wrap{white-space:normal;min-width:140px;line-height:1.35}
  /* Números que pueden venir en lista ("332640, 332641, 332642"): tabulares
     pero que envuelvan, si no una fila con 3 OMEs empuja toda la tabla. */
  .modal-table .numw{font-variant-numeric:tabular-nums;white-space:normal;line-height:1.35}
  @media(max-width:760px){ .modal-table .wrap{min-width:0} .modal-table td,.modal-table thead th{padding:8px 9px} }
  /* En el celular una tabla de 7 columnas no entra: quedaba la mitad afuera y
     el botón de crear el informe, que es lo único accionable, ni se veía. Abajo
     de 640px cada fila pasa a ser una ficha, con el dato importante arriba y la
     acción a la derecha. Las celdas se ubican por su data-col (lo pone app.js). */
  @media(max-width:640px){
    #pendDetalleModal .modal-table thead{display:none}
    #pendDetalleModal .modal-table,#pendDetalleModal .modal-table tbody{display:block;width:100%}
    #pendDetalleModal .modal-table tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
      grid-template-areas:'sel pac acc' 'sel pra acc' 'sel ben acc' 'sel ome acc' 'sel tur acc' 'sel est acc';
      gap:1px 10px;padding:11px 12px;border-bottom:1px solid var(--border);align-items:start}
    #pendDetalleModal .modal-table tbody tr:last-child{border-bottom:0}
    #pendDetalleModal .modal-table tbody td{display:block;border:0;padding:0;white-space:normal;min-width:0}
    #pendDetalleModal .modal-table td[data-col='pac']{grid-area:pac;font-weight:800;font-size:13.5px;line-height:1.3}
    #pendDetalleModal .modal-table td[data-col='pra']{grid-area:pra;color:var(--text-2);font-size:12px;line-height:1.3;margin:2px 0 4px}
    #pendDetalleModal .modal-table td[data-col='ben']{grid-area:ben;color:var(--text-2);font-size:11.5px}
    #pendDetalleModal .modal-table td[data-col='ome']{grid-area:ome;color:var(--text-2);font-size:11.5px}
    #pendDetalleModal .modal-table td[data-col='tur']{grid-area:tur;color:var(--text-2);font-size:11.5px}
    #pendDetalleModal .modal-table td[data-col='est']{grid-area:est;font-size:11.5px;margin-top:3px}
    #pendDetalleModal .modal-table td[data-col='acc']{grid-area:acc;align-self:center}
    /* La columna del tilde: cuando la lista no lo lleva, no ocupa nada. */
    #pendDetalleModal .modal-table td[data-col='sel']{grid-area:sel;align-self:center;padding-right:4px}
    /* Sin el rótulo de la columna, un número suelto no dice qué es. */
    #pendDetalleModal .modal-table td[data-col='ben']::before{content:'Benef ';opacity:.7}
    #pendDetalleModal .modal-table td[data-col='ome']::before{content:'OME ';opacity:.7}
    #pendDetalleModal .modal-table td[data-col='tur']::before{content:'Turno ';opacity:.7}
    /* La fila de 'Cargando…' / 'Sin pacientes' es una sola celda con colspan. */
    #pendDetalleModal .modal-table td.muted-cell{grid-column:1 / -1;text-align:center;padding:14px 0}
  }
  .module-edit-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:420px;overflow:auto}
  /* "Qué ve en cada cliente" (operador): un bloque por cliente asignado. */
  .um-mc-cliente{border:1px solid var(--border);border-radius:12px;padding:10px 11px;margin-bottom:9px;background:var(--surface-2)}
  .um-mc-cliente .um-mc-nombre{font-size:12.5px;font-weight:750;color:var(--text);margin-bottom:8px}
  .um-mc-cliente .module-edit-list{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none}
  @media(max-width:640px){ .um-mc-cliente .module-edit-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
  /* La ficha de usuario lleva dos listas de tildes (qué clientes ve y qué ve en
     cada uno). En un modal comun quedaban dos columnas muy apretadas. */
  #userModal{width:880px}
  #userModal #umClientes{grid-template-columns:repeat(3,minmax(0,1fr));max-height:240px}
  @media(max-width:820px){ #userModal #umClientes{grid-template-columns:repeat(2,minmax(0,1fr))} }
  .module-edit-option{display:flex;align-items:flex-start;gap:8px;border:1px solid var(--border);border-radius:10px;padding:8px 9px;font-size:12px;line-height:1.25;cursor:pointer}
  .module-edit-option:hover{background:var(--hover)}
  .module-edit-option input{width:15px;height:15px;margin:0;accent-color:var(--turq);flex:0 0 auto}
  .module-edit-option b{font-weight:800}

  @media(max-width:980px){ .nom-filters{grid-template-columns:1fr 1fr}.client-layout,.client-grid,.report-model-grid,.report-summary-grid,.client-report-controls,.client-dashboard-controls,.ome-grid{grid-template-columns:1fr}.ome-span-2,.ome-span-all{grid-column:auto}.dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.client-nom-head,.nom-table .table-head,.dashboard-head{align-items:stretch;flex-direction:column}.client-nom-controls{grid-template-columns:1fr}.report-search{width:100%}.report-filter-bar{grid-template-columns:1fr 1fr}.ome-suggestions button{grid-template-columns:1fr} }
  @media(max-width:520px){ .tiles{grid-template-columns:1fr}.nom-filters{grid-template-columns:1fr}.nom-status{align-items:flex-start;flex-direction:column}.module-edit-list,.form-grid.two,.form-grid.nombre-doc{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.report-filter-bar,.dashboard-kpis{grid-template-columns:1fr} }

  /* Clientes en celular: que las tablas anchas (min-width) scrolleen adentro de
     su tarjeta en vez de estirar el ancho de toda la pagina (scroll horizontal). */
  @media(max-width:980px){
    .client-detail{grid-template-columns:minmax(0,1fr)}
    .client-grid,.client-top,.client-card,.client-dashboard-card,.client-nomenclador,.dashboard-module-wrap{min-width:0}
  }

  /* Tablet en horizontal (barra lateral fija + ancho medio): los 6 filtros del
     nomenclador no entran hasta ~1340px de viewport, asi que en esa franja van
     en 3 columnas para evitar el scroll horizontal. */
  @media(min-width:981px) and (max-width:1340px){
    .nom-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  }

  /* --- Pagos / Facturas --- */
  .factura-cli{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0}
  .factura-cli-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
  .factura-cli-head h4{margin:0;font-size:15px;flex:1 1 180px}
  .factura-cfg{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2)}
  .inp.mini{padding:6px 8px;font-size:13px;height:auto}
  .btn-sm{padding:6px 12px;font-size:13px}
  .facturas-table td.num,.facturas-table th.num{text-align:right;white-space:nowrap}
  .factura-item{display:flex;gap:8px}
  .factura-item .inp:first-child{flex:1 1 auto}
  .factura-item .inp:last-child{flex:0 0 130px}
  .factura-calc{margin-top:12px;padding:10px 12px;background:var(--soft,rgba(0,0,0,.03));border-radius:8px;font-size:13.5px;color:var(--text-2)}
  .factura-calc b{color:var(--text)}
  .chk.mini{margin:0;justify-content:center}
  .chk.mini input{width:16px;height:16px}

  /* --- Facturas: grupos colapsables + grilla inline --- */
  .factura-group{border:1px solid var(--line);border-radius:12px;margin:12px 0;overflow:hidden}
  .factura-group-head{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;background:var(--soft,rgba(0,0,0,.03));flex-wrap:wrap}
  .factura-group-head h4{margin:0;font-size:15px;flex:1 1 140px}
  .factura-group-head .nav-caret{width:18px;height:18px;transition:transform .18s;transform:rotate(-90deg)}
  .factura-group.open .factura-group-head .nav-caret{transform:rotate(0)}
  .factura-group-body{padding:6px 12px 14px}
  .factura-group:not(.open) .factura-group-body{display:none}
  .facturas-table input.fac-in{width:62px;text-align:right}
  .facturas-table input.fac-monto{width:130px;text-align:right}
  .facturas-table input.fac-chk{width:18px;height:18px;accent-color:var(--turq)}
  .facturas-table td{vertical-align:middle}

  /* Facturas: celda descripción + valor, y fecha de cobro */
  .fac-fact{display:flex;gap:6px;align-items:center}
  .facturas-table input.fac-desc{flex:1 1 auto;min-width:120px;text-align:left}
  .facturas-table input.fac-fecha{width:140px}

  /* Facturas v4: bloque por cliente con N facturas */
  .fac-cli{padding:12px 4px;border-bottom:1px solid var(--line)}
  .fac-cli:last-child{border-bottom:none}
  .fac-cli-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
  .fac-cli-name{font-size:14.5px;flex:1 1 160px}
  .fac-cfg{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2)}
  .fac-items{display:flex;flex-direction:column;gap:6px;margin:0 0 8px}
  .fac-item-row{display:flex;align-items:center;gap:8px}
  .fac-item-row .fac-desc{flex:1 1 auto;min-width:140px;text-align:left}
  .fac-item-row .fac-monto{flex:0 0 160px;text-align:right}
  .fac-cli-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .fac-tot{font-size:13px;color:var(--text-2)}
  .fac-tot b{color:var(--text);font-size:14px}
  input.fac-fecha{width:150px}

  /* Facturas v5: cliente colapsable dentro de período */
  .fac-cli-head{cursor:pointer}
  .fac-cli-head .mini-caret{width:15px;height:15px;flex:0 0 auto;transform:rotate(-90deg);transition:transform .18s}
  .fac-cli.open .fac-cli-head .mini-caret{transform:rotate(0)}
  .fac-cli:not(.open) .fac-cli-body{display:none}
  .fac-cli-cfg{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:8px 0 10px}
  .fac-cli-body{padding:2px 0 4px}

  /* Facturas: 2 clientes por fila + tarjetas más compactas */
  .fac-subgrupo{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);font-weight:700;margin:12px 2px 4px}
  .fac-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .fac-cli{border:1px solid var(--line)!important;border-radius:10px;padding:10px 12px}
  .fac-cli-head{gap:10px 12px;margin-bottom:4px}
  .fac-cli-name{flex:1 1 100%;font-size:14px}
  .fac-cli-head .fac-tot{font-size:12px}
  .fac-cli-head .fac-tot b{font-size:12.5px}
  .fac-cli-cfg{gap:10px 12px;margin:6px 0 8px;font-size:12px}
  @media(max-width:900px){ .fac-grid{grid-template-columns:1fr} }

  /* Facturas: UP (usuario PAMI) al lado del cliente */
  .fac-up{font-size:11.5px;color:var(--text-2);background:var(--soft,rgba(0,0,0,.05));padding:2px 7px;border-radius:6px;font-variant-numeric:tabular-nums;user-select:text;cursor:text}

  /* Facturas: columnas automáticas según ancho (4 en pantalla ancha, 1 en celular) */
  .fac-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr))}
  @media(max-width:900px){ .fac-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))} }

  /* Facturas: config en dos filas compactas (Com/Socios/Ret juntos) */
  .fac-cli-cfg{flex-direction:column;align-items:flex-start;gap:8px}
  .fac-cfg-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .fac-cli .fac-in{width:52px}

  /* Facturas: topbar (buscar + mínimo + período) y archivados */
  .fac-topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
  .fac-archivados-info{font-size:12.5px;color:var(--text-2);margin-top:14px;padding:8px 12px;background:var(--soft,rgba(0,0,0,.03));border-radius:8px}
  .fac-arch-tag{font-size:10px;text-transform:uppercase;letter-spacing:.04em;background:var(--soft,rgba(0,0,0,.09));color:var(--text-2);padding:2px 6px;border-radius:5px;vertical-align:middle;margin-left:6px}
  .factura-group.archivado>.factura-group-head{opacity:.75}

  /* Inicio: resultado económico del mes */
  .res-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .res-tile{border:1px solid var(--line);border-radius:12px;padding:14px 16px}
  .res-tile .rk{font-size:12.5px;color:var(--text-2);margin-bottom:4px}
  .res-tile .rv{font-size:21px;font-weight:800;letter-spacing:-.01em}
  .res-tile.in .rv{color:#0a8a4f}
  .res-tile.out .rv{color:#c0392b}
  .res-tile.net{background:var(--soft,rgba(0,0,0,.035))}
  .res-tile.net.neg .rv{color:#c0392b}
  .res-socios{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
  .res-socio{flex:1 1 180px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px 14px}
  .res-socio .rs-name{font-weight:600;color:var(--text-2)}
  .res-socio .rs-val{font-weight:800}
  @media(max-width:700px){ .res-grid{grid-template-columns:1fr} }

  /* Inicio: desglose del resultado */
  .res-desglose{margin-top:14px;border-top:1px solid var(--line);padding-top:10px;max-width:440px}
  .res-linea{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:13.5px}
  .res-linea .pos{font-weight:600;color:#0a8a4f}
  .res-linea .neg{font-weight:600;color:#c0392b}
  .res-linea-gasto{border-top:1px dashed var(--line);margin-top:4px;padding-top:8px}
  .res-linea-total{border-top:1px solid var(--line);margin-top:4px;padding-top:9px;font-weight:800;font-size:15px}

  /* ===== Inicio: dashboard financiero moderno ===== */
  .res-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px;flex-wrap:wrap}
  .res-head h2{margin:0;font-size:18px;letter-spacing:-.01em}
  .res-mes{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2)}
  .res-hero{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
  .res-hero-op{display:flex;align-items:center;font-size:26px;font-weight:300;color:var(--text-2)}
  .res-hero-card{flex:1 1 220px;border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--card,#fff)}
  .res-hero-card .rh-k{font-size:12.5px;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
  .res-hero-card .rh-v{font-size:27px;font-weight:800;letter-spacing:-.02em;margin:6px 0 4px}
  .res-hero-card .rh-m{font-size:12px;color:var(--text-2)}
  .res-hero-card.in{background:linear-gradient(135deg,rgba(10,138,79,.08),transparent)}
  .res-hero-card.in .rh-v{color:#0a8a4f}
  .res-hero-card.out{background:linear-gradient(135deg,rgba(192,57,43,.08),transparent)}
  .res-hero-card.out .rh-v{color:#c0392b}
  .res-hero-card.net{background:linear-gradient(135deg,var(--turq,#12b3a6),color-mix(in srgb,var(--turq,#12b3a6) 55%,#0a7d73));border-color:transparent;color:#fff}
  .res-hero-card.net .rh-k,.res-hero-card.net .rh-m{color:rgba(255,255,255,.85)}
  .res-hero-card.net .rh-v{color:#fff}
  .res-hero-card.net.neg{background:linear-gradient(135deg,#c0392b,#8e2a20)}
  .res-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
  .res-panel{padding:16px 18px}
  .res-panel-h{font-size:13px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
  .res-chart{display:flex;align-items:flex-end;gap:10px;height:190px;padding-top:8px}
  .rc-bar{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
  .rc-track{flex:1;width:100%;max-width:46px;display:flex;align-items:flex-end;border-radius:8px}
  .rc-fill{width:100%;background:linear-gradient(180deg,var(--turq,#12b3a6),color-mix(in srgb,var(--turq,#12b3a6) 60%,#0a7d73));border-radius:8px 8px 4px 4px;min-height:3px;transition:height .3s}
  .rc-fill.neg{background:linear-gradient(180deg,#e05a4d,#c0392b)}
  .rc-fill.sel{background:linear-gradient(180deg,#0a8a4f,#076b3c);box-shadow:0 2px 10px rgba(10,138,79,.3)}
  .rc-lbl{font-size:11px;color:var(--text-2);margin-top:6px;text-transform:capitalize;white-space:nowrap}
  @media(max-width:820px){ .res-cols{grid-template-columns:1fr} .res-hero-op{display:none} }

  /* Resumen de cuenta: tarjeta estilo mes en curso + check de cobrado */
  .res-card{max-width:600px}
  .res-mes-input{width:152px}
  .res-ganancia{margin:10px 0 2px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
  .res-ganancia .rg-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .res-ganancia .rg-lbl{font-size:12.5px;color:var(--text-2);font-weight:600}
  .res-ganancia .rg-val{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--turq-fg)}
  .res-ganancia .rg-val.neg{color:var(--error)}
  .res-ganancia .rg-sub{display:block;font-size:10.5px;color:var(--text-2);margin-top:2px}
  .res-socios-row{display:flex;gap:10px;margin:10px 0 2px}
  .res-socios-row .res-socio{flex:1 1 160px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);border-radius:9px;padding:8px 12px;background:var(--surface-2)}
  .res-socios-row .rs-name{font-size:12px;color:var(--text-2);font-weight:600}
  .res-socios-row .rs-val{font-weight:750;font-variant-numeric:tabular-nums}
  .mescurso-val.neg{color:var(--error)}

  /* Comparativa de facturación neta por cliente, al lado del Resumen de cuenta */
  .res-row{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
  .res-row .res-card{flex:1 1 420px}
  .res-clients-card{flex:1 1 420px;min-width:0}
  .res-clients-sub{font-size:11px;color:var(--text-2);font-weight:600}
  .res-clients-chart{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto;padding-right:2px}
  .rescli-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:5px}
  .rescli-info{display:flex;align-items:baseline;gap:7px;min-width:0}
  .rescli-name{font-size:12.5px;font-weight:650;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rescli-delta{flex:0 0 auto;font-size:10.5px;font-weight:750;padding:1px 7px;border-radius:999px}
  .rescli-delta.pos{color:var(--success-fg);background:var(--success-bg)}
  .rescli-delta.neg{color:var(--error-fg);background:var(--error-bg)}
  .rescli-delta.flat{color:var(--text-2);background:var(--surface-2)}
  /* El % de participación no es una variación: no va ni verde ni rojo. Que un
     cliente sea el 40% del mes no es bueno ni malo por sí solo, y pintarlo de
     color lo haría leer como un resultado. */
  .rescli-delta.share{color:var(--turq-fg);background:var(--celeste)}
  .rescli-amt{text-align:right;font-size:12.5px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
  .rescli-bar-track{grid-column:1 / -1;height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
  .rescli-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--turq-d),var(--turq));box-shadow:0 0 0 1px rgba(0,0,0,.02) inset;transition:width .4s ease}
  .rescli-empty{font-size:12.5px;color:var(--text-2)}
  @media(max-width:980px){ .res-row{flex-direction:column} .res-row .res-card,.res-clients-card{flex-basis:auto;width:100%} }
  .res-check{margin-right:8px;accent-color:var(--turq);width:15px;height:15px;cursor:pointer;flex:0 0 auto}
  .res-cobro-nombre{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
  .res-fecha{font-size:10.5px;color:var(--text-2);margin-left:4px}
  .res-etq{font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--turq);border:1px solid var(--turq);border-radius:5px;padding:0 4px;margin-left:4px;font-weight:700}
  .res-cobro-line.vencido{background:var(--error-bg);border-color:var(--error)}
  .res-cobro-line.vencido .res-fecha{color:var(--error-fg);font-weight:700}
  .res-cobro-line.cobrado .res-fecha{color:var(--turq-fg);font-weight:600}

  /* ===== Modo espejo (ver como otro usuario) ===== */
  #espejoBanner{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:9999;
    align-items:center;gap:14px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;
    padding:10px 18px;border-radius:14px;box-shadow:0 10px 30px rgba(109,40,217,.4);font-size:13.5px}
  #espejoBanner b{font-weight:750}
  #espejoBanner .btn{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35);padding:6px 12px;font-size:12.5px}
  #espejoBanner .btn:hover{background:rgba(255,255,255,.28)}
  body.espejo-activo #espejoBanner{display:flex}
  /* Marco violeta sutil para que se note que estás espejando. */
  body.espejo-activo::after{content:"";position:fixed;inset:0;border:3px solid #7c3aed;border-radius:0;pointer-events:none;z-index:9998}
  #espejoToast{position:fixed;left:50%;transform:translateX(-50%);top:18px;z-index:10000;
    background:#111827;color:#fff;padding:9px 16px;border-radius:10px;font-size:13px;
    opacity:0;pointer-events:none;transition:opacity .2s,top .2s}
  #espejoToast.show{opacity:1;top:26px}

  /* Rol clínica (dueño del centro): solo ve su centro, oculta lo interno de NS */
  body.role-clinica .ns-only,
  body.role-clinica #clientNewBtn{display:none !important}

  /* Clínica: navega por el menú izquierdo, se oculta la barra de pestañas del
     cliente (OJO: .client-tabs se reusa en otras pantallas - Resumen,
     Nomencladores, Informes -, por eso va scopeado a #view-clientes; clínica
     nunca llega a esas otras vistas igual, pero mejor no depender de eso). */
  body.role-clinica #view-clientes .client-tabs{display:none}

  /* Rol operador_clinica (empleado del centro, no el dueño): mismo encierro que
     clínica - solo su centro, oculta lo interno de NS y navega por el menú
     izquierdo dentro de un cliente (Información básica/Pendientes). El scope a
     #view-clientes es necesario porque .client-tabs se reusa en otras pantallas
     (ej. la barra Generar/Varios pacientes de Informes, que no debe ocultarse). */
  body.role-operador_clinica .ns-only,
  body.role-operador_clinica #clientNewBtn{display:none !important}
  /* La barra de pestañas del cliente no va para este rol: sus herramientas
     están agrupadas en el MENÚ LATERAL (ver aplicarUsuario), no acá adentro. */
  body.role-operador_clinica #view-clientes .client-tabs{display:none}

  /* Roles colaboradores: NADA de lo interno de NS por defecto. Las herramientas
     se destapan una por una segun lo que el admin le haya tildado al usuario
     (ver aplicarUsuario). Es el mismo mecanismo de clinica/operador_clinica y no
     un parche por id: `navInformes` y `navNomencladores` son los unicos items que
     NO traen display:none en el HTML, asi que sin esta regla se filtraban esos dos
     y solo esos dos, una y otra vez. */
  body.role-colaborador .ns-only,
  body.role-colaborador #clientNewBtn,
  body.role-colaborador_oftalmo .ns-only,
  body.role-colaborador_oftalmo #clientNewBtn{display:none !important}
  /* El colaborador de oftalmo entra directo a su solapa: la barra de pestañas del
     cliente no le aporta nada porque tiene una sola. */
  body.role-colaborador_oftalmo #view-clientes .client-tabs{display:none}

  /* Rol demo en Afiliados: SOLO VE la lista y la búsqueda. Se ocultan las acciones
     (consultar cápita, credencial, subir turnera) — el backend igual las bloquea. */
  body.role-demo #view-padron .afil-tools,
  body.role-demo #view-padron .file-btn,
  body.role-demo #view-padron #padStatusText{display:none !important}

  /* Rol clínica en Nomencladores (12/09/2026, capacidad nueva): SOLO puede
     buscar y bajar Excel/PDF de lo que ya está cargado — nunca subir un
     nomenclador nuevo ni borrarlo, eso sigue siendo exclusivo de NS. El
     backend ya lo bloquea (esOperativo); esto es para no mostrar un botón
     que le tiraría error si lo toca. */
  body.role-clinica #view-nomencladores .nom-upload,
  body.role-clinica #view-nomencladores #nomDeleteBtn{display:none !important}

  /* ===== Honorarios y ganancia real ===== */
  .hon-totales{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 14px}
  .hon-tot{flex:1 1 180px;border:1px solid var(--border);border-radius:11px;padding:11px 15px;display:flex;justify-content:space-between;align-items:center;background:var(--surface-2)}
  .hon-tot span{font-size:12px;color:var(--text-2)}
  .hon-tot b{font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .hon-tot.out b{color:var(--error)}
  .hon-tot.net{background:linear-gradient(135deg,var(--turq,#12b3a6),color-mix(in srgb,var(--turq,#12b3a6) 55%,#0a7d73));border-color:transparent}
  .hon-tot.net span,.hon-tot.net b{color:#fff}
  .hon-table .num,.hon-table th.num{text-align:right;white-space:nowrap}
  .hon-table .hon-esp td{background:var(--surface-2);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2)}
  .hon-pago{display:flex;gap:6px;align-items:center}
  .hon-pago .hon-tipo{width:86px;flex:0 0 auto}
  .hon-pago .hon-valor{width:92px;flex:0 0 auto;text-align:right}
  .hon-table .hon-gan{font-weight:700;color:#0a8a4f}

  /* ===== Cabina de informes recibidos ===== */
  .cab-resumen{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
  /* .cab-chip es un <button>: le sacamos el reset nativo (font/outline) para
     que siga viéndose como el chip de siempre, y le sumamos cursor+transición
     porque ahora es clickeable (filtro rápido por estado). */
  .cab-chip{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease}
  .cab-chip.ok{background:color-mix(in srgb,#12b3a6 14%,var(--surface));border-color:color-mix(in srgb,#12b3a6 40%,var(--border));color:#0a7d73}
  .cab-chip.warn{background:color-mix(in srgb,#e8a13a 16%,var(--surface));border-color:color-mix(in srgb,#e8a13a 45%,var(--border));color:#a15c00}
  .cab-chip.bad{background:color-mix(in srgb,var(--error) 12%,var(--surface));border-color:color-mix(in srgb,var(--error) 40%,var(--border));color:var(--error)}
  .cab-chip.muted{opacity:.8}
  .cab-chip:hover{border-color:var(--turq);opacity:1}
  .cab-chip.on{border-color:var(--turq);box-shadow:0 0 0 3px var(--ring);opacity:1}
  /* Los chips son checkboxes: cuadradito ✓ tildado = se muestra; destildado = gris. */
  .cab-chip-box{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:4px;border:1.5px solid currentColor;font-size:10px;line-height:1;flex:0 0 auto;opacity:.6}
  .cab-chip.on .cab-chip-box{background:var(--turq);border-color:var(--turq);color:#04302f;opacity:1}
  .cab-chip.off{opacity:.5}
  .cab-chip.off:hover{opacity:.85}
  /* Buscador de paciente al lado del título "Informes". */
  /* El buscador se estira con el lugar que haya. Con ancho fijo el texto de adentro
     quedaba cortado: decia "archivo u OM" y la E de OME no entraba. */
  .cab-buscador{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text-2);flex:1 1 280px;max-width:460px;min-width:0}
  .cab-buscador input{border:none;background:transparent;padding:2px 0;font-size:12.5px;min-width:250px;width:100%;color:var(--text)}
  /* El campo de adentro no lleva el anillo de color de los .inp: no tiene borde
     propio, asi que el anillo quedaba flotando encima de la caja y se veia como un
     globo. La marca de foco va en la caja, que es lo que se ve como un solo control. */
  .cab-buscador input:focus{outline:none;box-shadow:none;border-color:transparent}
  .cab-buscador:focus-within{border-color:var(--turq)}
  .cab-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:750;padding:3px 9px;border-radius:999px;white-space:nowrap}
  /* Estado de la tarea (subiendo/auditando): chip notable, texto en llano. */
  .cab-estado{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;padding:6px 14px;border-radius:999px;white-space:nowrap}
  .cab-estado.is-working{background:rgba(20,150,150,.12);color:var(--turq-d,#0c7a7a);border:1px solid rgba(20,150,150,.35)}
  .cab-estado.is-working::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:cabspin .7s linear infinite;flex:0 0 auto;box-sizing:border-box}
  .cab-estado.is-error{background:rgba(220,38,38,.1);color:#dc2626;border:1px solid rgba(220,38,38,.35)}
  @keyframes cabspin{to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){.cab-estado.is-working::before{animation:none}}
  /* N° de OME: clic para copiar (y seleccionable). */
  .cab-ome{cursor:pointer;font-weight:700;user-select:all;border-bottom:1px dashed transparent;transition:color .12s}
  .cab-ome:hover{color:var(--turq-d,#0c7a7a);border-bottom-color:currentColor}
  .cab-ome.copiado{color:#16a34a;font-weight:800;border-bottom-color:transparent}
  /* Barra de selección múltiple (desestimar en lote). */
  .cab-bulkbar{align-items:center;gap:8px;padding:3px 8px 3px 10px;background:rgba(20,150,150,.10);border:1px solid rgba(20,150,150,.3);border-radius:8px;font-size:13px;white-space:nowrap}
  .cab-bulkbar b{font-size:14px}
  /* Modal de motivo al desestimar */
  .desest-motivos{display:flex;flex-wrap:wrap;gap:8px}
  .desest-chip{padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-size:13.5px;cursor:pointer;transition:border-color .12s,background .12s}
  .desest-chip:hover{border-color:var(--accent,#12b3a6)}
  .desest-chip.on{background:color-mix(in srgb,#12b3a6 16%,var(--surface));border-color:#12b3a6;color:#0a7d73;font-weight:600}
  .desest-edit-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px solid var(--border);font-size:13.5px}
  .desest-edit-add{display:flex;gap:8px;margin-top:10px}
  .desest-edit-add .inp{flex:1;min-width:0}
  .cab-badge.ok{background:color-mix(in srgb,#12b3a6 18%,var(--surface));color:var(--turq-fg)}
  .cab-badge.warn{background:color-mix(in srgb,#e8a13a 20%,var(--surface));color:var(--warning-fg)}
  .cab-badge.bad{background:color-mix(in srgb,var(--error) 15%,var(--surface));color:var(--error)}
  .cab-badge.muted{background:var(--surface-2);color:var(--text-2)}
  .cab-badge.fac{background:color-mix(in srgb,var(--info) 16%,var(--surface));color:var(--info)}
  /* Rango de fechas del mail (Informes recibidos): reusaba el grid de 6 columnas y
     "Hasta" caía en la de 72px (se cortaba "25/"). Layout propio: las dos fechas del
     mismo ancho y enteras. */
  #cabMailCard{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
  #cabMailCard .field{margin:0;min-width:0}
  #cabMailCard input[type="date"]{width:160px;min-width:0}
  .cab-chip.fac{background:color-mix(in srgb,var(--info) 14%,var(--surface));border-color:color-mix(in srgb,var(--info) 40%,var(--border));color:var(--info)}
  /* Encabezados que ordenan (clic) y la marca del paciente repetido. */
  .cab-th-orden{cursor:pointer;user-select:none;white-space:nowrap}
  .cab-th-orden:hover{color:var(--text)}
  .cab-th-orden.is-orden{color:var(--turq-d,#0a7d73)}
  .cab-orden-flecha{font-size:9px}
  .cab-repe{display:inline-block;margin-left:5px;padding:0 5px;border-radius:6px;font-size:10.5px;
    font-weight:800;background:color-mix(in srgb,#7a5cff 15%,var(--surface));color:#5a3ec8;vertical-align:middle}
  .cab-row{cursor:pointer}
  .cab-row:hover{background:var(--hover)}
  .cab-file{font-weight:650;word-break:break-word}
  .cab-sub{font-size:11.5px;color:var(--text-2);margin-top:2px}
  .cab-asunto{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2);font-size:12.5px}
  /* Observación (motivo del desestimado / nota del reclamo): mismo trato que el
     asunto, acotada para que no empuje la tabla. El texto completo va en el title. */
  .cab-obs{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2);font-size:12.5px}
  .cab-imgs{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;padding:1px 5px;border-radius:5px;background:color-mix(in srgb,#64748b 18%,var(--surface));color:var(--text);vertical-align:middle}
  .cab-ocr{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;padding:1px 5px;border-radius:5px;background:color-mix(in srgb,#7a5cff 16%,var(--surface));color:#5a3ec8;vertical-align:middle}
  .cab-actions{white-space:nowrap;text-align:right}
  /* La practica se partia en tres renglones y estiraba la fila entera, mientras
     "Asunto del mail" se llevaba 220px casi siempre vacios (13/09/2026). */
  .cab-practica{min-width:190px}
  .cab-asunto{max-width:150px}
  /* Mientras se sube a PAMI: la fila atenuada y sin invitar a que la toquen. */
  .cab-row-subiendo{opacity:.65;pointer-events:none}
  .cab-badge.subiendo{background:color-mix(in srgb,var(--info,#2563eb) 14%,var(--surface));color:var(--info,#2563eb);border-color:color-mix(in srgb,var(--info,#2563eb) 40%,var(--border))}
  /* Anterior / siguiente en la ficha del informe. */
  .cab-modal-nav{display:flex;align-items:center;gap:6px;margin-left:auto;margin-right:8px}
  /* El boton de subir, en la cabecera: al lado de las flechas con las que se pasa
     de un informe al siguiente. */
  .cab-head-subir{display:flex;align-items:center;gap:8px;margin-right:10px}
  .cab-head-subir .cab-sub{margin:0;white-space:nowrap}
  /* El .btn tiene alto fijo: si el texto se parte, se sale de la caja. */
  .cab-head-subir .btn{white-space:nowrap}
  .cab-modal-nav #cabModalPos{font-size:12px;color:var(--text-2);min-width:62px;text-align:center}
  .cab-modal-nav .rowbtn[disabled]{opacity:.35;cursor:default}
  /* El estado va ARRIBA del boton, no al costado: al lado empujaba el nombre de la
     practica y hacia tarjetas de cuatro renglones. */
  /* El "ver las de meses anteriores": un renglon de texto, no un boton mas. */
  .cab-vermas{display:block;width:100%;margin-top:8px;padding:6px 0;background:none;border:0;
    border-top:1px dashed var(--border);color:var(--text-2);font-size:12px;font-weight:650;cursor:pointer}
  .cab-vermas:hover{color:var(--text)}
  .cab-cand-acc{display:flex;flex-direction:column;align-items:stretch;gap:5px;flex:0 0 auto;text-align:center}
  .cab-cand-acc .cab-badge{margin:0}
  .cab-actions .rowbtn{margin-left:2px}
  /* Encabezado compacto de Informes recibidos: una sola barra */
  /* La cabecera de la cabina es el mismo caso que .nom-status, pero tiene clase
     propia y se me habia pasado: sin el marco quedaban los controles arriba a la
     izquierda, corridos 14px, y un hueco hasta la tabla sin nada que lo cerrara.
     Se alinea con el resto y lleva su linea. */
  .cab-head{display:flex;flex-direction:column;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);margin-bottom:14px}
  .cab-head-desc{font-size:12.5px;color:var(--text-2);line-height:1.4}
  .cab-head-controls{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end}
  .cab-mailbox{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
  .cab-head-info{display:flex;flex-direction:column;gap:2px;margin-left:auto;text-align:right;align-self:center}
  .cab-head-info .cab-sub{font-size:11.5px;color:var(--text-2)}
  .lc-head-card{padding:10px 0 12px}
  .lc-head-card #lcStatusText span{font-size:12.5px;color:var(--text-2)}
  .lc-filters{grid-template-columns:150px 150px minmax(190px,1fr) 130px minmax(220px,1.2fr) auto;align-items:end}
  .lc-actions,.lc-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .lc-actions{justify-content:flex-end}
  .lc-toolbar{justify-content:flex-end}
  .lc-table{min-width:1180px}
  .lc-table th:first-child,.lc-table td:first-child{width:34px;text-align:center}
  .lc-table th:last-child,.lc-table td:last-child{width:54px;text-align:right}
  .lc-check{width:16px;height:16px;accent-color:var(--turq);cursor:pointer}
  @media(max-width:980px){.lc-filters{grid-template-columns:1fr 1fr}.lc-actions,.lc-toolbar{justify-content:flex-start}}
  @media(max-width:620px){.lc-filters{grid-template-columns:1fr}.lc-toolbar{align-items:flex-start}}
  /* El visor es lo que se mira para decidir: se le da todo el ancho que sobre.
     La columna de candidatos va FIJA (antes era una fracción, así que al agrandar
     el modal crecía ella también y el PDF seguía angosto); 400px alcanzan para
     leer las prácticas y todo lo demás queda para el documento. */
  .cab-modal{width:min(1700px,calc(100vw - 24px))}
  /* Alto FIJO, no el del contenido: la ficha se armaba tan alta como la columna
     de la derecha, asi que un informe con un solo candidato dejaba el visor del PDF
     chiquito y la ventana saltaba de tamano segun a cual entrabas (13/09/2026). */
  /* La columna de la derecha pasó de 400 a 470: con 400 cada candidato ocupaba
     tres o cuatro renglones por el quiebre del nombre y del número de OME, y la
     sugerencia quedaba abajo de todo, fuera de la pantalla. Ensanchar la columna
     acorta la lista a lo alto, que es lo que hacía falta. */
  /* El ancho de la derecha sale de una variable para que el divisor lo pueda mover
     y quede guardado. 470px es el arranque, no un límite. */
  .cab-modal-body{display:grid;grid-template-columns:minmax(0,1fr) 6px var(--cab-lado,470px);gap:0;padding:0;height:calc(100vh - 96px);max-height:calc(100vh - 96px)}
  .cab-zoom{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-2);
    margin-right:10px;white-space:nowrap}
  .cab-zoom select{font-size:11.5px;width:auto}
  @media(max-width:820px){ .cab-zoom{display:none} }
  .cab-divisor{cursor:col-resize;background:var(--border);position:relative}
  .cab-divisor:hover,.cab-divisor.arrastrando{background:var(--turq)}
  /* Zona de agarre más ancha que la línea: 6px de blanco son imposibles de agarrar
     con el mouse, pero una línea de 6px es lo que se ve bien. */
  .cab-divisor::after{content:'';position:absolute;top:0;bottom:0;left:-5px;right:-5px}
  .cab-modal-file{border-right:1px solid var(--border);min-height:520px;background:var(--surface-2)}
  .cab-modal-file iframe{width:100%;height:100%;min-height:520px;border:0;display:block}
  /* Cuando el PDF se abre aparte (Chrome de Android), la caja del archivo no tiene
     que seguir ocupando media pantalla: se achica al botón. */
  .cab-modal-file.cab-file-compacto{min-height:0}
  .cab-doc-pags{display:flex;flex-direction:column;gap:10px;padding:10px;background:var(--surface-2);
    min-height:0;height:auto;max-height:70vh;overflow:auto;white-space:normal}
  .cab-pag{width:100%;display:block;border:1px solid var(--border);border-radius:8px;background:#fff}
  .cab-doc-cargando{padding:26px 0;text-align:center;color:var(--text-2);font-size:12.5px}
  .cab-doc-link{display:block;text-align:center;font-size:12.5px;color:var(--turq);padding:4px 0 2px}
  .cab-doc-abrir{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:11px;text-align:center;min-height:0;height:auto;white-space:normal;padding:22px 18px}
  .cab-doc-abrir .btn{text-decoration:none}
  .cab-doc-abrir-nm{font-size:13px;font-weight:650;word-break:break-word}
  .cab-doc-texto{height:100%;min-height:520px;max-height:80vh;overflow:auto;padding:20px 22px;white-space:pre-wrap;word-break:break-word;font-size:13.5px;line-height:1.55;color:var(--text-1);background:var(--surface-1)}
  .cab-modal-side{padding:16px 18px;overflow:auto;display:flex;flex-direction:column;gap:14px}
  /* Las acciones van ARRIBA de todo y pegadas: es lo primero que se decide
     mirando el informe, y abajo quedaban tapadas por la lista de candidatos
     (que puede ser larga) o directamente fuera de la pantalla. */
  .cab-acciones{position:sticky;top:-16px;z-index:2;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
    margin:-16px -18px 0;padding:11px 18px;background:var(--surface);border-bottom:1px solid var(--border)}
  .cab-acciones .cab-sub{margin:0}
  /* Las acciones se fueron a la cabecera: la barra vacia no deja su borde suelto. */
  .cab-acciones:empty{display:none}
  .cab-datos-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cab-dato{display:flex;flex-direction:column;gap:2px;border:1px solid var(--border);border-radius:9px;padding:7px 10px;background:var(--surface-2)}
  .cab-dato span{font-size:10.5px;font-weight:750;text-transform:uppercase;letter-spacing:.03em;color:var(--text-2)}
  .cab-dato b{font-size:13px;word-break:break-word}
  .cab-estado-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
  .cab-cand-title{font-size:12px;font-weight:800;color:var(--text-2);text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
  .cab-cand{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:10px;padding:6px 10px;margin-top:5px}
  /* Un candidato que NO es del paciente del informe. No se esconde nunca y se
     pinta: es lo más importante que puede aparecer en esta lista. */
  .cab-otro-paciente{color:var(--error-fg);font-weight:700}
  .cab-cand-main{flex:1;min-width:0}
  .cab-cand-main b{font-size:12.5px;word-break:break-word}
  .cab-cand-ck{width:17px;height:17px;flex:0 0 auto;cursor:pointer;accent-color:var(--brand,#0aa)}
  /* Informe de continuacion. Va SEPARADO de los candidatos y se ve distinto a
     proposito: los de arriba son OMEs que este informe cubre; esto es un informe
     que todavia no existe y que se propone crear. Mezclarlos invita a confundir
     "esto ya esta" con "esto habria que hacerlo". */
  .cab-continuacion{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
  .cab-cont{background:var(--celeste);border-left:3px solid var(--turq);padding:11px 13px;margin-bottom:8px}
  .cab-cont-tit{font-size:13px;font-weight:800;color:var(--turq-fg);margin-bottom:3px}
  .cab-cont-sub{font-size:12px;color:var(--text);line-height:1.45}
  .cab-cont-est{font-size:12px;font-weight:700;color:var(--text);margin:7px 0 9px}
  /* El borrador ESTANDAR se ve DISTINTO del derivado, y es a proposito: el
     derivado sale del informe y este de valores de referencia. Si los dos se
     vieran igual, el aviso escrito seria lo unico que los separa — y un aviso
     que hay que leer para notar la diferencia se deja de leer a la semana. */
  .cab-cont-est{background:var(--warning-bg,#fff7e6);border-color:var(--warning,#e0a800)}
  [data-theme="dark"] .cab-cont-est{background:color-mix(in srgb,var(--warning) 12%,var(--surface-2))}
  .cab-cont-est .cab-cont-tit{color:var(--warning-fg)}
  .cab-est-aviso{font-size:11.5px;line-height:1.5;color:var(--text);margin:8px 0 10px;
    padding:7px 9px;border-radius:8px;background:var(--surface);border:1px solid var(--warning)}
  .cab-est-campos{margin-bottom:10px}
  .cab-est-fila{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px;font-size:11.5px}
  .cab-est-fila > b{min-width:64px;font-size:11.5px}
  .cab-est-campo{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-2)}
  .cab-est-campo input{width:58px;font-size:11.5px;text-align:right}
  .cab-est-vol{font-size:11px;font-weight:700;color:var(--turq-fg);white-space:nowrap}
  .cab-est-nota{font-size:11px;color:var(--text-2);margin-top:2px}
  .cab-cont-preset{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
    font-size:11.5px;color:var(--text-2);margin:0 0 7px}
  .cab-cont-preset select{max-width:100%;font-size:11.5px}
  .cab-cont-motivos{margin:0 0 9px;padding-left:16px;font-size:11.5px;color:var(--text-2);line-height:1.6}
  .cab-cont-datos{margin-top:10px;border-top:1px solid var(--border);padding-top:9px}
  /* Lo leído y lo deducido van en bloques separados y rotulados. Es la regla que
     ordena toda esta función: un número medido por el ecógrafo y una conclusión
     nuestra no pueden parecer la misma cosa. */
  .cab-dato-tit{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    color:var(--text-2);margin:7px 0 4px}
  .cab-dato-lista{list-style:none;margin:0;padding:0;font-size:11.5px;line-height:1.5}
  .cab-dato-lista li{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0}
  .cab-dato-que{font-weight:700;color:var(--text);min-width:130px}
  .cab-dato-val{color:var(--text);flex:1 1 auto;min-width:0}
  .cab-dato-regla{width:100%;color:var(--text-2);font-style:italic}
  [data-theme="dark"] .cab-cont{background:var(--surface-2)}
  /* Va ARRIBA de la lista y fina: es una confirmacion de lo que ya tildaste, no
     un boton grande que compita con las tarjetas de abajo. */
  /* Titulo y boton en el MISMO renglon: el titulo ocupa dos lineas y al lado del
     boton quedaba un hueco vacio a la izquierda (13/09/2026). */
  .cab-cand-head{display:flex;align-items:flex-start;gap:10px}
  .cab-cand-head .cab-cand-title{flex:1;min-width:0;margin:0}
  .cab-selbar{display:flex;justify-content:flex-end;flex:0 0 auto;margin:0}
  .cab-selbar .btn{padding:4px 12px;font-size:12.5px;font-weight:700;border-radius:8px}
  /* Aviso de debito en la cabina: lo que se esta por subir se pisa con otra practica
     del mismo dia y PAMI va a debitar una. No bloquea, avisa. */
  .cab-plan{margin-top:10px;border:1px solid var(--turq,#0aa);background:rgba(10,170,170,.08);border-radius:10px;padding:9px 11px}
  .cab-plan-head{font-weight:800;font-size:12.5px;color:var(--turq,#0aa);margin-bottom:5px}
  .cab-plan-item{font-size:12px;line-height:1.45}
  .cab-plan-item + .cab-plan-item{margin-top:4px}
  /* La que no se cobra queda apagada; la que conviene sumar, resaltada. */
  .cab-cand-no{opacity:.72;border-style:dashed}
  .cab-cand-si{border-color:var(--turq,#0aa);box-shadow:inset 3px 0 0 var(--turq,#0aa)}
  .cab-cand-fuera{opacity:.5}
  .cab-cand-nota{font-size:11.5px;line-height:1.45;color:var(--text-2);margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .cab-cand-otrodia,.cab-cand-nodescribe{color:#b45309}
  .cab-debito{margin-top:10px;border:1px solid #f0b429;background:rgba(240,180,41,.10);border-radius:10px;padding:9px 11px}
  .cab-debito-head{font-weight:800;font-size:12.5px;color:#a16207;margin-bottom:5px}
  .cab-debito-item{font-size:12px;line-height:1.45}
  .cab-debito-item + .cab-debito-item{margin-top:5px;padding-top:5px;border-top:1px dashed rgba(161,98,7,.35)}
  .btn-sm{padding:5px 12px;font-size:12px}
  /* Un solo bloque para las dos cosas que se completan a mano. El input y su
     boton comparten alto y viven en una grilla, asi quedan alineados de verdad
     (antes el boton era mas alto que el campo y cada bloque cortaba distinto). */
  .cab-manual{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border);padding-top:12px}
  .cab-manual-tit{font-size:12px;font-weight:800;color:var(--text-2);text-transform:uppercase;letter-spacing:.03em}
  .cab-manual-fila{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}
  .cab-manual-fila .inp{height:34px;min-width:0;padding:5px 10px;font-size:13px}
  .cab-manual-fila .btn{height:34px;padding:0 14px;font-size:12.5px;white-space:nowrap}
  .cab-manual-sub{font-size:11.5px;color:var(--text-2);line-height:1.35;margin:-1px 0 5px}
  .cab-manual-sub:last-child{margin-bottom:0}
  /* En pantallas medianas la columna fija le comería demasiado al visor. */
  /* Escalón intermedio: en pantallas de notebook los 470px le sacarían demasiado
     al visor del PDF, que es lo que se está leyendo. */
  @media(max-width:1440px){ .cab-modal-body{grid-template-columns:minmax(0,1fr) 6px var(--cab-lado,400px)} }
  @media(max-width:1180px){ .cab-modal-body{grid-template-columns:minmax(0,1fr) 6px var(--cab-lado,340px)} }
  @media(max-width:820px){ .cab-modal-body{grid-template-columns:1fr;height:auto}.cab-divisor{display:none}.cab-modal-file{border-right:0;border-bottom:1px solid var(--border);min-height:300px}.cab-modal-file.cab-file-compacto{min-height:0}.cab-datos-grid{grid-template-columns:1fr} }