:root {
  --app-bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-soft: #F2F4F7;
  --border: #E4E7EC;
  --control-border: #D0D5DD;
  --text: #101828;
  --text-secondary: #475467;
  --text-muted: #667085;
  --primary: #0B0B0C;
  --primary-hover: #27272A;
  --on-primary: #FFFFFF;
  --link: #1D4ED8;
  --focus: #1D4ED8;
  --glass-bg: rgba(255,255,255,.50);
  --glass-border: rgba(255,255,255,.65);
  --glass-inset: rgba(255,255,255,.70);
  --glass-shadow: 0 8px 32px rgba(16,24,40,.10);
  --glass-blur: 28px;
  --atmosphere-fade: linear-gradient(180deg, rgba(244,245,247,0) 34%, #F4F5F7 69%);
  --form-blue: #4F8CFF;
  --form-cyan: #5CC8FF;
  --form-lilac: #B8A4FF;
  --form-coral: #FF9A8B;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  --neutral-bg: #F2F4F7; --neutral-border: #D0D5DD; --neutral-strong: #344054;
  --success-bg: #ECFDF3; --success-border: #ABEFC6; --success-icon: #17B26A; --success-strong: #067647;
  --warning-bg: #FFFAEB; --warning-border: #FEDF89; --warning-icon: #DC6803; --warning-strong: #93370D;
  --error-bg: #FEF3F2; --error-border: #FECDCA; --error-icon: #F04438; --error-strong: #B42318;
  --info-bg: #EFF8FF; --info-border: #B2DDFF; --info-icon: #2E90FA; --info-strong: #175CD3;
  --review-bg: #FDF2FA; --review-border: #F5B8E4; --review-icon: #DD2590; --review-strong: #9E165F;
  --progress-bg: #FFF4ED;
  --priority-critical: #D92D20; --priority-high: #DC6803; --priority-medium: #1570EF; --priority-low: #079455;
  --radius-chip: 6px; --radius-field: 12px; --radius-card: 16px; --radius-glass: 24px; --radius-gradient: 28px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.05); --shadow-float: 0 12px 32px rgba(16,24,40,.12); --shadow-modal: 0 24px 64px rgba(16,24,40,.18);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --frame-gap: 16px;
  --nav-w: 248px; --nav-rail-w: 64px;
  --content-offset: calc(var(--frame-gap) + var(--nav-w) + var(--frame-gap));
  --content-offset-rail: calc(var(--frame-gap) + var(--nav-rail-w) + var(--frame-gap));
  --content-top: var(--frame-gap); --content-right: var(--frame-gap);
  --control-h: 40px; --touch: 44px; --bottom-nav-h: 64px;
  --icon-nav: 20px; --icon-bottom: 22px; --icon-btn: 18px; --icon-chip: 16px;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2,.8,.2,1); --duration: 180ms; --nav-duration: 200ms;
}

:root[data-theme="dark"] {
  --app-bg: #16181C; --surface: #202329; --surface-soft: #292E36; --border: #3B424D; --control-border: #4B5563;
  --text: #F9FAFB; --text-secondary: #D0D5DD; --text-muted: #98A2B3; --primary: #050505; --primary-hover: #18181B; --on-primary: #FFFFFF; --link: #93C5FD;
  --glass-bg: rgba(22,24,28,.48); --glass-border: rgba(255,255,255,.26); --glass-inset: rgba(255,255,255,.34);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.28); --atmosphere-fade: linear-gradient(180deg, rgba(22,24,28,0) 30%, #16181C 72%);
  --neutral-bg: #292E36; --neutral-border: #4B5563; --neutral-strong: #D0D5DD;
  --success-bg: #123524; --success-border: #286A49; --success-icon: #5CE1A0; --success-strong: #9AF2C2;
  --warning-bg: #3E2A13; --warning-border: #8B5A18; --warning-icon: #FDB022; --warning-strong: #FEDF89;
  --error-bg: #421D1A; --error-border: #8F302A; --error-icon: #FF8B82; --error-strong: #FECDCA;
  --info-bg: #172D4B; --info-border: #2F5F94; --info-icon: #73B7FF; --info-strong: #B2DDFF;
  --review-bg: #3A1D35; --review-border: #85416E; --review-icon: #F78BD1; --review-strong: #F5B8E4;
  --progress-bg: #3E2A13;
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --glass-bg: rgba(255,255,255,.92); --glass-border: rgba(16,24,40,.30); --glass-inset: rgba(255,255,255,.9); }
  :root[data-theme="dark"] { --glass-bg: rgba(22,24,28,.92); --glass-border: rgba(255,255,255,.40); --glass-inset: rgba(255,255,255,.40); }
}

@media (prefers-reduced-motion: reduce) { :root { --duration: 0ms; --nav-duration: 0ms; --ease: linear; } }
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--app-bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea { min-height: var(--touch); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.ico { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico-nav { width: var(--icon-nav); height: var(--icon-nav); }
.ico-bottom { width: var(--icon-bottom); height: var(--icon-bottom); }
.ico-btn { width: var(--icon-btn); height: var(--icon-btn); }
.ico-chip { width: var(--icon-chip); height: var(--icon-chip); }

/* Atmósfera (conservada de la v2) */
.atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--app-bg); }
.atmosphere::before { content: ""; position: absolute; inset: 0; background: var(--atmosphere-fade); z-index: 1; }
.atmosphere::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .045; mix-blend-mode: multiply; z-index: 2; }
.orb { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .72; }
.orb-a { width: 720px; height: 520px; top: -250px; left: -150px; background: var(--form-blue); }
.orb-b { width: 640px; height: 440px; top: -180px; left: 320px; background: var(--form-cyan); }
.orb-c { width: 650px; height: 480px; top: -260px; right: 80px; background: var(--form-lilac); }
.orb-d { width: 540px; height: 420px; top: -120px; right: -190px; background: var(--form-coral); }

