/* ============================================================================
   Intranet PSE: componentes. Consume SOLO los tokens de /pse-tokens.css.
   Dirección «Mostrador» (docs/DECISIONES_NUCLEO.md D5): columna navy, cabecera
   blanca con migas, título y pestañas, contenido denso para trabajo de oficina.

   Índice
     1. Base               5. Botones            9. Chips y avisos
     2. Marco: menú        6. Campos            10. Estados (vacío, error, cargando, apagado)
     3. Marco: barra       7. Paneles           11. Diálogos, lupa, ayuda
     4. Cabecera y pestañas 8. Tablas           12. Celular e impresión
   Las clases del marco empiezan con mk- (no chocan con el CSS de cada sección);
   las de página con pg-; los componentes tienen nombres cortos y genéricos.
   ========================================================================== */

/* ── 1. Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* `clip` y no `hidden` (ticket #42, 18/10/2026): `overflow-x:hidden` en html y body convierte al
   body en un contenedor de desplazamiento que nunca se desplaza, y la barra de arriba (sticky)
   se iba con la página. `clip` recorta igual sin romper el sticky; `hidden` queda para navegadores viejos. */
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;overflow-x:clip}
/* Con la barra fija, saltar a un ancla (#t40) no deja el destino tapado por ella. */
html{scroll-padding-top:calc(var(--topbar-h) + 8px)}
body{font-family:var(--font-text);font-size:var(--text-base);line-height:var(--leading-ui);color:var(--color-text);background:var(--color-background);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote{margin:0}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--weight-semibold);color:var(--color-heading);line-height:var(--leading-tight)}
a{color:inherit;text-decoration:none}
:where(a:not([class])){color:var(--color-interactive);text-decoration:underline;text-underline-offset:2px}
img,svg{max-width:100%}
code,kbd{font-family:var(--font-mono);font-size:.92em}
code{background:var(--color-surface-2);border:1px solid var(--color-border);padding:1px 6px;border-radius:var(--radius-xs)}
::selection{background:var(--navy-200);color:var(--navy-950)}
.ti{line-height:1}
.oculto-visual{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mk-salto{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--color-surface);color:var(--color-heading);padding:8px 14px;border-radius:var(--radius-sm);box-shadow:var(--shadow-overlay)}
.mk-salto:focus{left:8px}

