/* Sistema visual basado en "Glassmorphisme card – device access" (Igor Klochkov, CC BY 4.0).
   Valores medidos de la referencia: fondo #090909→#000, cristal con luz superior, brillo azul inferior (#3457e3),
   brillo verde lateral (#102a17), borde 1px más brillante arriba/abajo, toggle #9CC5A1, botón #B8935A→#D0A86D→#A5844F. */
:root {
  --font: var(--font-interface);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .9375rem; --fs-lg: 1.25rem; --fs-xl: 1.75rem; --fs-2xl: 2rem;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-full: 999px;
  --ease: var(--ease-standard); --dur: 160ms;

  --bg: #000; --ink: #fff; --ink-2: #d6d6da; --muted: #b4b2a8;
  --glass-top: rgba(255,255,255,.10); --glass-mid: rgba(255,255,255,.035); --glass-bot: rgba(255,255,255,.02);
  --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.22);
  --surface: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.07);
  --brand: #D0A86D; --brand-deep: #B8935A; --brand-glow: rgba(208,168,109,.30); --brand-soft: rgba(208,168,109,.16);
  --green: #9CC5A1; --green-soft: rgba(156,197,161,.15);
  --focus: #F3C884;
  --tile: linear-gradient(180deg, #202020, #121212);
  --shadow: 0 10px 30px rgba(0,0,0,.45);

  --st-recibido-bg: rgba(255,255,255,.10); --st-recibido-fg: #e4e4e7;
  --st-revision-bg: rgba(208,168,109,.16); --st-revision-fg: #E6CFA0;
  --st-aprobado-bg: rgba(247,243,234,.14); --st-aprobado-fg: #F7F3EA;
  --st-curso-bg: rgba(63,140,122,.24); --st-curso-fg: #8FC7B5;
  --st-completado-bg: var(--green-soft); --st-completado-fg: var(--green);
  --p-baja: #a0a0a8; --p-media: #E3DDD0; --p-alta: #E0B070; --p-urgente: #ff8080;
  --danger: #ff8080; --ok: var(--green);
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; background: #000; }
body {
  margin: 0; font: var(--fw-body) var(--fs-md)/1.5 var(--font); font-optical-sizing: auto; color: var(--ink); -webkit-font-smoothing: antialiased; min-height: 100vh;
  background:
    radial-gradient(60% 45% at 92% 6%, rgba(10,59,52,.55), transparent 70%),
    radial-gradient(70% 55% at 10% 108%, rgba(208,168,109,.07), transparent 70%),
    linear-gradient(170deg, #06130F 0%, #04201C 55%, #06130F 100%) fixed;
}
h1, h2, h3 { margin: 0; letter-spacing: -.015em; line-height: 1.2; font-weight: 600; }
h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-lg); } h3, .h-card { font-size: 1.0625rem; margin-bottom: var(--s-1); }
p { margin: 0 0 var(--s-3); } a { color: inherit; text-decoration: none; } small { font-size: var(--fs-xs); }
.muted { color: var(--muted); } .center { text-align: center; } .prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.sub { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--s-4); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.skip { position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: var(--s-2) var(--s-4); z-index: 100; border-radius: 0 0 10px 0; }
.skip:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== Superficie de cristal (tarjeta de la referencia) ===== */
.card, .kcard, .col, .kpi, .stepper, .req-row, .login-card, .persona, .callout, .table-wrap {
  position: relative; isolation: isolate;
  background:
    radial-gradient(120% 55% at 50% 125%, rgba(10,59,52,.55), transparent 62%),
    radial-gradient(60% 55% at 108% 18%, rgba(156,197,161,.10), transparent 70%),
    linear-gradient(180deg, var(--glass-top), var(--glass-mid) 42%, var(--glass-bot));
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.card::after, .kcard::after, .col::after, .kpi::after, .stepper::after, .req-row::after, .login-card::after, .persona::after, .callout::after, .table-wrap::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.09) 30%, rgba(255,255,255,.07) 70%, rgba(208,168,109,.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.kcard, .persona, .kpi { border-radius: var(--r-md); }
.col { border-radius: var(--r-lg); }
.card { padding: var(--s-5); }

/* ===== Controles ===== */
input, select, textarea { width: 100%; font: inherit; color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-sm); padding: 10px 14px; min-height: 44px; transition: border-color var(--dur), box-shadow var(--dur), background var(--dur); }
input::placeholder, textarea::placeholder { color: #8a8a92; }
textarea { resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: rgba(255,255,255,.32); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(208,168,109,.35); background: rgba(255,255,255,.07); }
label, legend { display: block; font-size: var(--fs-sm); font-weight: var(--fw-label); color: var(--ink-2); margin: var(--s-4) 0 var(--s-2); padding: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-5); font: inherit; font-weight: var(--fw-button); border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; transition: background var(--dur), transform var(--dur), box-shadow var(--dur), border-color var(--dur); }
.btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.btn:active { transform: translateY(1px); }
.btn.primary { color: #06130F; border: 1px solid rgba(243,200,132,.55); background: linear-gradient(180deg, #DDB97F 0%, #D0A86D 52%, #B8935A 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.35); }
.btn.primary:hover { background: linear-gradient(180deg, #E6C78F 0%, #D8B27A 52%, #C29C62 100%); border-color: rgba(243,200,132,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 28px rgba(208,168,109,.28), 0 8px 24px rgba(0,0,0,.35); }
.btn.ghost { background: transparent; }
.btn.small, button.small { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
.btn[disabled], button[disabled] { opacity: .6; cursor: progress; }
button.ghost { font: inherit; font-weight: 600; background: rgba(255,255,255,.05); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sm); cursor: pointer; transition: background var(--dur); }
button.ghost:hover { background: rgba(255,255,255,.12); }
button.link { background: none; border: 0; color: #F3C884; font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; margin-left: auto; min-height: 32px; padding: 0 var(--s-2); }
.error { color: var(--danger); font-weight: 600; margin: var(--s-3) 0 0; }

/* Cierre circular blanco (como la referencia) */
.close-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #000; font-size: 20px; line-height: 1; font-weight: 600; flex: none; transition: transform var(--dur), box-shadow var(--dur); }
.close-btn:hover { transform: scale(1.06); box-shadow: 0 0 20px rgba(255,255,255,.35); }

/* Toggle neón (referencia) */
.switch-row { display: flex; align-items: center; gap: var(--s-3); margin: 0; padding: var(--s-1) 0; cursor: pointer; font-weight: 500; }
.switch-row b { display: block; color: #fff; font-size: var(--fs-md); } .switch-row small { display: block; color: var(--muted); font-weight: 400; }
.switch-row > span:nth-child(2) { flex: 1; }
.switch { appearance: none; -webkit-appearance: none; position: relative; width: 46px; min-height: 0; height: 28px; padding: 0; flex: none; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.12); background: #2a2a2d; cursor: pointer; transition: background var(--dur), box-shadow var(--dur); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--dur) var(--ease), background var(--dur); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.switch:checked { background: var(--green); border-color: var(--green); box-shadow: 0 0 16px rgba(156,197,161,.5); }
.switch:checked::after { transform: translateX(18px); background: #eafff0; }
.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: none; border-color: var(--focus); }
.switch:checked:focus-visible { box-shadow: 0 0 16px rgba(156,197,161,.5); }

/* Baldosa de icono (referencia) */
.tile { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--tile); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.4); font-size: 18px; }

/* ===== Shell ===== */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s-5); padding: var(--s-3) var(--s-5); background: rgba(8,8,10,.62); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); border-bottom: 1px solid rgba(255,255,255,.09); }
.brand { display: flex; align-items: center; gap: var(--s-3); }
.brand b { display: block; font-size: var(--fs-md); } .brand small { display: block; color: var(--muted); }
.logo { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #A5844F, #D0A86D); color: #fff; font-weight: 800; letter-spacing: .02em; flex: none; box-shadow: 0 0 20px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.35); }
.topbar nav { display: flex; gap: var(--s-1); }
.topbar nav a { padding: var(--s-2) var(--s-4); border-radius: var(--r-full); color: var(--muted); font-weight: 600; font-size: var(--fs-sm); min-height: 36px; display: inline-flex; align-items: center; transition: background var(--dur), color var(--dur); }
.topbar nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.topbar nav a.active { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.who { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.user { display: flex; align-items: center; gap: var(--s-2); } .user b { display: block; font-size: var(--fs-sm); } .user small { display: block; color: var(--muted); }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tile); font-size: var(--fs-xs); font-weight: 700; flex: none; border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.4); text-shadow: 0 0 10px currentColor; }
.main { max-width: 1240px; margin: 0 auto; padding: var(--s-5); min-height: calc(100vh - 140px); }
.shell.agency .main { max-width: 1500px; }
.foot { text-align: center; padding: var(--s-5); color: var(--muted); font-size: var(--fs-xs); }
.foot a { text-decoration: underline; display: inline-block; padding: 4px 0; min-height: 24px; }
.loading { color: var(--muted); padding: var(--s-7); text-align: center; }
.loading::before { content: ""; display: block; width: 24px; height: 24px; margin: 0 auto var(--s-3); border: 3px solid rgba(255,255,255,.15); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.page-head p { margin: var(--s-1) 0 0; }
.filters { display: flex; gap: var(--s-2); flex-wrap: wrap; } .filters select, .page-head > select { width: auto; min-width: 190px; }
.back { display: inline-block; color: var(--muted); font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--s-3); padding: var(--s-1) 0; }
.back:hover { color: #fff; }

/* ===== Cards, badges ===== */
.card.empty { text-align: center; padding: var(--s-7) var(--s-5); display: grid; gap: var(--s-2); justify-items: center; }
.stack { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; white-space: nowrap; border: 1px solid rgba(255,255,255,.08); }
.st-recibido { background: var(--st-recibido-bg); color: var(--st-recibido-fg); } .st-revision { background: var(--st-revision-bg); color: var(--st-revision-fg); }
.st-aprobado { background: var(--st-aprobado-bg); color: var(--st-aprobado-fg); } .st-curso { background: var(--st-curso-bg); color: var(--st-curso-fg); }
.st-completado { background: var(--st-completado-bg); color: var(--st-completado-fg); border-color: rgba(156,197,161,.25); }
.prio { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.prio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.prio-baja { color: var(--p-baja); } .prio-media { color: var(--p-media); } .prio-alta { color: var(--p-alta); } .prio-urgente { color: var(--p-urgente); }
.prio.proposed::before { background: transparent; border: 2px solid currentColor; box-shadow: none; }
.code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.tag { font-size: var(--fs-xs); font-weight: 700; background: var(--brand-soft); color: #F3C884; padding: 1px 9px; border-radius: var(--r-full); }
.tag.warn { background: var(--st-revision-bg); color: var(--st-revision-fg); }
.cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 8px currentColor; }
.count { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; margin-left: var(--s-1); }

/* ===== Cliente: lista ===== */
.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }
.chip { font: inherit; font-size: var(--fs-sm); font-weight: 600; min-height: 38px; padding: 0 var(--s-4); border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: var(--ink-2); cursor: pointer; transition: all var(--dur); }
.chip b { margin-left: 5px; color: var(--muted); }
.chip:hover { border-color: rgba(255,255,255,.34); color: #fff; }
.chip.on { background: #fff; color: #000; border-color: #fff; box-shadow: 0 0 20px rgba(255,255,255,.25); } .chip.on b { color: inherit; }
.req-list { display: grid; gap: var(--s-3); }
.req-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); transition: transform var(--dur), box-shadow var(--dur); }
.req-row:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.55), 0 0 28px rgba(10,59,52,.2); }
.req-main { display: grid; gap: 2px; min-width: 0; } .req-main strong { overflow-wrap: anywhere; font-weight: 600; }
.req-meta { display: flex; align-items: center; gap: var(--s-4); flex: none; }