/* Vidrio (conservado de la v2) */
.nav-shell, .bottom-nav, .segment.glass, .modal-head, .sheet { background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inset); backdrop-filter: blur(var(--glass-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); }

/* Marco de navegación único (Corrección A): expandido o riel, nunca los dos */
.nav-shell { position: fixed; z-index: 20; top: var(--frame-gap); bottom: var(--frame-gap); left: var(--frame-gap); width: var(--nav-w); border-radius: var(--radius-glass); display: flex; flex-direction: column; padding: var(--space-3); gap: var(--space-3); overflow: hidden; transition: width var(--nav-duration) var(--ease); }
.nav-shell .nav-top { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; }
.nav-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.nav-brand .mark { width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--radius-card); display: grid; place-items: center; font-weight: 700; font-size: 20px; background: var(--primary); color: #fff; }
.brand-word { font-size: 17px; font-weight: 650; letter-spacing: -.03em; white-space: nowrap; }
.nav-toggle { width: 36px; height: 36px; min-height: 36px; flex: 0 0 auto; margin-left: auto; border-radius: var(--radius-field); border: 1px solid transparent; background: transparent; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nav-toggle:hover { background: var(--surface); color: var(--text); border-color: var(--border); }
.nav-toggle-bottom { display: none; margin: 0; }
.command { display: flex; align-items: center; gap: var(--space-2); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-field); color: var(--text-muted); padding: 0 var(--space-3); min-height: 40px; }
.command input { min-height: 38px; width: 100%; border: 0; background: transparent; outline: 0; }
.kbd { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.nav-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.nav-group { margin-top: var(--space-4); }
.nav-group:first-child { margin-top: 0; }
.nav-label { color: var(--text-muted); font-size: 13px; margin: 0 0 var(--space-2) var(--space-3); }
.nav-item { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-field); color: var(--text-secondary); }
.nav-item:hover { background: var(--surface-soft); color: var(--text); }
.nav-item.active { background: rgba(255,255,255,.75); color: var(--text); font-weight: 600; }
.nav-count { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.nav-foot { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.profile { display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--text); font-weight: 550; }
.nav-icon-btn { width: 40px; height: 40px; min-height: 40px; border-radius: var(--radius-field); border: 1px solid transparent; background: transparent; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nav-icon-btn:hover { background: var(--surface); color: var(--text); border-color: var(--border); }
.nav-foot .nav-icon-btn { margin-left: auto; }

/* Estado contraído: riel de 64 px, solo iconos */
.nav-shell[data-nav="contraida"] { width: var(--nav-rail-w); align-items: center; }
.nav-shell[data-nav="contraida"] .nav-text, .nav-shell[data-nav="contraida"] .nav-text-block, .nav-shell[data-nav="contraida"] .command, .nav-shell[data-nav="contraida"] .nav-count { display: none; }
.nav-shell[data-nav="contraida"] .nav-top { flex-direction: column; }
.nav-shell[data-nav="contraida"] .nav-brand { justify-content: center; }
.nav-shell[data-nav="contraida"] .nav-toggle-top { display: none; }
.nav-shell[data-nav="contraida"] .nav-toggle-bottom { display: inline-flex; margin: 0 auto; }
.nav-shell[data-nav="contraida"] .nav-item { width: 44px; height: 44px; min-height: 44px; justify-content: center; padding: 0; }
.nav-shell[data-nav="contraida"] .nav-item.active { background: rgba(255,255,255,.75); color: var(--text); }
.nav-shell[data-nav="contraida"] .nav-item svg { width: 20px; height: 20px; }
.nav-shell[data-nav="contraida"] .nav-scroll { width: 100%; }
.nav-shell[data-nav="contraida"] .nav-group { display: grid; justify-items: center; }
.nav-shell[data-nav="contraida"] .nav-foot { flex-direction: column; justify-content: center; }
.nav-shell[data-nav="contraida"] .nav-foot .nav-icon-btn { display: none; }
.nav-shell[data-nav="contraida"] .profile { justify-content: center; }
.nav-shell[data-nav="contraida"] .nav-foot .nav-icon-btn { margin-left: 0; }
[data-nav="contraida"] .nav-item { position: relative; }

/* Contenido: margin-left exacto 16 + navegación + 16, sin sumar otros espaciados */
.app-content { margin-left: var(--content-offset); padding: var(--content-top) var(--content-right) 48px 0; min-width: 0; }
body.nav-collapsed .app-content { margin-left: var(--content-offset-rail); }

/* Cabecera de página: una sola fila alineada a la base del H1 */
.page-head { display: flex; align-items: flex-end; gap: var(--space-4); min-height: 48px; margin: 0 0 var(--space-4); }
.page-head h1 { margin: 0; font-size: 24px; line-height: 1.1; letter-spacing: -.01em; font-weight: 600; white-space: nowrap; }
.head-actions { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.search-field { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--control-border); border-radius: var(--radius-field); background: var(--surface); width: 220px; }
.search-field input { min-width: 0; border: 0; outline: 0; background: transparent; width: 100%; }
.search-icon, .hero-note, .page-note, .mobile-actions { display: none; }
.hero-note { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--neutral-bg); color: var(--neutral-strong); font-size: 12px; white-space: nowrap; }
.page-note { margin: 0 0 var(--space-4); }
.page-note .hero-note { display: inline-flex; }

/* Botones */
.btn { min-height: var(--control-h); border-radius: var(--radius-pill); border: 1px solid transparent; padding: 0 var(--space-4); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); cursor: pointer; font-weight: 550; transition: transform var(--duration) var(--ease), background var(--duration) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); border-color: var(--control-border); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-danger { background: var(--error-bg); color: var(--error-strong); border-color: var(--error-border); }
.btn-icon { width: 44px; padding: 0; }
.btn-glass { background: var(--glass-bg); border-color: var(--glass-border); backdrop-filter: blur(var(--glass-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); color: var(--text); }
.btn-sm { min-height: 36px; padding: 0 var(--space-3); font-size: 13px; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; }
.btn-primary[disabled], .btn-primary[aria-disabled="true"] { background: #F2F4F7; color: #98A2B3; border: 1px dashed #D0D5DD; opacity: 1; }
.btn-icon.btn-glass { width: 44px; min-height: 44px; border-radius: var(--radius-field); }
.head-actions .search-icon { display: none; }
.prod-cell { display: flex; align-items: center; gap: var(--space-2); }
.link-btn { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 24px; padding: 0; border: 0; background: transparent; color: var(--link); cursor: pointer; font-weight: 550; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-chip); background: var(--neutral-bg); color: var(--neutral-strong); font-size: 12px; white-space: nowrap; }
.chip-solid { color: #fff; border: 0; }
.chip-p { min-height: 22px; padding: 0 var(--space-2); font-size: 12px; font-weight: 550; }
.chip-critical { background: var(--priority-critical); }
.chip-high { background: var(--priority-high); }
.chip-medium { background: var(--priority-medium); }
.chip-low { background: var(--priority-low); }
.chip-success { background: var(--success-bg); color: var(--success-strong); border: 1px solid var(--success-border); }
.chip-warning { background: var(--warning-bg); color: var(--warning-strong); border: 1px solid var(--warning-border); }
.chip-error { background: var(--error-bg); color: var(--error-strong); border: 1px solid var(--error-border); }
.chip-info { background: var(--info-bg); color: var(--info-strong); border: 1px solid var(--info-border); }
.chip-review { background: var(--review-bg); color: var(--review-strong); border: 1px solid var(--review-border); }
.products { display: flex; gap: var(--space-1); flex-wrap: wrap; min-width: 0; }

/* Avatar de producto (Corrección C) */
.pav { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.pav-remast { background: var(--info-bg); color: var(--info-strong); }
.pav-kuentame { background: var(--success-bg); color: var(--success-strong); }
.pav-kontador2 { background: var(--review-bg); color: var(--review-strong); }
.pav-presidencial { background: var(--warning-bg); color: var(--warning-strong); }
.pav-lekalitas { background: var(--surface-soft); color: var(--neutral-strong); }
.pav-agendamiento { background: var(--error-bg); color: var(--error-strong); }
.avatars { display: flex; }
.avatar { width: 26px; height: 26px; margin-left: -5px; border-radius: 50%; border: 2px solid var(--surface); display: grid; place-items: center; background: var(--surface-soft); font-size: 11px; }
.avatar:first-child { margin-left: 0; }
.avatar-ik { width: 30px; height: 30px; margin: 0; border: 0; background: var(--primary); color: #fff; font-weight: 600; }

/* Tarjetas y rejillas */
.data-grid { display: grid; gap: var(--space-4); }
.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric, .content-card, .table-card, .category-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.metric { padding: var(--space-5); min-height: 132px; }
.metric-icon, .category-icon { width: 40px; height: 40px; border-radius: var(--radius-field); background: var(--surface-soft); display: grid; place-items: center; color: var(--text-secondary); }
.metric-name { color: var(--text-secondary); margin-top: var(--space-4); font-size: 13px; }
.metric-value { font-size: 28px; font-weight: 600; line-height: 1.1; margin-top: var(--space-1); }
.metric-note { color: var(--text-muted); font-size: 13px; margin-top: var(--space-1); }
.layout-two { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: var(--space-4); align-items: start; }
.stack { display: grid; gap: var(--space-4); min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-3); }
.card-head h2 { font-size: 16px; margin: 0; font-weight: 600; }
.card-head p { margin: 0; color: var(--text-muted); font-size: 13px; }
.table-card { overflow: hidden; }
.table-tools { display: flex; gap: var(--space-2); align-items: center; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0 var(--space-5); height: 48px; border-top: 1px solid var(--border); white-space: nowrap; }
th { color: var(--text-muted); font-size: 12px; font-weight: 500; }
td { color: var(--text-secondary); }
td strong { color: var(--text); font-weight: 550; }
.mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.date { color: var(--text-muted); font-size: 12px; }

/* Decisiones y notificaciones */
.decision-row { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-2) var(--space-5); border-top: 1px solid var(--border); }
.decision-row:first-of-type { border-top: 0; }
.row-icon { color: var(--text-secondary); min-width: 24px; display: grid; place-items: center; flex: 0 0 auto; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
.row-meta { color: var(--text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notification { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: 14px; border: 1px solid; box-shadow: inset 0 0 0 2px var(--surface); }
.notification .notif-body { flex: 1; min-width: 0; }
.notification h3 { margin: 0; font-size: 14px; }
.notification p { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: 13px; }
.notification .notif-ico { width: 20px; height: 20px; flex: 0 0 auto; }
.notification.neutral { background: var(--neutral-bg); border-color: var(--neutral-border); color: var(--neutral-strong); }
.notification.success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-icon); }
.notification.warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-icon); }
.notification.error { background: var(--error-bg); border-color: var(--error-border); color: var(--error-icon); }
.notification.info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-icon); }
.notification-stack { display: grid; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }

