/* CargaPLUS · Core aprobado 06/11/2026. Tokens/componentes sin geometría de Core. */
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  font-family: "Inter", "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-size: 14px;
  color-scheme: light;
  --brand-orange: #f65c08;
  --warning-bg: #fff8e8; --warning-ink: #836d34; --warning-line: #f0e2bc;
  --error-bg: #fff0ef; --error-ink: #923e37; --error-line: #edc8c3;
  --success-bg: #dcfce7; --success-ink: #166534; --success-line: #86efac;
  --bg: #e9edf2;
  --surface: #ffffff;
  --ink: #25262b;
  --muted: #63646d;
  --line: #dcdde2;
  --field: #f6f6f8;
  --field-line: #c7c8d0;
  --soft: #ededf1;
  --sidebar: #f5f6f8;
  --sidebar-card: #ffffff;
  --sidebar-line: #d3d8df;
  --sidebar-ink: #25262b;
  --sidebar-muted: #606671;
  --sidebar-hover: #e9edf2;
  --sidebar-selected: #ffffff;
  --sidebar-selected-line: #c8cfd9;
  --accent: #b7440b;
  --accent-text: #ffffff;
  --action-link: #a13c08;
  --action-line: #e9c7b5;
  --action-bg: #fff1e9;
  --action-hover: #fff7f2;
  --focus: #b7440b;
  --quiet-bg: #e8ecf1;
  --quiet-ink: #5e5f68;
  --card-top-light: #ffffff;
  --deck: #f2f4f7;
  --beam-edge: #dc773d91;
  --beam-glow: #f65c0812;
  --card-hover: #fdfdfd;
  --card-shadow: 0 4px 12px -5px #23334a24, inset 0 1px 0 #ffffff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --warning-bg: #3b301b; --warning-ink: #f4d38c; --warning-line: #66522b;
  --error-bg: #422623; --error-ink: #ffb9ae; --error-line: #78473e;
  --success-bg: #193d2d; --success-ink: #a0eac0; --success-line: #397c58;
  --bg: #080a0e;
  --surface: #181d26;
  --ink: #f2f2f4;
  --muted: #b0b1bb;
  --line: #343c49;
  --field: #131416;
  --field-line: #4b4d56;
  --soft: #222a35;
  --sidebar: #0d0e10;
  --sidebar-card: #17181b;
  --sidebar-line: #2c2d33;
  --sidebar-ink: #eeeef2;
  --sidebar-muted: #aaaab4;
  --sidebar-hover: #ffffff0e;
  --sidebar-selected: #ffffff09;
  --sidebar-selected-line: #ffffff26;
  --accent: #fb954c;
  --accent-text: #24150e;
  --action-link: #ffb17f;
  --action-line: #62402e;
  --action-bg: #302219;
  --action-hover: #201c19;
  --focus: #ff9c62;
  --quiet-bg: #17181b;
  --quiet-ink: #b0b1bb;
  --card-top-light: #ffffff0b;
  --deck: #0e1219;
  --beam-edge: #f58b48a6;
  --beam-glow: #f65c0830;
  --card-hover: #1d2430;
  --card-shadow: inset 0 1px 0 #ffffff0b;
}

* { box-sizing: border-box; }
body { font-family: "Inter", "Segoe UI", sans-serif; line-height: 1.5; margin: 0; background: var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:disabled, input:disabled { opacity: .5; cursor: not-allowed; }
:is(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 26px; font-weight: 600; letter-spacing: -.8px; }
h2 { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
p { font-size: 13px; line-height: 1.6; color: var(--muted); }
.muted { color: var(--muted); }
.brand { display: flex; align-items: center; gap: 11px; font-size: 21px; font-weight: 700; letter-spacing: -.6px; }
.brand-logo { width: 43px; height: 43px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.brand-plus { color: var(--brand-orange); }
.brand small { display: block; font-size: 8px; font-weight: 500; letter-spacing: 1.8px; color: var(--sidebar-muted); margin-top: 4px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 17px; min-height: 40px; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 650; transition: background-color .12s, border-color .12s, transform .08s; }
.button:not(.secondary):not(.danger):hover:not(:disabled) { background: var(--action-link); }
.button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 5px #0005; }
.button.secondary { background: var(--field); color: var(--ink); border-color: var(--line); }
.button.secondary:hover:not(:disabled) { background: var(--action-hover); border-color: var(--action-line); color: var(--action-link); }
.button.danger { background: transparent; color: var(--error-ink); border-color: var(--error-line); }
.text-action { color: var(--action-link); background: transparent; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: var(--card-shadow); min-width: 0; }
input, select, textarea { min-width: 0; border: 1px solid var(--field-line); border-radius: 9px; padding: 8px 10px; background: var(--field); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
label { font-size: 12px; font-weight: 600; color: var(--muted); }
.notice { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--quiet-bg); color: var(--quiet-ink); font-size: 12px; line-height: 1.6; }
.notice.error { background: var(--error-bg); color: var(--error-ink); border-color: var(--error-line); }
.notice.warning { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning-line); }
.notice.success { background: var(--success-bg); color: var(--success-ink); border-color: var(--success-line); }
dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 24px; box-shadow: var(--card-shadow); max-width: min(600px,calc(100vw - 32px)); }
dialog::backdrop { background: #0009; }
.theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--ink); flex-shrink: 0; }
.theme-toggle:hover { background: #7772; border-color: var(--brand-orange); }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:root:not([data-theme="dark"]) .theme-moon, :root[data-theme="dark"] .theme-sun { display: none; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
th { background: var(--field); font-size: 12px; font-weight: 600; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
tbody tr:hover { background: var(--soft); }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .button { transition: none; transform: none !important; } }

/* Reusable appearance only: shell sizes and compact-menu geometry belong to each module. */
.sidebar { background: var(--sidebar); color: var(--sidebar-ink); border-color: var(--sidebar-line); }
.sidebar .brand { color: var(--sidebar-ink); }
.sidebar .nav-link { color: var(--sidebar-muted); }
.sidebar .nav-link:hover { color: var(--sidebar-ink); background: var(--sidebar-hover); }
.sidebar .nav-link[aria-current="page"], .sidebar .nav-link.selected { color: var(--sidebar-ink); background: var(--sidebar-selected); border-color: var(--sidebar-selected-line); }
.deck { background: var(--deck); }
.accent-frame { border: 1px solid transparent; border-radius: 18px; background: linear-gradient(var(--deck),var(--deck)) padding-box, linear-gradient(115deg,var(--beam-edge),var(--line) 32%,var(--line) 72%,var(--beam-edge)) border-box; box-shadow: -8px 0 26px -12px var(--beam-glow), 8px 8px 28px -14px var(--beam-glow); }