/* ===== KPIs ===== */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); margin-bottom: var(--s-4); }
.kpi { display: grid; gap: 2px; padding: var(--s-4) var(--s-4); }
.kpi-v { font-size: var(--fs-2xl); font-weight: var(--fw-metric); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-l { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.kpi.attn .kpi-v { color: var(--p-alta); } .kpi.hot .kpi-v { color: var(--p-urgente); } .kpi.done .kpi-v { color: var(--green); text-shadow: 0 0 18px rgba(156,197,161,.45); }
@media (max-width: 1000px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .kpis { grid-template-columns: 1fr 1fr; } }

/* ===== Tablero ===== */
.board { display: grid; grid-template-columns: repeat(5, minmax(250px, 1fr)); gap: var(--s-3); overflow-x: auto; padding: 2px 2px var(--s-3); scroll-snap-type: x proximity; }
.col { padding: var(--s-3); min-height: 200px; scroll-snap-align: start; box-shadow: none; }
.col .h-card { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--s-3); padding: 0 var(--s-1); }
.col-empty { text-align: center; font-size: var(--fs-sm); padding: var(--s-5) 0; }
.kcard { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2); cursor: pointer; display: grid; gap: var(--s-2); transition: transform var(--dur), box-shadow var(--dur); }
.kcard:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 24px rgba(10,59,52,.22); }
.kclient { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.kmeta { display: flex; justify-content: space-between; align-items: center; }
.kfoot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.advance { font: inherit; font-size: var(--fs-xs); font-weight: 700; min-height: 32px; padding: 0 var(--s-3); border-radius: var(--r-full); border: 1px solid rgba(208,168,109,.7); background: rgba(208,168,109,.14); color: #c6d2ff; cursor: pointer; transition: all var(--dur); }
.advance:hover { background: linear-gradient(90deg, #B8935A, #D0A86D); color: #fff; box-shadow: 0 0 18px var(--brand-glow); }
.klink { color: inherit; display: inline-block; min-height: 24px; line-height: 1.4; } .klink:hover strong { text-decoration: underline; }

/* ===== Tabla ===== */
.table-wrap { padding: 0; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 860px; }
.table th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: var(--s-4); border-bottom: 1px solid var(--border); font-weight: 600; }
.table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.table tbody tr { cursor: pointer; transition: background var(--dur); } .table tbody tr:hover { background: rgba(255,255,255,.06); }
.table tbody tr:last-child td { border-bottom: 0; }

/* ===== Detalle ===== */
.detail-head { display: flex; justify-content: space-between; gap: var(--s-4); align-items: flex-start; margin-bottom: var(--s-5); flex-wrap: wrap; }
.detail-head h1 { margin: var(--s-1) 0; overflow-wrap: anywhere; } .detail-head p { margin: 0; }
.head-badges { display: flex; gap: var(--s-3); align-items: center; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-4); align-items: start; }
.stepper { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 var(--s-5); padding: var(--s-5); }
.stepper li { position: relative; display: grid; justify-items: center; gap: var(--s-2); text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.stepper li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: rgba(255,255,255,.14); z-index: 0; }
.stepper li:first-child::before { display: none; }
.stepper .dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #141416; border: 2px solid rgba(255,255,255,.2); font-size: var(--fs-xs); }
.stepper li.done .dot { background: var(--green); border-color: var(--green); color: #0B1512; box-shadow: 0 0 16px rgba(156,197,161,.5); font-weight: 800; }
.stepper li.done::before { background: var(--green); box-shadow: 0 0 8px rgba(156,197,161,.5); }
.stepper li.current::before { background: linear-gradient(90deg, var(--green), var(--brand)); }
.stepper li.current .dot { border-color: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgba(208,168,109,.25), 0 0 20px var(--brand-glow); }
.stepper li.current, .stepper li.done { color: #fff; }
.callout { padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); display: block; }
.callout.success { box-shadow: var(--shadow), 0 0 30px rgba(156,197,161,.12); }
.callout.success b { color: var(--green); }
.evt-note { margin-top: var(--s-1); color: var(--ink-2); overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); margin: 0; font-size: var(--fs-sm); }
.facts dt { color: var(--muted); } .facts dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.files { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: var(--s-2); }
.files li { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-2) var(--s-3); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-sm); }
.files .tile { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
.files .fmeta { display: grid; min-width: 0; flex: 1; }
.files a { font-weight: 600; color: #fff; overflow-wrap: anywhere; min-height: 24px; } .files a:hover { text-decoration: underline; }
.files small { color: var(--muted); }
.files li > small { margin-left: auto; }
label.upload { cursor: pointer; margin: 0; width: fit-content; font-weight: 600; }
.comment-form .row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: var(--s-3); flex-wrap: wrap; }
.timeline { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: 0; }
.evt { display: grid; grid-template-columns: 34px 1fr; gap: var(--s-3); padding-bottom: var(--s-4); position: relative; }
.evt::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: rgba(255,255,255,.1); }
.evt:last-child::before { display: none; }
.evt-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tile); border: 1px solid rgba(255,255,255,.09); font-size: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.evt.internal .evt-icon { background: var(--st-revision-bg); }
.evt.internal .evt-note { background: var(--st-revision-bg); color: var(--st-revision-fg); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); }
.evt-head { font-size: var(--fs-sm); line-height: 1.7; }
.manage hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-4) 0 0; }
.manage form > .btn { margin-top: var(--s-3); width: 100%; }
.inline { display: flex; gap: var(--s-2); } .inline select { flex: 1; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); } .card-head .h-card { margin: 0; }
.hint { font-size: var(--fs-sm); margin: var(--s-3) 0 0; }