/* Barra de herramientas de Tareas: vistas y filtros en una fila (Corrección D) */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); flex-wrap: wrap; }
.segmented { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--surface-soft); border: 1px solid var(--border); }
.segmented button { border: 0; background: transparent; border-radius: var(--radius-pill); padding: 0 var(--space-3); min-height: 32px; color: var(--text-secondary); cursor: pointer; }
.segmented button.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-card); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-width: 0; }
.filters-section { margin-bottom: var(--space-4); }
.toolbar-filters { position: relative; min-width: 0; }
.filter { min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--control-border); background: var(--surface); border-radius: var(--radius-pill); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); }
.filter.active { background: var(--surface-soft); color: var(--text); border-color: var(--control-border); font-weight: 600; }

/* Grupos por estado (conservado) */
.state-group { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.state-head { min-height: 44px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4); border-bottom: 1px solid var(--border); }
.state-head strong { font-weight: 600; }
.state-head .state-ico { width: 18px; height: 18px; }
.state-head.pending { background: var(--neutral-bg); color: var(--neutral-strong); }
.state-head.progress { background: var(--progress-bg); color: var(--warning-strong); }
.state-head.review { background: var(--review-bg); color: var(--review-strong); }
.state-head.blocked { background: var(--error-bg); color: var(--error-strong); }
.state-head.complete { background: var(--success-bg); color: var(--success-strong); }
.state-count { border-radius: var(--radius-chip); background: var(--surface); padding: 1px 6px; font-size: 12px; color: var(--text-secondary); }