/* ── 2. Marco: menú lateral ──────────────────────────────────────────────── */
.mk-side{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:var(--color-sidebar);color:var(--color-sidebar-text);display:flex;flex-direction:column;z-index:var(--z-sidebar);transition:width var(--motion-base) var(--ease),transform var(--motion-base) var(--ease)}
.mk-marca{display:flex;align-items:center;gap:10px;padding:0 18px;height:var(--topbar-h);color:#fff;font-family:var(--font-display);font-size:15px;font-weight:var(--weight-semibold);flex-shrink:0}
.mk-marca img{height:30px;width:30px;border-radius:var(--radius-sm);flex-shrink:0}
.mk-nav{flex:1;overflow-y:auto;padding:4px 10px 16px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;overscroll-behavior:contain}
.mk-g{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;font-family:inherit;font-size:var(--text-sm);color:#fff;padding:20px 10px 6px;font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.07em}
/* Grupos plegables (17/10/2026): el título abre y cierra; la flecha gira. Un punto naranja avisa
   que adentro de un grupo cerrado hay algo esperando. */
.mk-g>span:first-child{flex:1;min-width:0}
.mk-g:hover{color:#fff;background:var(--color-sidebar-hover)}
.mk-g:focus-visible{outline:2px solid var(--orange-500);outline-offset:-2px}
.mk-g-fl{font-size:14px;opacity:.6;transition:transform var(--motion-fast) var(--ease)}
.mk-cerrado .mk-g-fl{transform:rotate(-90deg)}
.mk-cerrado .mk-gi{display:none}
.mk-g-n{width:7px;height:7px;border-radius:50%;background:var(--orange-500);display:none;flex-shrink:0}
.mk-cerrado .mk-g-n{display:inline-block}
.mk-gr[data-gr="apagado"] .mk-g{color:var(--color-sidebar-muted)}
.mk-it{display:flex;align-items:center;gap:10px;padding:7px 10px;margin:1px 0;border-radius:var(--radius-sm);font-size:var(--text-base);color:var(--color-sidebar-text);line-height:1.3;position:relative;transition:background var(--motion-fast) var(--ease)}
.mk-it i{font-size:18px;flex-shrink:0;width:20px;text-align:center}
/* El ícono de Conversaciones va en el verde de WhatsApp, también activo o apagado (pedido de Hernán, 12/10/2026). */
.mk-it i.ti-brand-whatsapp,.mk-it.mk-on i.ti-brand-whatsapp{color:var(--whatsapp-500);opacity:1}
.mk-it:hover{background:var(--color-sidebar-hover);color:#fff}
.mk-it.mk-on{background:var(--color-sidebar-active);color:#fff;font-weight:var(--weight-medium);box-shadow:inset 3px 0 0 var(--orange-500)}
.mk-it.mk-off{color:var(--color-sidebar-muted)}
.mk-it.mk-off i{opacity:.7}
.mk-off-chip{margin-left:auto;font-size:11px;line-height:16px;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-pill);padding:0 7px;color:var(--color-sidebar-muted);flex-shrink:0}
.mk-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-n{background:var(--orange-500);color:var(--navy-900);font-size:11px;font-weight:var(--weight-semibold);min-width:20px;height:20px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;padding:0 6px;flex-shrink:0}
.mk-cuerpo{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;transition:margin-left var(--motion-base) var(--ease)}
#mkMain{flex:1;display:flex;flex-direction:column;min-width:0}
#mkMain:focus{outline:none}

/* Menú angosto en escritorio: quedan los íconos, el nombre va como título. */
body.mk-col .mk-side{width:var(--sidebar-w-col)}
body.mk-col .mk-cuerpo{margin-left:var(--sidebar-w-col)}
body.mk-col .mk-lbl,body.mk-col .mk-marca span,body.mk-col .mk-off-chip{display:none}
body.mk-col .mk-g{font-size:0;padding:0;margin:10px 12px 6px;border-top:1px solid var(--color-sidebar-line)}
/* Con el menú angosto no hay título para tocar: se ven todos los íconos. */
body.mk-col .mk-g{pointer-events:none;width:auto;border-radius:0;height:0}
body.mk-col .mk-g .ti,body.mk-col .mk-g-n{display:none}
body.mk-col .mk-cerrado .mk-gi{display:block}
body.mk-col .mk-it{justify-content:center;padding:10px 0}
body.mk-col .mk-n{position:absolute;top:4px;right:9px;min-width:8px;width:8px;height:8px;padding:0;font-size:0}
body.mk-col .mk-marca{justify-content:center;padding:0}

/* ── 3. Marco: barra de arriba ───────────────────────────────────────────── */
.mk-top{position:sticky;top:0;z-index:var(--z-top);height:var(--topbar-h);display:flex;align-items:center;gap:8px;padding:0 20px 0 12px;background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.mk-btn{background:none;border:1px solid transparent;border-radius:var(--radius-sm);width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-muted);font-size:20px;flex-shrink:0;font-family:inherit}
.mk-btn:hover{background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-heading)}
.mk-migas{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--text-sm);color:var(--color-muted);flex:1}
.mk-migas ol{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;min-width:0;overflow:hidden}
.mk-migas li{display:flex;align-items:center;gap:6px;white-space:nowrap;min-width:0}
.mk-migas li+li::before{content:"/";color:var(--color-border-strong)}
.mk-migas a{color:var(--color-muted);border-radius:var(--radius-xs);padding:2px 2px}
.mk-migas a:hover{color:var(--color-interactive);text-decoration:underline}
.mk-migas [aria-current]{color:var(--color-text);font-weight:var(--weight-medium);overflow:hidden;text-overflow:ellipsis}
.mk-lupa{width:min(320px,32vw);display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-muted);font-family:inherit;font-size:var(--text-sm);cursor:pointer;text-align:left;flex-shrink:0}
.mk-lupa:hover{border-color:var(--color-border-strong);color:var(--color-text)}
.mk-lupa span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-kbd{font-size:11px;border:1px solid var(--color-border-strong);border-radius:var(--radius-xs);padding:0 5px;background:var(--color-surface);color:var(--color-muted);white-space:nowrap;font-family:var(--font-text)}
.mk-yo{position:relative;flex-shrink:0}
.mk-av{width:34px;height:34px;border-radius:50%;background:var(--navy-700);color:#fff;border:none;font-family:inherit;font-size:12px;font-weight:var(--weight-semibold);cursor:pointer}
.mk-menu{position:absolute;right:0;top:42px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay);min-width:236px;padding:6px;display:none}
.mk-yo.mk-abierto .mk-menu{display:block}
/* La campanita (07/10/2026): notificaciones del usuario logueado. En el celular el desplegable
   ocupa el ancho de la pantalla, debajo de la barra. */
.mk-camp{position:relative;flex-shrink:0}
.mk-camp .mk-btn{position:relative}
.mk-camp-n{position:absolute;top:1px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:var(--radius-pill);background:var(--orange-500);color:var(--navy-900);font-size:10.5px;font-weight:var(--weight-semibold);line-height:17px;text-align:center;font-family:var(--font-text)}
.mk-camp-n[hidden]{display:none}
.mk-camp-menu{position:absolute;right:0;top:42px;width:min(380px,calc(100vw - 16px));background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay);display:none;overflow:hidden}
.mk-camp.mk-abierto .mk-camp-menu{display:block}
.mk-camp-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--color-border);color:var(--color-heading)}
.mk-camp-cab button{background:none;border:none;font:inherit;font-size:var(--text-sm);color:var(--color-interactive);cursor:pointer;padding:2px 4px;border-radius:var(--radius-xs)}
.mk-camp-cab button:hover{text-decoration:underline}
.mk-camp-cab button[hidden]{display:none}
.mk-camp-lista{max-height:min(420px,60vh);overflow-y:auto}
.mk-camp-it{display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px 14px;background:none;border:none;border-bottom:1px solid var(--color-border);font:inherit;color:var(--color-text);text-align:left;cursor:pointer}
.mk-camp-it:last-child{border-bottom:none}
.mk-camp-it:hover,.mk-camp-it:focus-visible{background:var(--color-surface-2)}
.mk-camp-it>.ti{font-size:19px;color:var(--color-muted);flex-shrink:0;margin-top:1px}
.mk-camp-it span{display:flex;flex-direction:column;gap:2px;min-width:0}
.mk-camp-it b{font-weight:var(--weight-regular);overflow-wrap:anywhere}
.mk-camp-it small{font-size:var(--text-xs);color:var(--color-muted)}
.mk-camp-nueva{background:var(--color-info-bg)}
.mk-camp-nueva b{font-weight:var(--weight-semibold);color:var(--color-heading)}
.mk-camp-nueva>.ti{color:var(--color-info)}
.mk-camp-nada{margin:0;padding:18px 14px;color:var(--color-muted);font-size:var(--text-sm);line-height:var(--leading-body)}
@media (max-width:900px){.mk-camp{position:static}.mk-camp-menu{position:fixed;left:8px;right:8px;top:calc(var(--topbar-h) + 4px);width:auto}}
.mk-menu .mk-quien{padding:8px 10px 10px;border-bottom:1px solid var(--color-border);margin-bottom:6px;font-weight:var(--weight-semibold);color:var(--color-heading)}
.mk-menu .mk-quien small{display:block;font-weight:var(--weight-regular);color:var(--color-muted);font-size:var(--text-xs)}
.mk-menu a,.mk-menu button{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--color-text);width:100%;background:none;border:none;font:inherit;cursor:pointer;text-align:left}
.mk-menu a:hover,.mk-menu button:hover{background:var(--color-surface-2)}
.mk-menu .mk-sep{height:1px;background:var(--color-border);margin:6px 0}
.mk-tema{display:flex;gap:4px;padding:4px 6px 6px}
.mk-tema button{flex:1;justify-content:center;font-size:var(--text-xs);padding:6px;border:1px solid var(--color-border)}
.mk-tema button[aria-pressed="true"]{background:var(--color-surface-3);border-color:var(--color-border-strong);font-weight:var(--weight-semibold)}
.mk-velo{display:none;position:fixed;inset:0;background:var(--color-overlay);z-index:var(--z-velo)}
.mk-barra,.mk-solo-cel{display:none}