/* ===== Formulario (modal "Just a minute…") ===== */
.form { max-width: 640px; margin: 0 auto; padding: var(--s-6); }
.form-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-4); }
.form-head h1 { font-size: var(--fs-xl); } .form-head p { margin: var(--s-1) 0 0; }
.form > label:first-of-type { margin-top: 0; }
.prio-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.choice { position: relative; margin: 0; display: grid; gap: 2px; padding: var(--s-3); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-sm); background: rgba(255,255,255,.04); cursor: pointer; transition: all var(--dur); min-height: 66px; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.choice b { font-size: var(--fs-sm); } .choice small { color: var(--muted); font-weight: 500; }
.choice:hover { border-color: rgba(255,255,255,.34); }
.choice.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand), 0 0 22px rgba(10,59,52,.3); }
.choice:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.drop { border: 1.5px dashed rgba(255,255,255,.26); border-radius: var(--r-md); padding: var(--s-5); text-align: center; color: var(--ink-2); cursor: pointer; transition: all var(--dur); background: rgba(255,255,255,.03); }
.drop:hover, .drop.over { border-color: var(--brand); background: var(--brand-soft); }
.files.picked { margin-top: var(--s-3); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-5); }
.form-actions .btn.primary { flex: 1; }

/* ===== Login (modal de la referencia) ===== */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s-5); }
.login-card { width: min(520px, 100%); padding: var(--s-6); }
.brand.big { margin-bottom: var(--s-4); } .brand.big b { font-size: 1.25rem; } .brand.big .logo { width: 46px; height: 46px; }
.demo-note { background: var(--st-revision-bg); color: var(--st-revision-fg); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); border: 1px solid rgba(208,168,109,.25); }
.login-card h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: var(--s-5) 0 var(--s-2); font-weight: 600; }
.personas { display: grid; gap: var(--s-2); }
.persona { display: flex; align-items: center; gap: var(--s-3); text-align: left; font: inherit; color: inherit; padding: var(--s-3) var(--s-4); min-height: 64px; border: 0; cursor: pointer; transition: transform var(--dur), box-shadow var(--dur); box-shadow: none; width: 100%; }
.persona:hover { transform: translateY(-1px); box-shadow: 0 0 26px rgba(10,59,52,.28); }
.persona .avatar { width: 44px; height: 44px; font-size: var(--fs-sm); border-radius: 12px; }
.persona strong { display: block; font-weight: 600; } .persona small { display: block; color: var(--ink-2); font-size: var(--fs-sm); } .persona small.muted { color: var(--muted); }