/* Filas de tarea: una línea en escritorio, dos en celular */
.task-row { display: grid; grid-template-columns: 104px minmax(0, 1.5fr) minmax(0, .9fr) 88px 104px 104px; align-items: center; min-height: 48px; border-top: 1px solid var(--border); padding: 0 var(--space-4); gap: var(--space-3); }
.task-row:first-child { border-top: 0; }
.task-row .r1, .task-row .r2 { display: contents; }
.task-row .id-cell { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.disclosure { width: 28px; height: 28px; min-height: 28px; flex: 0 0 auto; border-radius: var(--radius-chip); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.disclosure svg { width: 14px; height: 14px; transition: transform var(--duration) var(--ease); }
.disclosure[aria-expanded="true"] svg { transform: rotate(90deg); }
.parent-task { background: var(--surface-soft); }
.derivative { display: grid; grid-template-columns: 104px minmax(0, 1.5fr) minmax(0, .9fr) 88px 104px 104px; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); min-height: 44px; border-top: 1px solid var(--border); background: var(--surface); }
.derivative .der-name { grid-column: 1 / 4; display: flex; align-items: center; gap: var(--space-3); padding-left: var(--space-6); border-left: 2px solid var(--border); min-height: 28px; color: var(--text-secondary); }
.derivative .chip { justify-self: start; }

/* Tarjetas de categoría / productos */
.category-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.category-card { padding: var(--space-4); min-height: 118px; display: grid; align-content: start; gap: var(--space-3); }
.category-card strong { display: block; }
.category-card small { color: var(--text-muted); }

/* Pasos y propuestas */
.step-list { display: grid; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.step { display: flex; gap: var(--space-3); align-items: flex-start; }
.step-dot { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--text-secondary); }
.step.done .step-dot { color: var(--success-strong); background: var(--success-bg); }
.step p { margin: 0; color: var(--text-secondary); }
.step strong { display: block; color: var(--text); }
.proposal-diff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.diff-block { border-radius: var(--radius-field); padding: var(--space-4); border: 1px solid var(--border); }
.diff-block.current { background: var(--surface-soft); }
.diff-block.proposed { background: var(--success-bg); border-color: var(--success-border); }
.diff-block strong { display: block; margin-bottom: var(--space-2); }
.diff-block p { margin: 0; color: var(--text-secondary); }

/* Tarjeta de degradado (conservada) */
.gradient-card { min-height: 260px; border-radius: var(--radius-gradient); padding: var(--space-6); position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg,#273B68 0%,#7B527C 53%,#E9796C 100%); box-shadow: var(--shadow-float); }
.gradient-card::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .32; mix-blend-mode: soft-light; }
.gradient-card::after { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(90deg, transparent 49%, rgba(255,255,255,.34) 50%, transparent 51%), linear-gradient(0deg, transparent 49%, rgba(255,255,255,.34) 50%, transparent 51%); background-size: 22px 22px; }
.gradient-card > * { position: relative; z-index: 1; }
.gradient-card h2 { font-size: 24px; line-height: 1.1; margin: var(--space-8) 0 var(--space-2); max-width: 280px; }
.gradient-card p { color: rgba(255,255,255,.82); max-width: 280px; }
.segment { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-pill); }
.segment button { border: 0; background: transparent; border-radius: var(--radius-pill); padding: 0 var(--space-3); min-height: 32px; color: inherit; cursor: pointer; }
.segment button.active { background: var(--surface); color: var(--text); }
.segment.glass button { color: var(--text); }
.segment.glass button.active { background: rgba(255,255,255,.75); }
.schedule { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.schedule h3 { margin: 0 0 var(--space-2); font-size: 14px; }
.schedule p { margin: 0; color: var(--text-secondary); }
.schedule strong { color: var(--text); }
.prose { color: var(--text-secondary); }
.prose strong { color: var(--text); }

/* Modal: centrado en escritorio, hoja inferior en celular */
.modal-backdrop { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; padding: var(--space-6); background: rgba(16,24,40,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-backdrop.open { display: flex; }
.modal { width: min(620px, 100%); max-height: calc(100vh - 48px); overflow: hidden; border-radius: var(--radius-gradient); background: var(--surface); box-shadow: var(--shadow-modal); display: flex; flex-direction: column; }
.modal-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-6); border: 0; border-bottom: 1px solid var(--border); border-radius: var(--radius-gradient) var(--radius-gradient) 0 0; flex: 0 0 auto; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-body { padding: var(--space-6); display: grid; gap: var(--space-4); overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); flex: 0 0 auto; }
.field-label { display: grid; gap: var(--space-2); color: var(--text-secondary); font-size: 13px; }
.field { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--control-border); border-radius: var(--radius-field); background: var(--surface); }
.field input, .field select, .field textarea { min-width: 0; border: 0; outline: 0; background: transparent; width: 100%; }
.field textarea { padding: var(--space-3) 0; min-height: 92px; resize: vertical; }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip-remove { background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-pill); min-height: 32px; padding: 0 var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }

/* Barra inferior de vidrio y hoja "Más" (Corrección B) */
.bottom-nav { display: none; }
.bottom-sheet { display: none; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 28px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; min-height: 40px; display: flex; align-items: center; padding: 0 16px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-float); transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.modal-open { overflow: hidden; }
.scrim { display: none; }

/* Fundamento: maquetas internas */
.demo-orb-box { height: 120px; position: relative; overflow: hidden; border-radius: var(--radius-field); margin: 0 var(--space-5) var(--space-5); background: var(--app-bg); }
.foundation-grid { display: grid; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.foundation-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.glass-demo { background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inset); backdrop-filter: blur(var(--glass-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); border-radius: var(--radius-glass); padding: var(--space-4); display: grid; gap: var(--space-2); }
.foundation-note { padding: 0 var(--space-5) var(--space-5); }
.swatch { border-radius: var(--radius-field); min-height: 72px; padding: var(--space-3); display: grid; align-content: space-between; font-size: 12px; border: 1px solid var(--border); }

/* Tableta 768–1023: riel por defecto, panel superpuesto al expandir */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav-shell { width: var(--nav-rail-w); }
  body.nav-overlay-open .nav-shell { width: var(--nav-w); z-index: 30; box-shadow: var(--shadow-modal), inset 0 1px 0 var(--glass-inset); }
  body.nav-overlay-open .scrim { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(16,24,40,.2); }
  .app-content, body.nav-collapsed .app-content { margin-left: var(--content-offset-rail); }
  .page-head { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: var(--space-2); }
  .page-head h1 { grid-column: 1; grid-row: 1; }
  .head-actions { grid-column: 2; grid-row: 1; margin-left: 0; }
  .search-field { display: none; }
  .head-actions .search-icon { display: inline-flex; }
  .hero-note { display: none; }
  .page-note { display: block; margin: 0 0 var(--space-3); }
  .page-note .hero-note { display: inline-flex; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .layout-two { grid-template-columns: 1fr; }
  .task-row, .derivative { grid-template-columns: 104px minmax(160px, 1.4fr) minmax(120px, .8fr) 88px; }
  .task-row .avatars, .task-row .date, .derivative .avatars { display: none; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .task-row, .derivative { grid-template-columns: 96px minmax(0, 1.5fr) minmax(0, .9fr) 84px 100px; }
  .task-row .date, .derivative .date { display: none; }
  .layout-two { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .search-field { width: 180px; }
}

/* Celular < 768 */
@media (max-width: 767px) {
  body { padding-bottom: 0; }
  .nav-shell { display: none; }
  .app-content { margin-left: 0; padding: 0 var(--frame-gap) 96px; }
  body.nav-collapsed .app-content { margin-left: 0; }
  .page-head { align-items: center; flex-wrap: nowrap; min-height: 56px; margin-bottom: var(--space-2); }
  .page-head h1 { font-size: 20px; }
  .head-actions, .page-note, .hero-note, .search-field { display: none; }
  .mobile-actions { display: flex; gap: var(--space-2); margin-left: auto; }
  .btn, .filter, .segment button, .field, .command, .chip-remove, .disclosure, .link-btn { min-height: 44px; }
  .btn-icon { min-height: 44px; }
  .link-btn { display: inline-flex; align-items: center; }
  .disclosure { width: 44px; height: 44px; }
  .command input { min-height: 44px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .metric { min-height: 104px; padding: var(--space-3); }
  .metric .metric-icon { width: 32px; height: 32px; border-radius: 10px; }
  .metric .metric-icon svg { width: 18px; height: 18px; }
  .metric-name { margin-top: var(--space-2); font-size: 13px; }
  .metric-value { font-size: 24px; }
  .metric-note { font-size: 12px; }
  .layout-two { grid-template-columns: 1fr; }
  .content-card, .table-card, .category-card, .metric { min-width: 0; }
  .card-head { padding: var(--space-4); }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-card { min-height: 104px; }
  .notification { align-items: flex-start; flex-wrap: wrap; }
  .notification .btn { margin-left: auto; }
  .decision-row { align-items: center; padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
  .decision-row .row-main { flex: 1 1 160px; min-width: 160px; }
  .decision-row .btn { margin-left: auto; }
  .row-meta { white-space: normal; }
  .gradient-card { min-height: 230px; }
  .proposal-diff { grid-template-columns: 1fr; }
  .foundation-grid.cols-3 { grid-template-columns: 1fr; }
  .segmented { padding: 2px; overflow-x: auto; flex-wrap: nowrap; }
  .segmented button { flex: 0 0 auto; min-height: 44px; }
  .toolbar { flex-direction: row; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); flex-wrap: nowrap; }
  .toolbar-views { flex: 0 0 auto; width: auto; }
  .toolbar-filters { flex: 1 1 auto; min-width: 0; }
  .filters-section { margin-bottom: var(--space-2); }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(var(--frame-gap) * -1); padding-right: var(--frame-gap); padding-bottom: 2px; }
  .filters .filter { flex: 0 0 auto; min-height: 44px; }
  .toolbar-filters::after { content: ""; position: absolute; right: 0; top: 0; bottom: 2px; width: 24px; background: linear-gradient(90deg, rgba(244,245,247,0), rgba(244,245,247,.95)); pointer-events: none; }

  /* Filas de tarea de dos líneas limpias (Corrección B) */
  .task-row { display: block; min-height: 64px; padding: var(--space-3) var(--space-4); }
  .task-row .r1 { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
  .task-row .r1 > .mono { flex: 0 0 auto; font-size: 12px; padding-top: 2px; }
  .task-row .r1 > strong { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .task-row .r2 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
  .task-row .r2 .date { margin-left: 0; }
  .task-row .r2 .avatars { margin-left: auto; }
  .id-cell { flex-wrap: wrap; }
  .derivative { display: block; min-height: 0; padding: var(--space-3) var(--space-4); }
  .derivative .der-name { border-left: 0; padding-left: var(--space-6); border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); margin-bottom: var(--space-2); }

  /* Tablas genéricas convertidas en fila de título + metadatos (Corrección B) */
  .table-card .table-wrap { overflow: visible; }
  .table-card table, .table-card tbody, .table-card tr, .table-card td { display: block; }
  .table-card thead { display: none; }
  .table-card tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); min-height: 64px; border-top: 1px solid var(--border); }
  .table-card td { height: auto; padding: 0; border: 0; white-space: normal; }
  .table-card td:first-child { flex: 1 0 100%; font-size: 14px; }
  .table-card td:not(:first-child) { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); }
  .table-card td .chip { font-size: 12px; }

  /* Modal como hoja inferior (Corrección B) */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal { width: calc(100% - 16px); max-height: 90vh; border-radius: var(--radius-glass) var(--radius-glass) 0 0; margin: 0 8px; }
  .modal-head { border-radius: var(--radius-glass) var(--radius-glass) 0 0; min-height: 60px; }
  .modal-body { padding: var(--space-4); }
  .modal-foot { padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); gap: var(--space-3); }
  .modal-foot .btn { flex: 1 1 0; min-height: 44px; }

  /* Barra inferior: 4 destinos iguales, sin solapes */
  .bottom-nav { position: fixed; z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); min-height: var(--bottom-nav-h); padding: var(--space-2); border-radius: var(--radius-glass); overflow: hidden; }
  .bottom-link { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; min-height: 48px; min-width: 0; border: 0; background: transparent; border-radius: var(--radius-field); color: var(--text-secondary); font-size: 11px; cursor: pointer; }
  .bottom-link.active { background: rgba(255,255,255,.75); color: var(--text); font-weight: 600; }
  .bottom-sheet { position: fixed; z-index: 50; display: block; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom) + var(--bottom-nav-h) + 8px); border-radius: var(--radius-glass); padding: var(--space-3); transform: translateY(16px); opacity: 0; pointer-events: none; transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); }
  .bottom-sheet.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .sheet-link { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-3); border-radius: var(--radius-field); color: var(--text-secondary); }
  .sheet-link:hover, .sheet-link.active { background: rgba(255,255,255,.75); color: var(--text); font-weight: 600; }
  .bottom-sheet .scrim { display: block; position: fixed; inset: 0; z-index: -1; background: transparent; }
}
/* T-059: sustituye estilos en línea de la v3 y añade el cuerpo de tarjeta del esqueleto. */
.pav-sm { width: 28px; height: 28px; font-size: 11px; }
.metrics-then-table { margin-top: var(--space-4); }
.card-body { padding: var(--space-5); }
.card-body p { margin: 0 0 var(--space-4); color: var(--text-secondary); }
.card-body p:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .card-body { padding: var(--space-4); } }
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-5); background: var(--surface-soft); }
.login-card { width: min(100%, 620px); padding: var(--space-8); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.login-brand { margin-bottom: var(--space-8); }
.login-card h1 { margin: 0 0 var(--space-2); }
.login-card p { color: var(--text-secondary); }
.login-form { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.login-form label { font-weight: 600; }
.login-form input { color: var(--text); font: inherit; }
.login-form .field:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.login-form button { margin-top: var(--space-3); min-height: 44px; }
.login-error { padding: var(--space-3); border-radius: var(--radius-field); border: 1px solid var(--border); }
.logout-form { display: contents; }
.nav-shell[data-nav="contraida"] .logout-form .nav-icon-btn { display: inline-flex; margin-left: 0; }

/* Panel de inicio y navegación con roles semánticos del estándar 00. */
.page-head { align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.page-eyebrow, .home-kicker { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.page-context { color: var(--text-muted); font-size: 12px; text-align: right; }
.nav-empty { color: var(--text-secondary); font-size: 13px; padding: var(--space-3); }
.home-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: var(--space-8); align-items: center; padding: var(--space-8); margin-bottom: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-gradient); box-shadow: var(--shadow-card); }
.home-intro h2 { margin: 0 0 var(--space-3); font-size: 24px; line-height: 1.12; letter-spacing: -.035em; }
.home-intro p:last-child { max-width: 54ch; margin: 0; color: var(--text-secondary); line-height: 1.55; }
.home-quicklinks { display: grid; gap: var(--space-2); }
.home-quicklinks a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--touch); padding: var(--space-3) var(--space-4); color: var(--text); text-decoration: none; font-weight: 600; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-field); transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.home-quicklinks a:hover { background: var(--info-bg); border-color: var(--info-border); }
.home-quicklinks a:focus-visible, .home-search:focus-within, .home-sort:focus-within, .command:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.home-quicklinks a span { color: var(--link); }
.home-intro + .metrics { margin-bottom: var(--space-5); }
.home-intro + .metrics .metric { min-height: 150px; }
.home-intro + .metrics .metric-value { font-size: 28px; letter-spacing: -.04em; }
.home-search { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch); padding: 0 var(--space-3); border: 1px solid var(--control-border); border-radius: var(--radius-field); color: var(--text-muted); background: var(--surface); }
.home-search input { width: 180px; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
.home-sort { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch); padding: 0 var(--space-3); border: 1px solid var(--control-border); border-radius: var(--radius-field); color: var(--text-secondary); font-size: 13px; }
.home-sort select { max-width: 88px; border: 0; background: transparent; color: var(--text); font: inherit; }
.home-empty { padding: var(--space-8) !important; text-align: center; color: var(--text-secondary); }
@media (max-width: 1023px) { .home-intro { grid-template-columns: 1fr; gap: var(--space-5); } .home-quicklinks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .page-head { align-items: flex-start; } .page-context { max-width: 120px; } .home-intro { padding: var(--space-5); } .home-intro h2 { font-size: 20px; } .home-intro + .metrics .metric-value { font-size: 24px; } .home-quicklinks { grid-template-columns: 1fr; } .table-card .card-head { align-items: stretch; flex-direction: column; } .table-tools { display: flex; width: 100%; gap: var(--space-2); } .home-search { flex: 1; } .home-search input { width: 100%; } .home-sort { flex: 0 0 auto; } }
@media (max-width: 390px) { .table-tools { flex-wrap: wrap; } .home-sort { width: 100%; justify-content: space-between; } }