/* ── 4. Cabecera de pantalla y pestañas ──────────────────────────────────── */
.pg-cab{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:20px 32px 0}
.pg-cab-fila{display:flex;align-items:flex-start;gap:16px;max-width:var(--content-max)}
.pg-cab-txt{min-width:0;flex:1}
.pg-cab h1{font-size:var(--text-2xl);display:flex;align-items:center;gap:10px}
.pg-cab h1 .ti{font-size:22px;color:var(--color-muted)}
.pg-bajada{color:var(--color-muted);margin-top:4px;max-width:var(--text-max)}
.pg-acc{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
.pg-cab.pg-sin-tabs{padding-bottom:20px}
.pg-tabs{display:flex;gap:2px;margin-top:14px;overflow-x:auto;scrollbar-width:none;max-width:var(--content-max)}
.pg-tabs::-webkit-scrollbar{display:none}
.pg-tabs a{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;color:var(--color-muted);border-bottom:2px solid transparent;font-weight:var(--weight-medium);white-space:nowrap;border-radius:var(--radius-xs) var(--radius-xs) 0 0}
.pg-tabs a:hover{color:var(--color-heading);background:var(--color-surface-2)}
.pg-tabs a[aria-current]{color:var(--color-heading);border-color:var(--color-primary)}
.pg-tabs a.mk-off{color:var(--color-faint)}
.pg-tabs .mk-n{font-size:10.5px;min-width:18px;height:18px}
.pg-cuerpo{padding:24px 32px 40px;width:100%;max-width:calc(var(--content-max) + 64px)}
.pg-cuerpo.pg-angosto{max-width:calc(900px + 64px)}
.pg-seccion+.pg-seccion{margin-top:28px}
.pg-seccion>h2{font-size:var(--text-lg);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.pg-seccion>h2 small{font-family:var(--font-text);font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-muted)}

/* ── 5. Botones ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--radius-sm);font:var(--weight-medium) var(--text-base)/1 var(--font-text);border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease)}
.btn:hover{background:var(--color-surface-2);border-color:var(--color-faint)}
.btn .ti{font-size:17px}
.btn-pri{background:var(--color-cta);border-color:var(--color-cta);color:var(--color-on-cta)}
.btn-pri:hover{background:var(--color-cta-hover);border-color:var(--color-cta-hover)}
.btn-sec{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}
.btn-sec:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--color-interactive)}
.btn-ghost:hover{background:var(--color-surface-3);border-color:transparent}
.btn-peligro{color:var(--color-error);border-color:var(--color-error-border)}
.btn-peligro:hover{background:var(--color-error-bg);border-color:var(--color-error)}
.btn-peligro-lleno{background:var(--color-error);border-color:var(--color-error);color:#fff}
.btn-sm{height:30px;padding:0 10px;font-size:var(--text-sm)}
.btn-lg{height:44px;padding:0 20px;font-size:var(--text-md)}
.btn-ancho{width:100%}
.btn-outline{background:transparent}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--color-neutral-bg);border-color:var(--color-border);color:var(--color-faint);cursor:not-allowed}
.btn-icono{width:36px;padding:0}
.btn-wa{background:var(--whatsapp-500);border-color:var(--whatsapp-500);color:#052E16}

/* ── 6. Campos ───────────────────────────────────────────────────────────── */
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo>label,.etiqueta{font-size:var(--text-sm);color:var(--color-text);font-weight:var(--weight-medium)}
.campo small,.ayuda-campo{font-size:var(--text-xs);color:var(--color-muted)}
input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden])),:where(select,textarea){font:var(--text-base)/1.4 var(--font-text);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);padding:8px 10px;min-height:36px;max-width:100%;transition:border-color var(--motion-fast) var(--ease),box-shadow var(--motion-fast) var(--ease)}
:where(textarea){min-height:84px;resize:vertical;width:100%}
::placeholder{color:var(--color-faint)}
:where(input,select,textarea):hover:not(:disabled){border-color:var(--color-faint)}
:where(input,select,textarea):focus-visible{outline:none;border-color:var(--color-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-focus) 25%,transparent)}
:where(input,select,textarea):disabled{background:var(--color-surface-2);color:var(--color-faint)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--color-error)}
:where(input[type=checkbox],input[type=radio]){accent-color:var(--color-primary);width:16px;height:16px;margin:0;vertical-align:-3px}
.fila-campos{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.fila-campos>.campo{flex:1 1 180px}
.opcion{display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:4px 0}
.form-pie{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}

/* Interruptor (checkbox con role=switch) */
.switch{appearance:none;-webkit-appearance:none;width:40px!important;height:22px!important;border-radius:var(--radius-pill);background:var(--color-border-strong);position:relative;cursor:pointer;flex-shrink:0;transition:background var(--motion-fast) var(--ease);border:none;vertical-align:middle}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--motion-fast) var(--ease)}
.switch:checked{background:var(--color-primary)}
.switch:checked::after{transform:translateX(18px)}
.switch:disabled{opacity:.5;cursor:not-allowed}