/* ===== Toasts ===== */
#toasts { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 60; display: grid; gap: var(--s-2); max-width: min(420px, calc(100vw - 32px)); }
.toast { background: rgba(20,20,24,.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); box-shadow: var(--shadow), 0 0 24px rgba(156,197,161,.15); font-weight: 600; font-size: var(--fs-sm); animation: toast-in .24s var(--ease); border: 1px solid rgba(255,255,255,.14); border-left: 3px solid var(--green); }
.toast.err { border-left-color: #ff6b6b; box-shadow: var(--shadow), 0 0 24px rgba(255,107,107,.18); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
h1:focus { outline: none; }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .detail-grid { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; gap: var(--s-3); } .who { margin-left: auto; }
}
@media (max-width: 720px) {
  .main { padding: var(--s-4); }
  .topbar { padding: var(--s-3) var(--s-4); position: static; }
  .topbar nav { order: 3; width: 100%; overflow-x: auto; }
  .user span:last-child { display: none; }
  .req-row { flex-direction: column; align-items: flex-start; padding: var(--s-4); }
  .req-meta { width: 100%; justify-content: space-between; }
  .prio-choices { grid-template-columns: 1fr 1fr; }
  .board { grid-template-columns: repeat(5, 84%); }
  .stepper { padding: var(--s-4) var(--s-2); }
  .stepper li:not(.current) .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stepper .lbl { font-size: var(--fs-xs); white-space: nowrap; }
  .stepper.finished li:last-child .lbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .form { padding: var(--s-5) var(--s-4); } .form-actions { flex-direction: column-reverse; } .form-actions .btn { width: 100%; }
  .page-head > .btn { width: 100%; } .filters select, .page-head > select { width: 100%; }
  .login-card { padding: var(--s-5) var(--s-4); }
  .facts { grid-template-columns: 1fr; gap: 0; } .facts dd { text-align: left; margin-bottom: var(--s-2); }
}
@media (max-width: 380px) { h1 { font-size: 1.4rem; } .card { padding: var(--s-4); } .head-badges { flex-wrap: wrap; } }