/* La selección conserva contraste en ambos temas mediante roles existentes. */
.nav-item.active, .sheet-link.active { background:var(--surface); color:var(--text); }

/* Atención: solo estados con registros y fuente; ninguna señal equivale a salud certificada. */
.attention-card { margin-top: var(--space-5); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.attention-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.attention-head h2 { margin: 0 0 var(--space-2); font-size: 18px; }
.attention-head p, .attention-empty, .attention-limit, .health-footnote { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.attention-counts { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: start; }
.attention-counts span, .attention-kind { padding: var(--space-1) var(--space-2); background: var(--warning-bg); color: var(--warning-strong); border-radius: var(--radius-chip); font-size: 11px; font-weight: 650; }
.attention-list { display: grid; gap: 0; padding: 0; margin: var(--space-4) 0 0; list-style: none; }
.attention-list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.attention-list li > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.attention-list li strong { font-size: 13px; }
.attention-list li span:not(.attention-kind), .attention-source time { color: var(--text-secondary); font-size: 12px; }
.attention-source { justify-content: flex-end; text-align: right; }
.attention-source a { min-height: var(--touch); display: inline-flex; align-items: center; color: var(--link); font-size: 12px; font-weight: 650; }
.attention-empty, .attention-limit { padding-top: var(--space-4); }
.health-history { margin-top: var(--space-2); color: var(--text-secondary); font-size: 12px; }
.health-history summary { cursor: pointer; min-height: 32px; color: var(--link); }
.health-history p { max-width: 30ch; margin: var(--space-1) 0; line-height: 1.4; }
.health-footnote { padding: var(--space-3) 0; }
@media (max-width: 767px) { .attention-card { padding: var(--space-4); } .attention-list li { display: grid; gap: var(--space-2); } .attention-source { justify-content: flex-start; text-align: left; } }

/* Cabecera compacta y acceso por teclado. */
.page-crumbs { margin-bottom: var(--space-2); color: var(--text-muted); font-size: 12px; }
.page-crumbs a { color: var(--link); text-decoration: none; }
.page-crumbs a:hover { text-decoration: underline; }
.skip-link { position: fixed; z-index: 100; top: -80px; left: var(--frame-gap); padding: var(--space-3); background: var(--surface); color: var(--link); border-radius: var(--radius-field); }
.skip-link:focus { top: var(--frame-gap); outline: 2px solid var(--focus); }

/* El menú móvil conserva destinos accesibles cuando crece el laboratorio. */
@media (max-width: 767px) {
  .bottom-sheet { max-height: min(70dvh, 640px); overflow-y: auto; overscroll-behavior: contain; }
  .bottom-sheet[hidden] { display: none; }
  .bottom-link { min-height: var(--touch); }
}

/* Recibo44: contexto dentro del contenido; navegación lateral/móvil original. */
.context-bar.page-head { position: sticky; top: var(--frame-gap); z-index: 10; display: flex; align-items: center; min-height: 76px; padding: var(--space-3) var(--space-5); margin: 0 0 var(--frame-gap); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.context-bar > div { min-width: 0; width: 100%; }
.context-bar h1 { white-space: normal; overflow-wrap: anywhere; margin: 0; }
.context-bar .page-crumbs { margin-bottom: var(--space-2); }
.context-bar a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.metrics-then-table .prod-cell { min-width: 0; max-width: 100%; }
.metrics-then-table .prod-cell strong { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) { .context-bar.page-head { min-height: 76px; padding: var(--space-3) var(--space-4); margin-top: var(--frame-gap); } }
.lab-intro { margin-bottom: var(--space-6); padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-glass); background: var(--surface); }
.lab-intro h2 { margin: var(--space-4) 0; font-size: 24px; font-weight: 600; line-height: 1.1; }
.lab-intro p { max-width: 68ch; color: var(--text-secondary); line-height: 1.6; }
.lab-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--space-4); margin:var(--space-6) 0; }
.lab-resource { padding:var(--space-6); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); min-width:0; }
.lab-resource h2,.lab-resource h3 { font-size:16px; margin:var(--space-4) 0; }
.lab-resource p { color:var(--text-secondary); line-height:1.6; }
.lab-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:var(--space-4); }
.lab-toolbar label { display:grid; gap:var(--space-2); flex:1; min-width:min(100%,200px); }
.lab-toolbar input,.lab-toolbar select { width:100%; min-height:44px; border:1px solid var(--control-border); border-radius:var(--radius-field); background:var(--surface); color:var(--text); padding:var(--space-3); font:inherit; }
.lab-source { white-space:pre-wrap; overflow-wrap:anywhere; max-height:480px; overflow:auto; background:var(--surface-soft); padding:var(--space-4); border-radius:var(--radius-field); font:13px/1.6 var(--font-mono); }
.lab-resource summary { cursor:pointer; color:var(--link); min-height:44px; display:flex; align-items:center; }
@media(max-width:767px){.lab-intro{padding:var(--space-5)}.lab-intro h2{font-size:20px}.lab-resource{padding:var(--space-4)}}