/* ── 7. Paneles y tarjetas ───────────────────────────────────────────────── */
.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.panel-pad{padding:16px 18px}
.grupo-enlaces{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.grupo-enlace{display:flex;align-items:center;gap:12px;color:var(--color-text);text-decoration:none}
.grupo-enlace:hover{border-color:var(--color-primary);background:var(--color-surface-2)}
.grupo-enlace i{font-size:24px;color:var(--color-primary)}
.panel-cab{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--color-border)}
.panel-cab h2,.panel-cab h3{font-size:var(--text-lg);flex:1;min-width:0}
.panel-cab p{color:var(--color-muted);font-size:var(--text-sm)}
.panel-pie{padding:12px 18px;border-top:1px solid var(--color-border);background:var(--color-surface-2);border-radius:0 0 var(--radius-md) var(--radius-md)}
.grilla{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.dos-col{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:inherit;transition:border-color var(--motion-fast) var(--ease)}
a.kpi:hover{border-color:var(--color-border-strong)}
.kpi-n{font:var(--weight-semibold) var(--text-3xl)/1.1 var(--font-display);color:var(--color-heading);font-variant-numeric:tabular-nums}
.kpi-t{color:var(--color-muted)}
.kpi-d{font-size:var(--text-xs);color:var(--color-faint);margin-top:4px}
.kpi.kpi-alerta{border-left:3px solid var(--orange-500)}
.lista-def{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px}
.lista-def dt{color:var(--color-muted)}
.lista-def dd{margin:0}

/* ── 8. Tablas ───────────────────────────────────────────────────────────── */
.tabla-caja{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.tabla-caja>table,.tabla{width:100%;border-collapse:collapse;font-size:var(--text-base)}
.tabla th,.tabla-caja th{text-align:left;font-weight:var(--weight-medium);color:var(--color-muted);font-size:var(--text-xs);padding:10px 14px;border-bottom:1px solid var(--color-border);background:var(--color-surface-2);white-space:nowrap}
.tabla td,.tabla-caja td{padding:10px 14px;border-bottom:1px solid var(--color-border);vertical-align:top}
.tabla tr:last-child td,.tabla-caja tr:last-child td{border-bottom:none}
.tabla tbody tr:hover,.tabla-caja tbody tr:hover{background:var(--color-surface-3)}
.tabla .num,.tabla-caja .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla-caja th:first-child{border-top-left-radius:var(--radius-md)}
.tabla-caja th:last-child{border-top-right-radius:var(--radius-md)}

/* ── 9. Chips y avisos ───────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--radius-pill);padding:1px 9px;font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:20px;white-space:nowrap;background:var(--color-neutral-bg);color:var(--color-neutral)}
.chip-punto::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.chip-ok{background:var(--color-success-bg);color:var(--color-success)}
.chip-warn{background:var(--color-warning-bg);color:var(--color-warning)}
.chip-err{background:var(--color-error-bg);color:var(--color-error)}
.chip-info{background:var(--color-info-bg);color:var(--color-info)}
.chip-neutro{background:var(--color-neutral-bg);color:var(--color-neutral)}
.msj{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--color-info-border);background:var(--color-info-bg);color:var(--color-text);line-height:var(--leading-body)}
.msj>.ti{font-size:19px;color:var(--color-info);flex-shrink:0;margin-top:1px}
.msj b{color:inherit}
.msj-ok{border-color:var(--color-success-border);background:var(--color-success-bg)}.msj-ok>.ti{color:var(--color-success)}
.msj-warn{border-color:var(--color-warning-border);background:var(--color-warning-bg)}.msj-warn>.ti{color:var(--color-warning)}
.msj-err{border-color:var(--color-error-border);background:var(--color-error-bg)}.msj-err>.ti{color:var(--color-error)}
.texto-muted{color:var(--color-muted)}
.texto-chico{font-size:var(--text-sm)}
.texto-ok{color:var(--color-success)}
.texto-err{color:var(--color-error)}
.texto-warn{color:var(--color-warning)}

/* ── 10. Estados ─────────────────────────────────────────────────────────── */
.vacio{text-align:center;padding:36px 20px;color:var(--color-muted)}
.vacio>.ti{font-size:34px;color:var(--color-faint);display:block;margin:0 auto 10px}
.vacio h3{font-size:var(--text-lg);margin-bottom:4px}
.vacio p{max-width:46ch;margin:0 auto}
.vacio .btn{margin-top:14px}
.estado-error{border:1px solid var(--color-error-border);background:var(--color-error-bg);border-radius:var(--radius-md);padding:16px 18px;color:var(--color-text)}
.estado-error b{color:var(--color-error)}
.cargando{display:flex;align-items:center;gap:10px;color:var(--color-muted);padding:16px 0}
.cargando .ti,.girar{animation:girar 1s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.esqueleto{background:linear-gradient(90deg,var(--color-surface-2) 25%,var(--color-surface-3) 37%,var(--color-surface-2) 63%);background-size:400% 100%;animation:brillo 1.4s ease infinite;border-radius:var(--radius-xs);height:14px}
@keyframes brillo{0%{background-position:100% 50%}100%{background-position:0 50%}}
.mk-estado{max-width:560px;margin:48px auto;text-align:center;padding:32px 28px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.mk-estado>.ti{font-size:36px;color:var(--color-faint);display:block;margin-bottom:12px}
.mk-estado h1,.mk-estado h2{font-size:var(--text-xl);margin-bottom:8px}
.mk-estado p{color:var(--color-text);line-height:var(--leading-body)}
.mk-estado p+p{margin-top:10px}
.mk-estado .mk-estado-quien{color:var(--color-muted);font-size:var(--text-sm)}
.mk-estado .btn{margin-top:18px}

/* ── 11. Diálogos, lupa, ayuda, avisos flotantes ─────────────────────────── */
.mk-pal{display:none;position:fixed;inset:0;z-index:var(--z-lupa);background:var(--color-overlay);padding:9vh 16px 16px;justify-content:center;align-items:flex-start}
.mk-pal.mk-abierto{display:flex}
.mk-caja{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;max-width:600px;max-height:76vh;display:flex;flex-direction:column;box-shadow:var(--shadow-overlay);overflow:hidden}
.mk-campo{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--color-border)}
.mk-campo>.ti{font-size:20px;color:var(--color-muted)}
.mk-campo input{flex:1;min-width:0;border:none!important;box-shadow:none!important;outline:none;font-size:var(--text-md)!important;background:transparent!important;padding:4px 0!important}
.mk-res{overflow-y:auto;padding:6px}
.mk-res h4{font-size:var(--text-xs);color:var(--color-muted);padding:10px 10px 4px;font-weight:var(--weight-medium)}
.mk-r{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text)}
.mk-r .ti{font-size:19px;color:var(--color-muted);width:22px;text-align:center;flex-shrink:0}
.mk-r b{font-weight:var(--weight-medium);display:block}
.mk-r small{font-size:var(--text-sm);color:var(--color-muted);display:block}
.mk-r mark{background:var(--orange-50);color:inherit;border-radius:3px;padding:0 1px}
.mk-r.mk-sel{background:var(--color-surface-3)}
.mk-r.mk-dato .ti{color:#fff;background:var(--navy-700);border-radius:var(--radius-xs);height:28px;width:28px;line-height:28px;font-size:16px}
.mk-nada{padding:20px 16px;color:var(--color-muted);text-align:center}
.mk-teclas{padding:8px 14px;border-top:1px solid var(--color-border);font-size:var(--text-xs);color:var(--color-muted);display:flex;gap:14px;flex-wrap:wrap;background:var(--color-surface-2)}

.mk-avisos{position:fixed;right:16px;bottom:16px;z-index:var(--z-avisos);display:flex;flex-direction:column;gap:10px;max-width:min(420px,calc(100vw - 32px))}
.mk-aviso{display:flex;align-items:flex-start;gap:10px;background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--color-info);border-radius:var(--radius-sm);padding:12px 12px 12px 14px;box-shadow:var(--shadow-overlay);line-height:1.45;color:var(--color-text);animation:mkEntra var(--motion-base) var(--ease)}
.mk-aviso>.ti{font-size:19px;flex-shrink:0;margin-top:1px;color:var(--color-info)}
.mk-aviso span{flex:1;white-space:pre-wrap;overflow-wrap:anywhere}
.mk-aviso button{background:none;border:none;cursor:pointer;color:var(--color-muted);font-size:18px;padding:0 2px;line-height:1}
.mk-aviso.mk-ok{border-left-color:var(--color-success)}.mk-aviso.mk-ok>.ti{color:var(--color-success)}
.mk-aviso.mk-err{border-left-color:var(--color-error)}.mk-aviso.mk-err>.ti{color:var(--color-error)}
@keyframes mkEntra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.mk-ayuda{position:fixed;inset:0 0 0 auto;width:min(400px,100vw);background:var(--color-surface);border-left:1px solid var(--color-border);z-index:var(--z-ayuda);box-shadow:var(--shadow-overlay);transform:translateX(105%);transition:transform var(--motion-base) var(--ease);display:flex;flex-direction:column;visibility:hidden}
.mk-ayuda.mk-abierto{transform:none;visibility:visible}
.mk-ayuda-cab{display:flex;align-items:center;gap:10px;padding:0 12px 0 18px;height:var(--topbar-h);border-bottom:1px solid var(--color-border)}
.mk-ayuda-cab b{flex:1;font:var(--weight-semibold) var(--text-md) var(--font-display);color:var(--color-heading)}
.mk-ayuda-cuerpo{padding:16px 20px 24px;overflow-y:auto;font-size:var(--text-md);line-height:var(--leading-body)}
.mk-ayuda-cuerpo h5{font-size:var(--text-sm);color:var(--color-muted);margin:18px 0 6px;font-weight:var(--weight-semibold)}
.mk-ayuda-cuerpo h5:first-child{margin-top:0}
.mk-ayuda-cuerpo ol,.mk-ayuda-cuerpo ul{margin:0 0 0 20px;padding:0}
.mk-ayuda-cuerpo li{margin:6px 0}
.mk-ayuda-pie{margin-top:20px;padding-top:14px;border-top:1px solid var(--color-border);font-size:var(--text-sm);color:var(--color-muted)}

.mk-conf{display:none;position:fixed;inset:0;z-index:var(--z-dialogo);background:var(--color-overlay);align-items:center;justify-content:center;padding:16px}
.mk-conf.mk-abierto{display:flex}
.mk-conf-caja{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);max-width:460px;width:100%;padding:22px;box-shadow:var(--shadow-overlay)}
.mk-conf-caja h2{font-size:var(--text-lg);margin-bottom:8px}
.mk-conf-caja p{line-height:var(--leading-body);color:var(--color-text);margin-bottom:12px;white-space:pre-line}
.mk-conf-caja .mk-conf-campo{margin-bottom:16px}
.mk-conf-caja .mk-conf-campo textarea{min-height:60px}
.mk-conf-bot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* ── 12. Celular, tableta e impresión ───────────────────────────────────── */
@media (max-width:1100px){
  .pg-cab{padding:16px 20px 0}
  .pg-cab.pg-sin-tabs{padding-bottom:16px}
  .pg-cuerpo{padding:20px 20px 32px}
  .dos-col{grid-template-columns:1fr}
  .mk-lupa{width:auto;flex:0 1 220px}
}
@media (max-width:900px){
  .mk-side{transform:translateX(-100%);width:288px;box-shadow:none}
  body.mk-open .mk-side{transform:none;box-shadow:var(--shadow-overlay)}
  body.mk-open .mk-velo{display:block}
  body.mk-col .mk-side{width:288px}
  body.mk-col .mk-lbl,body.mk-col .mk-marca span,body.mk-col .mk-off-chip{display:revert}
  body.mk-col .mk-g{font-size:var(--text-xs);padding:16px 10px 4px;margin:0;border:none;pointer-events:auto;width:100%;height:auto}
  body.mk-col .mk-g .ti{display:revert}
  body.mk-col .mk-cerrado .mk-gi{display:none}
  body.mk-col .mk-it{justify-content:flex-start;padding:7px 10px}
  .mk-cuerpo,body.mk-col .mk-cuerpo{margin-left:0;padding-bottom:62px}
  .mk-top{padding:0 8px;gap:4px}
  .mk-solo-esc,.mk-kbd{display:none}
  .mk-solo-cel{display:inline-flex}
  .mk-lupa{width:36px;flex:0 0 36px;padding:0;justify-content:center;border-color:transparent;background:none;font-size:20px}
  .mk-lupa span{display:none}
  .mk-migas li:not(:last-child){display:none}
  .mk-migas li+li::before{display:none}
  .mk-barra{display:flex;position:fixed;inset:auto 0 0 0;height:58px;background:var(--color-surface);border-top:1px solid var(--color-border);z-index:45;padding-bottom:env(safe-area-inset-bottom)}
  .mk-barra a,.mk-barra button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:var(--color-muted);position:relative;background:none;border:none;font-family:inherit;cursor:pointer;padding:0}
  .mk-barra a .ti,.mk-barra button .ti{font-size:21px}
  .mk-barra button[aria-expanded="true"]{color:var(--color-heading);font-weight:var(--weight-semibold)}
  .mk-barra a.mk-on{color:var(--color-heading);font-weight:var(--weight-semibold)}
  .mk-barra .mk-p{position:absolute;top:8px;left:calc(50% + 8px);width:9px;height:9px;border-radius:50%;background:var(--orange-500);border:2px solid var(--color-surface)}
  .mk-pal{padding:0}
  .mk-caja{max-width:none;max-height:none;height:100%;border-radius:0;border:none}
  .mk-avisos{left:12px;right:12px;bottom:70px;max-width:none}
  .pg-cab{padding:14px 16px 0}
  .pg-cab.pg-sin-tabs{padding-bottom:14px}
  .pg-cab h1{font-size:var(--text-xl)}
  .pg-cab-fila{flex-wrap:wrap}
  .pg-acc{width:100%}
  .pg-cuerpo{padding:16px 16px 28px}
  .pg-tabs{margin-left:-16px;margin-right:-16px;padding:0 8px}
  .tabla-caja{border-radius:var(--radius-sm)}
  .lista-def{grid-template-columns:1fr}
  .lista-def dd{margin-bottom:8px}
}
@media (prefers-reduced-motion:reduce){.mk-side,.mk-cuerpo,.mk-ayuda{transition:none}.mk-aviso{animation:none}}
@media print{.mk-side,.mk-top,.mk-barra,.pg-tabs,.mk-avisos{display:none!important}.mk-cuerpo{margin-left:0}body{background:#fff}}

/* ── 13. Panel de módulos ────────────────────────────────────────────────── */
.mod-aviso{margin-bottom:16px}
.mod-emerg{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--color-error-border);background:var(--color-error-bg);border-radius:var(--radius-md);margin-bottom:20px}
.mod-emerg>.ti{font-size:28px;color:var(--color-error);flex-shrink:0}
.mod-emerg h2{font-size:var(--text-lg);color:var(--color-error);margin-bottom:2px}
.mod-emerg p{color:var(--color-text);max-width:var(--text-max)}
.mod-emerg>div:nth-child(2){flex:1;min-width:0}
.mod-emerg-off{border-color:var(--color-warning-border);background:var(--color-warning-bg)}
.mod-emerg-off>.ti,.mod-emerg-off h2{color:var(--color-warning)}
.mod-resumen{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.mod-indice{display:flex;gap:6px;flex-wrap:wrap}
.mod-lista{list-style:none;margin:0;padding:0}
.mod-fila{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:4px 14px;align-items:start;padding:14px 18px;border-bottom:1px solid var(--color-border);scroll-margin-top:calc(var(--topbar-h) + 16px)}
.mod-fila:last-child{border-bottom:none}
.mod-fila:target{background:var(--color-surface-3)}
.mod-ic{font-size:20px;color:var(--color-muted);margin-top:2px}
.mod-txt h3{font:var(--weight-semibold) var(--text-md)/1.4 var(--font-text);color:var(--color-heading);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mod-txt>p{margin-top:2px}
.mod-txt>p+p{margin-top:4px}
.mod-txt .ti-lock{font-size:14px}
.mod-efecto{margin-top:6px;font-size:var(--text-sm)}
.mod-efecto summary{cursor:pointer;color:var(--color-interactive);width:max-content;border-radius:var(--radius-xs)}
.mod-efecto p{margin-top:4px;color:var(--color-muted);max-width:var(--text-max)}
.mod-acc{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mod-acc form{margin:0}
@media (max-width:900px){
  .mod-fila{grid-template-columns:24px minmax(0,1fr)}
  .mod-acc{grid-column:2;justify-content:flex-start;margin-top:6px}
  .mod-emerg{flex-wrap:wrap}
  .mod-emerg .mod-acc{width:100%;justify-content:flex-start}
}

/* ── 14. Bloques compartidos por las secciones ──────────────────────────── */
/* Documento (procedimientos, cobranza): lectura larga, ancho de texto. */
.doc{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:24px 28px;max-width:860px;font-size:var(--text-md);line-height:var(--leading-body)}
.doc>h1{display:none}
.doc .lead{color:var(--color-muted);margin-bottom:8px}
.doc h2{font-size:var(--text-lg);margin:24px 0 10px;padding-top:16px;border-top:1px solid var(--color-border)}
.doc h2:first-of-type{border-top:none;padding-top:0;margin-top:8px}
.doc h3{font-size:var(--text-md);margin:16px 0 6px}
.doc p{margin:8px 0}
.doc ul,.doc ol{margin:8px 0 8px 22px;padding:0}
.doc li{margin:5px 0}
.doc .note{background:var(--color-warning-bg);border-left:3px solid var(--color-warning-border);padding:10px 14px;border-radius:var(--radius-sm);margin:10px 0}
.doc .bank{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:12px 16px;line-height:1.9}
.doc .bank b{color:var(--color-heading)}
/* Herramientas (multicotizador, InfoAuto, hogar, emisión, cartera). */
.mc-wrap{max-width:900px}
.mc-wrap>h1{display:none}
.mc-lead{color:var(--color-muted);margin-bottom:16px;max-width:var(--text-max)}
.mc-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px 20px;margin-bottom:16px}
.mc-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:12px}
.mc-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.mc-field.mc-grow{flex:1;min-width:180px}
/* display:flex le gana al atributo hidden del navegador: el desplegable de versiones del
   multicotizador y el de InfoAuto se veían vacíos ANTES de buscar, cuando todavía no hay
   nada que elegir (07/10/2026). Ocultos de verdad, aparecen recién con las versiones. */
.mc-field[hidden],.campo[hidden]{display:none}
/* Un campo suelto de la tarjeta (el desplegable de versiones) no va pegado a la fila que sigue. */
.mc-card>.mc-field{margin-bottom:12px}
.mc-field label{font-size:var(--text-sm);color:var(--color-text);font-weight:var(--weight-medium)}
.mc-err{color:var(--color-error);font-size:var(--text-sm);margin-top:8px}
.mc-loading{color:var(--color-muted);display:flex;align-items:center;gap:8px;padding:16px 0}
.mc-loading .ti{animation:girar 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Tarjetas y cifras que comparten Panel de control, Gestiones, Prospectos y Qué hacer hoy.
   Antes cada una estaba definida dentro del bloque de OTRA sección: «Qué hacer hoy» se
   dibujaba sin estilo porque las reglas vivían en Panel de control. */
.pc-wrap{max-width:var(--content-max)}
.pc-top{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:12px}
.pc-refresh{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--color-interactive)}
.pc-refresh:hover{background:var(--color-surface-3)}
.pc-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px 20px;margin-bottom:16px}
.pc-card>h2{font-size:var(--text-lg);margin-bottom:10px}
.pc-card table{width:100%;border-collapse:collapse}
.pc-card th,.pc-card td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--color-border)}
.pc-card th{background:var(--color-surface-2);color:var(--color-muted);font-weight:var(--weight-medium);font-size:var(--text-xs)}
.pc-card tr:last-child td{border-bottom:none}
.crm-embudo{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:10px}
.crm-kpi{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.crm-kpi-n{font:var(--weight-semibold) var(--text-2xl)/1.1 var(--font-display);color:var(--color-heading);font-variant-numeric:tabular-nums}
.crm-kpi-l{font-size:var(--text-sm);color:var(--color-muted)}
.crm-tag{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:var(--weight-medium);padding:1px 9px;line-height:20px;border-radius:var(--radius-pill);background:var(--color-info-bg);color:var(--color-info)}
.crm-tag.crm-tag-warn{background:var(--color-warning-bg);color:var(--color-warning)}
.em-emitir{margin-top:8px}

/* ── 15. Pantallas sin menú: acceso, cambio obligatorio de clave, formulario vencido ── */
/* No hay a dónde navegar todavía (no hay sesión, o la clave temporal no deja usar nada):
   llevan la marca y una sola salida. Ver D11 en docs/DECISIONES_NUCLEO.md. */
.pag-suelta{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--color-sidebar)}
.pag-suelta-caja{width:100%;max-width:440px}
.pag-suelta .mk-estado{margin:0;box-shadow:var(--shadow-overlay);text-align:left}
.pag-suelta .mk-estado h1{font-size:var(--text-2xl)}
.pag-suelta-logo{width:44px;height:44px;border-radius:var(--radius-sm);display:block;margin-bottom:16px}
.pag-suelta .campo{margin-top:14px}
.pag-suelta .campo input{width:100%}
.pag-suelta .btn-lg{margin-top:20px}
.pag-suelta-pie{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:var(--text-sm)}
.pag-suelta-pie a{color:var(--color-interactive)}
.aviso-usr .ti{font-size:36px}
.aviso-usr-pass{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:var(--weight-semibold);letter-spacing:2px;color:var(--color-heading);background:var(--color-surface-2);border:2px dashed var(--color-border-strong);border-radius:var(--radius-sm);padding:14px;margin:8px 0 14px;user-select:all;text-align:center}
.aviso-usr .msj{text-align:left;margin-bottom:6px}
.pag-suelta .msj{margin-top:14px}
.pass-caja{max-width:480px}
.pass-caja .campo{margin-bottom:14px}
.pass-caja .campo input{width:100%}
.pass-form .btn-lg{margin-top:8px}