/* ===== Marca (activos verificados de la web de la agencia) ===== */
.brand-logo { display: block; height: 30px; width: auto; flex: none; }
.brand.big .brand-logo { height: 44px; }
.brand-prod { padding-left: var(--s-3); border-left: 1px solid rgba(255,255,255,.18); }
.accent { font-family: var(--font-editorial); font-style: italic; font-weight: 400; letter-spacing: -.005em; }
@media (max-width: 380px) { .brand-logo { height: 24px; } .brand-prod small { display: none; } }

/* ===== Navegación Liquid Glass (cápsula flotante estilo iOS 26: vidrio translúcido, reflejo superior, selección deslizante) ===== */
.lg-nav { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; display: flex; gap: 2px; padding: 6px; border-radius: 999px; max-width: calc(100vw - 16px);
  background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.05) 55%, rgba(255,255,255,.09));
  -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.08); backdrop-filter: blur(26px) saturate(190%) brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46), inset 0 -1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.10), 0 16px 46px rgba(0,0,0,.58), 0 2px 8px rgba(0,0,0,.35); }
.lg-nav::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(110% 80% at 18% -35%, rgba(255,255,255,.30), transparent 56%); }
.lg-pill { position: absolute; top: 6px; bottom: 6px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 999px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 16px rgba(0,0,0,.38);
  transition: transform 320ms var(--ease-enter), width 320ms var(--ease-enter), opacity 200ms; }
.lg-item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 66px; min-height: 56px; padding: 6px 14px; border-radius: 999px; color: #e6e6ea; font-size: var(--fs-xs); font-weight: var(--fw-label); white-space: nowrap; transition: color var(--dur), background var(--dur); }
.lg-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.lg-item.active { color: #fff; }
.lg-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 999px; }
.lg-item .l-short { display: none; }
.lg-item.external .l-full::after { content: " ↗" / ""; }
.shell .foot { padding-bottom: 120px; }
#toasts { bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 35; } /* por debajo de la barra (40) y de su menú de idioma, para que un aviso no tape opciones */
/* Etiqueta completa: siempre accesible (visualmente oculta, nunca display:none) cuando la barra se compacta. */
@media (max-width: 820px) {
  .lg-item .l-full { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lg-item .l-short { display: inline; }
  .lg-item { min-width: 0; padding: 6px 9px; }
}
/* Móvil: la barra ocupa el ancho; solo el elemento activo muestra su etiqueta (el resto, icono; el nombre accesible se conserva). */
@media (max-width: 560px) {
  .lg-nav { left: 8px; right: 8px; transform: none; max-width: none; justify-content: space-between; }
  .lg-item { flex: 0 1 auto; min-width: 40px; padding: 6px 8px; }
  .lg-item:not(.active):not(.lang-btn) .l-short { display: block; max-width: 0; overflow: hidden; }
  .lg-item.active .l-short { display: block; }
}
@media (max-width: 360px) { .lg-nav { padding: 5px; } .lg-item { min-width: 36px; padding: 6px 5px; } }

/* ===== Selector de idioma (botón + menú de cristal; sin banderas) ===== */
.lang { position: relative; display: flex; }
.lang-btn { font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-label); color: #e6e6ea; background: none; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.lg-nav .lang-btn { min-height: 56px; }
.lang-btn[aria-expanded="true"] { background: rgba(255,255,255,.14); color: #fff; }
.lang-btn svg { transition: transform var(--dur) var(--ease); }
.lang-btn:hover svg { transform: rotate(-8deg) scale(1.06); }
.lang-btn .l-full, .lang-btn .l-short { letter-spacing: .04em; }
/* En la barra el botón es un elemento más: código siempre visible, el menú abre hacia arriba. */
.lg-nav .lang-btn .l-full { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; display: none; }
.lg-nav .lang-btn .l-short { display: inline; max-width: none; }
.lg-menu { position: absolute; z-index: 3; min-width: 232px; max-width: calc(100vw - 16px); padding: 6px; display: grid; gap: 2px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.07) 60%), rgba(22,24,32,.88);
  -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46), inset 0 0 0 1px rgba(255,255,255,.14), 0 18px 48px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.35); }