.form-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4)}
.form-grid label {display:grid; gap:var(--space-2); color:var(--text-secondary)}
.form-grid input,.form-grid textarea,.form-grid select {width:100%; min-width:0; min-height:44px; border:1px solid var(--control-border); border-radius:var(--radius-field); color:var(--text); background:var(--surface); padding:var(--space-3); font:inherit}
.form-grid textarea {min-height:112px; resize:vertical}
.form-grid input:focus-visible,.form-grid textarea:focus-visible,.form-grid select:focus-visible,.lab-toolbar input:focus-visible,.lab-toolbar select:focus-visible {outline:2px solid var(--focus);outline-offset:2px}
.knowledge-entry {padding:var(--space-5) 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.knowledge-entry:last-child {border-bottom:0}
.knowledge-entry h3 {font-size:16px;margin:var(--space-3) 0}
.page-heading {margin-bottom:var(--space-6)}
.eyebrow {font-size:12px;color:var(--text-muted)}
@media(max-width:767px){.form-grid{grid-template-columns:1fr}}

.form-grid > button {align-self:end;justify-self:start;min-height:44px}
.app-content > .content-card + .content-card {margin-top:var(--space-4)}
.content-card summary {cursor:pointer;min-height:44px;display:flex;align-items:center;gap:var(--space-2)}

.content-card > summary {padding:var(--space-5)}
.content-card > summary h2 {margin:0;font-size:16px}
.knowledge-entry form {display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-top:var(--space-4)}
.knowledge-entry form label {display:flex;align-items:center;gap:var(--space-2);min-height:44px}
.knowledge-entry form input[type=checkbox] {flex:none}

.activity-meta {display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.activity-summary {white-space:pre-wrap;overflow-wrap:anywhere}
.activity-pagination {display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-5)}

.activity-metrics {grid-template-columns:repeat(3,minmax(0,1fr))}
.activity-filters {margin:var(--space-4) 0}
@media(max-width:1023px){.activity-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-metrics .metric:last-child{grid-column:1 / -1}}