/* ── 16. Estados de lo que se pide por fetch (mkCargando, mkError) y vacíos chicos ── */
.esqueletos{display:flex;flex-direction:column;gap:10px;padding:4px 0 8px}
.esqueletos .esqueleto:nth-child(2){width:85%}
.esqueletos .esqueleto:nth-child(3){width:65%}
.estado-error{display:flex;gap:12px;align-items:flex-start}
.estado-error>.ti{font-size:22px;color:var(--color-error);flex-shrink:0}
.estado-error p{margin:2px 0 0;color:var(--color-text)}
.estado-error .btn{margin-top:10px}
.vacio-chico{display:flex;align-items:center;gap:10px;color:var(--color-muted);padding:6px 0}
.vacio-chico>.ti{font-size:20px;color:var(--color-faint);flex-shrink:0}
.em-pausada{margin-top:6px}
.ref-sin-revisar{margin-top:8px}

/* Siniestros Mercantil: los identificadores largos también se leen en celular. */
.ma-siniestros{min-width:0;overflow-wrap:anywhere}
.ma-siniestros ul{padding-inline-start:24px}
/* 053: correcciones táctiles de la intranet. Escritorio conserva sus dimensiones.
   No ocultar desbordes: las tablas mantienen su caja desplazable y los textos largos
   se parten dentro de la tarjeta. Las reglas locales e inline también usan botones
   pequeños; min-size/font-size son las únicas prioridades comunes necesarias. */