.lg-menu[hidden] { display: none; }
.lang.nav .lg-menu { right: -6px; bottom: calc(100% + 18px); transform-origin: bottom right; animation: lg-menu-up 180ms var(--ease-enter); }
.lang.float .lg-menu { right: 0; top: calc(100% + 8px); transform-origin: top right; animation: lg-menu-down 180ms var(--ease-enter); }
@keyframes lg-menu-up { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes lg-menu-down { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.lg-menu [data-lang] { white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 44px; padding: 0 var(--s-4); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-label); text-align: left; color: #f1f1f4; background: none; border: 0; border-radius: 16px; cursor: pointer; transition: background var(--dur), color var(--dur); }
.lg-menu [data-lang]:hover { background: rgba(255,255,255,.10); color: #fff; }
.lg-menu [data-lang][aria-checked="true"] { background: rgba(255,255,255,.16); color: #fff; font-weight: 650; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.lg-menu [data-lang]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lg-menu i { font-style: normal; width: 1.1em; text-align: center; color: var(--green); }
/* Login: botón de cristal flotante arriba a la derecha, menú hacia abajo. */
.lang-float { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 50; }
.lang.float .lang-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s-4); border-radius: 999px; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.05) 55%, rgba(255,255,255,.09));
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46), inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 26px rgba(0,0,0,.45); transition: background var(--dur), transform var(--dur); }
.lang.float .lang-btn:hover { background: rgba(255,255,255,.2); }
.lang.float .lang-btn:active { transform: scale(.97); }
.lang.float .lang-btn svg { width: 20px; height: 20px; }
.lang.float .l-short { display: none; }
.lang.float .l-full { position: static; width: auto; height: auto; margin: 0; clip: auto; font-size: var(--fs-sm); }

/* ===== Dashboard del cliente y feed de actividad ===== */
.kpis-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .kpis-3 { grid-template-columns: 1fr 1fr 1fr; } .kpis-3 .kpi { padding: var(--s-3); } .kpis-3 .kpi-l { font-size: var(--fs-xs); } .kpis-3 small { display: none; } }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (max-width: 1000px) { .dash-grid { grid-template-columns: 1fr; } }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.mini-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); transition: background var(--dur), border-color var(--dur); }
.mini-row:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.mini-main { display: grid; gap: 2px; min-width: 0; } .mini-main strong { overflow-wrap: anywhere; font-weight: 600; }
.mini-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
@media (max-width: 720px) { .mini-row { flex-direction: column; align-items: flex-start; } .mini-meta { flex-direction: row; align-items: center; } }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.bars li { display: grid; grid-template-columns: 84px 1fr 28px; align-items: center; gap: var(--s-3); }
.bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #B8935A, #D0A86D); transition: width 420ms var(--ease-enter); }
.bars b { text-align: right; font-variant-numeric: tabular-nums; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed-item { display: grid; grid-template-columns: 34px 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.feed-item:last-child { border-bottom: 0; } .feed-item:first-child { padding-top: 0; }
.feed-item.internal .evt-icon { background: var(--st-revision-bg); }
.feed-text { font-size: var(--fs-sm); line-height: 1.6; overflow-wrap: anywhere; }
.empty-inline { text-align: center; padding: var(--s-5) var(--s-3); display: grid; gap: var(--s-2); justify-items: center; }
.kclient { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.assignee { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; color: #F3C884; }
.assignee.none { color: var(--muted); font-weight: 500; }
.table { min-width: 960px; }

/* ===== Equipo (directorio interno: solo nombre y especialidad) ===== */
.unassigned-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.unassigned-bar .h-card { margin: 0; } .unassigned-bar .sub { margin: var(--s-1) 0 0; }
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--s-4); }
.team-card { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.team-card .who-row { display: flex; align-items: center; gap: var(--s-3); min-width: 0; } .team-card .who-row > div { min-width: 0; }
.team-card .h-card { margin: 0; overflow-wrap: anywhere; }
.team-card .spec { color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.team-card .counts { color: var(--muted); font-size: var(--fs-sm); }
.team-card .tag { justify-self: start; }
.team-card .btn { justify-self: start; }
.actions-list { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-2); font-size: var(--fs-sm); }

/* Selector de archivos accesible: el input real es enfocable (no `hidden`) y la etiqueta muestra el foco. */
.file-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; min-height: 0; }
label.upload:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Errores de campo del formulario (aria-invalid + mensaje asociado) */
.field-error { margin: var(--s-1) 0 0; font-size: var(--fs-sm); }
[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }

/* ===== Staging: marca de texto, selector de empresa y equipo ===== */
.wordmark { font-family: var(--font-editorial); font-style: italic; font-size: 1.35rem; letter-spacing: -.01em; color: var(--mcp-ivory, #F7F3EA); white-space: nowrap; }
.wordmark i { color: var(--mcp-gold-500, #D0A86D); margin-right: 1px; }
.co { position: relative; display: flex; }
.co-btn { background: none; border: 0; cursor: pointer; font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-label); }
.co-btn[aria-expanded="true"] { background: rgba(255,255,255,.14); color: #fff; }
.co .l-short { display: none; }
.co .co-menu { right: -6px; bottom: calc(100% + 18px); transform-origin: bottom right; animation: lg-menu-up 180ms var(--ease-enter); }
.co .co-menu [data-co] { white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 44px; padding: 0 var(--s-4); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-label); text-align: left; color: #fff; background: none; border: 0; border-radius: 16px; cursor: pointer; }
.co .co-menu [data-co]:hover { background: rgba(255,255,255,.10); }
.co .co-menu [data-co][aria-checked="true"] { background: rgba(255,255,255,.16); font-weight: 650; }
.co .co-menu [data-co]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (max-width: 720px) { .co .l-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .co .l-short { display: inline; } .co-btn { min-width: 0; } }
.member-list { list-style: none; margin: var(--s-4) 0; padding: 0; display: grid; gap: var(--s-2); }
.member { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: rgba(255,255,255,.03); }
.member-main { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; } .member-main small { color: var(--muted); }
.member-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.invite-link { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); border: 1px solid rgba(208,168,109,.4); background: rgba(208,168,109,.08); display: grid; gap: var(--s-2); }
.invite-link code { display: block; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--fs-sm); color: #F3C884; }

/* ===== Service Visibility V1: servicios, evidencia y estados (paleta verde bosque + latón; sin azules ni neones) ===== */
.co-badge { display: inline-grid; place-items: center; min-width: 2.1em; height: 2.1em; padding: 0 .4em; margin-right: .5em; border-radius: 10px; font-size: .55em; font-weight: 700; letter-spacing: .04em; vertical-align: middle; color: #06130F; background: linear-gradient(180deg, #E9D3A6, var(--co, #D0A86D)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.co-badge.sm { font-size: .7rem; min-width: 1.9em; height: 1.9em; margin-right: .35em; border-radius: 7px; vertical-align: -.25em; }
.sec-head { margin: var(--s-6) 0 var(--s-3); } .sec-head h2 { font-size: var(--fs-lg); } .sec-head p { margin: 2px 0 0; }
.sv-note { margin: 0 0 var(--s-4); font-size: var(--fs-sm); color: var(--ink-2); padding: var(--s-3) var(--s-4); }
.sv-legend { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); } .sv-legend summary { cursor: pointer; list-style: none; } .sv-legend summary::-webkit-details-marker { display: none; }
.sv-legend summary h2 { display: inline; } .sv-legend summary::after { content: " ＋"; color: var(--brand); } .sv-legend[open] summary::after { content: " −"; }
.legend { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); } .legend li { display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-2); }
.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }
.svc-card { display: grid; gap: var(--s-2); padding: var(--s-4); transition: transform var(--dur), box-shadow var(--dur); }
.svc-card:hover { transform: translateY(-2px); box-shadow: 0 0 26px rgba(208,168,109,.16); }
.svc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); } .svc-top h3 { margin: 0; font-size: 1.0625rem; }
.svc-meta { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.src { display: block; font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; line-height: 1.4; } .src b { color: var(--ink-2); font-weight: 600; }
.sv-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-5); align-items: start; }
.rows { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); } .rows.rest { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: rgba(247,243,234,.03); }
.row-main { display: grid; gap: 3px; min-width: 0; } .row-main small { font-size: var(--fs-xs); }
.row-meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: none; max-width: 48%; }
.sub-h { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: var(--s-4) 0 var(--s-2); font-weight: 600; }
.nodata { display: inline-block; margin-top: var(--s-2); padding: 3px 10px; border-radius: 999px; border: 1px dashed rgba(247,243,234,.3); color: var(--muted); font-size: var(--fs-xs); }
.ev, .st { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.ev-invoiced { background: rgba(208,168,109,.16); color: #F0DDB4; border-color: rgba(208,168,109,.35); }
.ev-documented { background: rgba(247,243,234,.08); color: #E3DDD0; border-color: rgba(247,243,234,.2); }
.ev-ceo { background: rgba(243,200,132,.10); color: #F3C884; border-color: rgba(243,200,132,.45); border-style: dashed; }
.ev-verified { background: rgba(156,197,161,.15); color: #B5D9B9; border-color: rgba(156,197,161,.4); }
.ev-contract { background: rgba(208,168,109,.08); color: #E6CFA0; border-color: rgba(208,168,109,.3); border-style: dashed; }
.ev-unknown { background: transparent; color: var(--muted); border-color: rgba(247,243,234,.22); border-style: dashed; }
.st { background: rgba(247,243,234,.08); color: #F7F3EA; }
.st-in_progress, .st-online { background: rgba(63,140,122,.24); color: #8FC7B5; } .st-final_stage { background: rgba(243,200,132,.16); color: #F3C884; }
.st-approved { background: rgba(247,243,234,.14); color: #F7F3EA; } .st-done, .st-delivered { background: rgba(156,197,161,.15); color: #B5D9B9; }
.st-planned, .st-paused { background: rgba(247,243,234,.08); color: #E3DDD0; } .st-unknown { background: transparent; color: var(--muted); border: 1px dashed rgba(247,243,234,.22); }
@media (max-width: 900px) { .sv-cols { grid-template-columns: 1fr; } .row { flex-direction: column; } .row-meta { justify-content: flex-start; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .svc-card { transition: none; } .svc-card:hover { transform: none; } }
.svc-card { min-width: 0; } .svc-top { flex-wrap: wrap; } .svc-top h3 { min-width: 0; overflow-wrap: anywhere; flex: 1 1 8em; }
.svc-card .ev { white-space: normal; max-width: 100%; }

/* ===== Portal V2: Home, gráficos, cronología y catálogo (Quiet Luxury: verde bosque, marfil, latón) ===== */
.ico { flex: none; }
.eyebrow { margin: 0 0 var(--s-1); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.hero { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; justify-content: space-between; padding: var(--s-6) var(--s-5); margin-bottom: var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
.hero-main { display: flex; gap: var(--s-4); align-items: center; min-width: 0; flex: 1 1 22rem; }
.hero h1 { margin: 0 0 var(--s-1); font-size: clamp(1.5rem, 4vw, 2.1rem); overflow-wrap: anywhere; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.co-badge.big { width: 56px; height: 56px; font-size: 1.15rem; flex: none; }

.sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin: var(--s-4) 0 var(--s-6); }
.sum-card { display: grid; gap: var(--s-1); align-content: start; text-align: left; font: inherit; color: inherit; text-decoration: none; cursor: pointer;
  padding: var(--s-4); min-height: 44px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--dur), transform var(--dur); }
.sum-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.sum-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sum-ico { color: var(--brand); }
.sum-val { font-size: 2rem; line-height: 1.1; font-weight: 600; }
.sum-lab { color: var(--ink-2); font-size: var(--fs-sm); }

.svc-top { display: flex; align-items: center; gap: var(--s-3); }
.svc-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand); flex: none; }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-6); }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.bar-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label val" "track track"; column-gap: var(--s-3); row-gap: 6px; align-items: center; width: 100%; min-height: 44px; padding: 6px var(--s-2);
  background: none; border: 1px solid transparent; border-radius: var(--r-sm); color: inherit; font: inherit; text-align: left; }
.bar-label { grid-area: label; } .bar-val { grid-area: val; } .bar-track { grid-area: track; }
button.bar-row { cursor: pointer; }
button.bar-row:hover, .bar-row.on { border-color: var(--brand); background: var(--brand-soft); }
button.bar-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bar-label { font-size: var(--fs-sm); min-width: 0; overflow-wrap: anywhere; }
.bar-track { height: 10px; min-width: 0; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: var(--r-full); transition: width 400ms var(--ease); }
.tone-brand { background: var(--brand); } .tone-green { background: var(--green); } .tone-muted { background: var(--muted); }
.bar-val { display: flex; align-items: baseline; gap: var(--s-2); line-height: 1.1; } .bar-val small { color: var(--muted); font-size: var(--fs-xs); }
.chart-hint { margin: var(--s-2) 0 0; font-size: var(--fs-xs); }
.vcols { width: 100%; height: auto; } .vcol { fill: var(--brand); } .vcol-val { fill: var(--ink); font-size: 11px; } .vcol-lab { fill: var(--muted); font-size: 10px; } .vcol-axis { stroke: var(--border-strong); }

.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.timeline { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-3); border-left: 1px solid var(--border-strong); }
.timeline li { position: relative; display: grid; gap: 2px; padding-left: var(--s-4); }
.timeline time { font-size: var(--fs-xs); color: var(--brand); }
.tl-dot { position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.tl-activity .tl-dot { background: var(--green); } .tl-source .tl-dot { background: var(--muted); }
.tl-body { display: grid; min-width: 0; overflow-wrap: anywhere; } .tl-body a { color: var(--ink); }

.cat-div { margin-bottom: var(--s-6); }
.div-tag { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: var(--s-2); border: 1px solid var(--brand); border-radius: 50%; color: var(--brand); font-size: var(--fs-sm); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s-3); }
.cat-card { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); min-width: 0; }
.cat-card.is-active { border-color: var(--green); }
.cat-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand); }
.cat-body h3 { margin: 0 0 var(--s-1); overflow-wrap: anywhere; } .cat-body p { margin: 0; }
.cat-foot { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: space-between; }
.cat-offer { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 520px) { .hero { padding: var(--s-5) var(--s-4); } }
@media (prefers-reduced-motion: reduce) { .sum-card, .bar-fill { transition: none; } .sum-card:hover { transform: none; } }
.chart-grid .card > * { justify-self: stretch; min-width: 0; }
.hbars, .hbars li { width: 100%; min-width: 0; }