@media (max-width:600px){
  .mk-cuerpo,body.mk-col .mk-cuerpo{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  .mk-btn,.mk-av,.mk-lupa{min-width:44px;min-height:44px}
  .mk-lupa{flex-basis:44px}
  .mk-top{gap:0}
  .mk-migas{overflow:hidden}
  .mk-migas [aria-current]{overflow:hidden;text-overflow:ellipsis}
  .mk-barra{height:calc(58px + env(safe-area-inset-bottom));box-sizing:border-box}
  button,input[type=submit],input[type=button],summary,a.btn,[role=button],
  .pg-tabs a,.rd-tabs a,.mk-it,.mk-menu a,.pc-refresh,.ch-acc a,.acc-wa{
    min-height:44px!important;min-width:44px!important;box-sizing:border-box;
  }
  .pg-tabs a,.rd-tabs a{display:inline-flex;align-items:center}
  #mkMain button,#mkMain .btn{height:auto;max-width:100%;white-space:normal}
  #mkMain input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
  #mkMain textarea,#mkMain select,.mk-pal input{
    font-size:16px!important;min-height:44px;max-width:100%;box-sizing:border-box;
  }
  #mkMain textarea{min-height:44px}
  #mkMain .oculto-visual{min-height:0}
  #mkMain .mc-row>*,#mkMain .campo,#mkMain .mc-field{min-width:0;max-width:100%}
  #mkMain .mc-field.mc-grow{flex-basis:180px}
  #mkMain .mc-card,#mkMain .pc-card{padding:16px}
  #mkMain .panel,#mkMain .pc-wrap,#mkMain .mc-wrap{min-width:0;overflow-wrap:anywhere}
  #mkMain .tj-info{min-width:0;flex-wrap:wrap}
  #mkMain .tj-info>b{white-space:normal;overflow-wrap:anywhere}
  #mkMain .tj-linea{white-space:normal;overflow-wrap:anywhere}
  #mkMain .tj-acc{flex-wrap:wrap;max-width:100%}
  #mkMain .acc-form{flex-wrap:wrap}
  #mkMain .acc-form input{min-width:0}
  /* El nombre conserva espacio aun con las acciones de búsqueda, ficha y pausa. */
  #mkMain .wa-head{flex-wrap:wrap;gap:8px;padding:8px}
  #mkMain .wa-head-info{flex:1 1 calc(100% - 112px)}
  #mkMain .wa-head-info>b{white-space:normal;overflow-wrap:anywhere;line-height:20px;max-height:40px}
  #mkMain .wa-head-act{flex:1 1 100%;justify-content:flex-end;flex-wrap:wrap}
  #mkMain .wa-head-act form{max-width:100%}
  #mkMain .wa-back{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  #mkMain .wa{--pse-alto-chat:calc(100dvh - 114px - env(safe-area-inset-bottom))}
  /* N013 mide su propia barra; la ventana aparte conserva su cálculo existente. */
  #mkMain .wa{height:var(--pse-alto-chat)}
  #mkMain .wa[data-conv-avisos]{--pse-alto-chat:calc(100dvh - 114px - var(--ca-alto,72px) - env(safe-area-inset-bottom))}
  #mkMain .wa:has(.wa-ficha){grid-template-rows:minmax(0,var(--cc-alto-chat,var(--pse-alto-chat))) auto}
  #mkMain .wa-body{min-height:0}
  #mkMain .wa-barra .ad-adjuntar{margin-left:0}
  #mkMain .wa-barra{gap:0}
  #mkMain .wa-compose{min-width:0;padding-left:4px;padding-right:4px}
  #mkMain .wa-compose textarea{min-width:0}
  #mkMain .ad-adjuntar form{position:fixed;left:12px;right:12px;bottom:calc(116px + env(safe-area-inset-bottom));width:auto;max-height:60dvh;overflow:auto;box-sizing:border-box;z-index:50}
  /* La lista de siniestros deja espacio real a cada acción; solo cambia el celular. */
  #mkMain .ct-planilla .ct-fila{grid-template-columns:minmax(0,1fr) 44px 100px;grid-template-rows:auto auto auto;gap:4px;padding:8px 0}
  #mkMain .ct-planilla td{font-size:14px;overflow-wrap:anywhere}
  #mkMain .ct-numero{grid-column:1;grid-row:1}
  #mkMain .ct-asegurado{grid-column:1/-1;grid-row:2;font-size:14px!important;white-space:normal}
  #mkMain .ct-dias{grid-column:2;grid-row:1}
  #mkMain .ct-acciones{grid-column:3;grid-row:1}
  #mkMain .ct-iconos{gap:4px}
  #mkMain .ct-icono{width:44px;height:44px;flex-shrink:0}
  #mkMain .ct-etapa{grid-column:1/3;grid-row:3}
  #mkMain .ct-fecha{grid-column:3;grid-row:3;align-self:center}
  #mkMain .ct-depende{grid-column:1/-1;grid-row:4}
  #mkMain .ct-responsable{font-size:13px;white-space:normal}
  #mkMain .ct-movil-patente{font-size:13px}
  #mkMain .ct-dos-partes{display:flex;flex-direction:column}
  #mkMain .ct-dos-partes>section{display:block}
  #mkMain .ct-editar>label{font-size:14px}
  #mkMain .ct-mios{min-height:44px}
}

/* 059: el nombre de la pantalla tiene su propia fila. Las seis acciones caben
   a320px sin quitar ayuda, búsqueda, avisos ni cuenta. El contenido se desplaza
   hasta el final por encima de la barra inferior; no se ocultan desbordes. */
@media (max-width:600px){
  :root{--topbar-h:96px}
  .mk-top{height:auto;min-height:var(--topbar-h);flex-wrap:wrap;align-content:center;padding:6px 8px;gap:4px}
  .mk-lupa{margin-left:auto}
  .mk-migas{order:1;flex:1 0 100%;min-height:24px;overflow:visible}
  .mk-migas ol{width:100%;overflow:visible}
  .mk-migas li:last-child{white-space:normal;max-width:100%}
  .mk-migas [aria-current]{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;line-height:18px}
  .pg-cab h1{overflow-wrap:anywhere;line-height:1.35}
  .pg-cab h1 .ti{flex:0 0 auto}
  .pg-tabs a,.rd-tabs a{flex:0 0 auto}
  #mkMain .comp-accesos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
  #mkMain .ref-form{flex-wrap:wrap}
  #mkMain .ref-form input{flex:1 1 100%;min-width:0;width:100%}
  #mkMain .sx-card summary>span{max-width:100%;min-width:0;overflow-wrap:anywhere}
  #mkMain .sx-card .sx-chip{white-space:normal}
  /* El aviso usa una fila propia: su texto no se dibuja debajo de los botones. */
  #mkMain .ca-barra{flex-wrap:wrap!important;overflow-x:visible}
  #mkMain .ca-barra #cvAviso{flex:1 0 100%;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
  .cv-barra #cvAviso{flex:0 0 auto!important}
  #mkMain .est-dos{grid-template-columns:minmax(0,1fr)}
  #mkMain .est-caja{min-width:0}
  #mkMain #estDesde{min-width:44px}
  #mkMain .afip-tabs{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  #mkMain .afip-tab-btn{flex:0 0 auto;white-space:nowrap}
  #mkMain .afip-hist:not([hidden]){display:block;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  #mkMain .wa{--pse-alto-chat:calc(100dvh - var(--mk-cabecera-real,96px) - 58px - env(safe-area-inset-bottom));height:var(--pse-alto-chat)}
  #mkMain .wa[data-conv-avisos]{--pse-alto-chat:calc(100dvh - var(--mk-cabecera-real,96px) - 58px - var(--ca-alto,72px) - env(safe-area-inset-bottom))}
  #mkMain .wa:has(.wa-ficha){grid-template-rows:minmax(0,var(--cc-alto-chat,var(--pse-alto-chat))) auto}
}