/* GECIM · Sistema visual aprobado · dos fuentes × dos paletas × claro/oscuro */
:root {
  color-scheme: light;
  --font-ui: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  --font-scale: 1;
  --density-space: 1;
  --page-bg: #F4F7FA;
  --surface: #FFFFFF;
  --surface-soft: #EAF1F6;
  --surface-strong: #DCE8F0;
  --text: #172431;
  --muted: #4C5E6D;
  --header-bg: #003466;
  --header-text: #FFFFFF;
  --primary: #003466;
  --primary-hover: #00264C;
  --on-primary: #FFFFFF;
  --accent: #006B8F;
  --accent-hover: #005877;
  --on-accent: #FFFFFF;
  --border: #D2DCE4;
  --border-strong: #738998;
  --focus: #7C3AED;
  --success: #146C43;
  --success-soft: #E6F5ED;
  --warning: #825500;
  --warning-soft: #FFF3D6;
  --danger: #A8241E;
  --danger-soft: #FCE9E7;
  --info: #075E8C;
  --info-soft: #E4F3FA;
  --shadow-soft: 0 14px 36px rgba(18, 42, 60, .09);
  --shadow-small: 0 5px 16px rgba(18, 42, 60, .08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --text-base: calc(18px * var(--font-scale));
  --text-secondary: calc(16px * var(--font-scale));
  --control-height: calc(48px * var(--density-space));
}
html[data-font="plex"] { --font-ui: "IBM Plex Sans", Arial, Helvetica, sans-serif; }
html[data-font="roboto"] { --font-ui: "Roboto", Arial, Helvetica, sans-serif; }
html[data-scale="100"] { --font-scale: 1; }
html[data-scale="112"] { --font-scale: 1.12; }
html[data-scale="125"] { --font-scale: 1.25; }
html[data-density="comfortable"] { --density-space: 1; }
html[data-density="compact"] { --density-space: .88; }

html[data-palette="blue"][data-mode="dark"] {
  color-scheme: dark;
  --page-bg: #07131D; --surface: #0D1E2A; --surface-soft: #122B3A; --surface-strong: #19384A;
  --text: #F3F8FB; --muted: #B4C5D1; --header-bg: #081D2B; --header-text: #F2F8FC;
  --primary: #61B6E6; --primary-hover: #85C9EE; --on-primary: #07131D;
  --accent: #4DD5EF; --accent-hover: #82E5F5; --on-accent: #07131D;
  --border: #294251; --border-strong: #597183;
  --success: #72D6A4; --success-soft: #123828; --warning: #FFD27A; --warning-soft: #3C2D0E;
  --danger: #FF9C96; --danger-soft: #44201E; --info: #83D2F5; --info-soft: #123143;
  --shadow-soft: 0 16px 42px rgba(0, 0, 0, .30); --shadow-small: 0 6px 18px rgba(0, 0, 0, .24);
}
html[data-palette="petroleum"][data-mode="light"] {
  color-scheme: light;
  --page-bg: #F3F8F7; --surface: #FFFFFF; --surface-soft: #E8F2F0; --surface-strong: #D8EAE7;
  --text: #172928; --muted: #4B625F; --header-bg: #0B5D5B; --header-text: #FFFFFF;
  --primary: #0B5D5B; --primary-hover: #074846; --on-primary: #FFFFFF;
  --accent: #007F7A; --accent-hover: #006A66; --on-accent: #FFFFFF;
  --border: #CFDDD9; --border-strong: #718B86;
  --success: #146C43; --success-soft: #E6F5ED; --warning: #825500; --warning-soft: #FFF3D6;
  --danger: #A8241E; --danger-soft: #FCE9E7; --info: #0B6674; --info-soft: #E4F4F5;
  --shadow-soft: 0 14px 36px rgba(15, 61, 57, .09); --shadow-small: 0 5px 16px rgba(15, 61, 57, .08);
}
html[data-palette="petroleum"][data-mode="dark"] {
  color-scheme: dark;
  --page-bg: #071716; --surface: #0E2523; --surface-soft: #15312E; --surface-strong: #1E403C;
  --text: #F1FAF8; --muted: #B4CEC9; --header-bg: #0A211F; --header-text: #F1FAF8;
  --primary: #59D2C6; --primary-hover: #84E2D9; --on-primary: #071716;
  --accent: #74E1D6; --accent-hover: #9BEAE2; --on-accent: #071716;
  --border: #2A4945; --border-strong: #58766F;
  --success: #72D6A4; --success-soft: #123828; --warning: #FFD27A; --warning-soft: #3C2D0E;
  --danger: #FF9C96; --danger-soft: #44201E; --info: #83DCE4; --info-soft: #123637;
  --shadow-soft: 0 16px 42px rgba(0, 0, 0, .30); --shadow-small: 0 6px 18px rgba(0, 0, 0, .24);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-width: 320px; background: var(--page-bg); color: var(--text);
  font-family: var(--font-ui); font-size: var(--text-base); line-height: 1.6;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--primary); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { margin-top: 0; line-height: 1.16; letter-spacing: -.025em; }
h1 { margin-bottom: 20px; font-size: clamp(2.25rem, 5vw, 4.75rem); font-weight: 700; }
h2 { margin-bottom: 10px; font-size: clamp(1.75rem, 3vw, 2.55rem); font-weight: 700; }
h3 { margin-bottom: 10px; font-size: 1.28rem; font-weight: 600; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px var(--focus); border-radius: 6px; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; transform: translateY(-160%); padding: 10px 14px; border-radius: 8px; background: var(--surface); color: var(--text); font-weight: 700; text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.topbar { position: sticky; z-index: 80; top: 0; display: flex; align-items: center; gap: 24px; min-height: 78px; padding: 12px clamp(18px, 3vw, 48px); border-bottom: 4px solid var(--accent); background: var(--header-bg); color: var(--header-text); box-shadow: 0 4px 18px rgba(0,0,0,.14); }
.brand { display: grid; color: inherit; text-decoration: none; line-height: 1.12; }
.brand-name { font-size: 20px; font-weight: 700; letter-spacing: .055em; }
.brand-subtitle { margin-top: 3px; font-size: 13px; font-weight: 500; opacity: .82; }
.topnav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topnav a, .mobile-nav a { min-height: 44px; padding: 9px 12px; border-radius: 8px; color: inherit; font-size: 15px; font-weight: 600; text-decoration: none; }
.topnav a:hover { background: rgba(255,255,255,.12); }
.icon-button { display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; border: 1px solid rgba(255,255,255,.32); border-radius: 10px; background: transparent; color: inherit; }
.menu-toggle { display: none; margin-left: auto; }
.mobile-nav { position: sticky; z-index: 70; top: 78px; display: grid; gap: 4px; padding: 12px 18px; background: var(--header-bg); color: var(--header-text); box-shadow: var(--shadow-small); }
.mobile-nav[hidden] { display: none; }
.page-shell { display: grid; grid-template-columns: 245px minmax(0, 1fr); }
.section-rail { position: sticky; top: 82px; align-self: start; height: calc(100vh - 82px); padding: 28px 22px; overflow-y: auto; border-right: 1px solid var(--border); background: var(--surface); }
.rail-kicker, .section-number, .eyebrow, .panel-label, .spec-label, .option-tag { margin: 0; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.rail-title { margin: 4px 0 22px; font-size: 20px; font-weight: 700; }
.section-rail a { display: block; min-height: 42px; padding: 8px 10px; border-radius: 7px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.section-rail a:hover { background: var(--surface-soft); color: var(--text); }
.back-top { width: 100%; min-height: 44px; margin-top: 20px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font-weight: 600; }
main { min-width: 0; }
.section, .control-deck { padding: clamp(42px, 7vw, 94px) clamp(20px, 4vw, 64px); }
.section + .section { border-top: 1px solid var(--border); }
.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); align-items: center; gap: clamp(32px, 6vw, 84px); min-height: 650px; background: linear-gradient(145deg, var(--surface) 0%, var(--page-bg) 74%); }
.hero-copy { max-width: 900px; }
.eyebrow { margin-bottom: 20px; }
.lead { max-width: 72ch; margin: 0; color: var(--muted); font-size: calc(20px * var(--font-scale)); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-panel { padding: 30px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-soft); }
.hero-panel > strong { display: block; margin: 8px 0 2px; font-size: 30px; line-height: 1.2; }
.hero-panel > span { display: block; color: var(--muted); font-size: 16px; }
.active-summary { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 24px 0 16px; }
.active-summary div { padding: 12px; border-radius: 10px; background: var(--surface-soft); }
.active-summary dt { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.active-summary dd { margin: 4px 0 0; font-weight: 700; }
.font-status { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.control-deck { border-block: 1px solid var(--border); background: var(--surface-soft); }
.control-deck-heading, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.control-deck-heading { margin-bottom: 30px; }
.section-heading { margin-bottom: 30px; }
.section-intro { max-width: 64ch; margin: 4px 0 0; color: var(--muted); font-size: var(--text-secondary); }
.option-block { min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }
.option-block legend, .legend-like { margin: 0 0 12px; color: var(--text); font-size: 16px; font-weight: 700; }
.option-grid { display: grid; gap: 14px; }
.two-options { grid-template-columns: repeat(2, minmax(0,1fr)); }
.option-card, .theme-card { position: relative; display: flex; min-height: 118px; padding: 20px; border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); text-align: left; transition: border-color .15s ease, transform .15s ease, background-color .15s ease; }
.option-card { flex-direction: column; align-items: flex-start; justify-content: center; }
.option-card:hover, .theme-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.option-card.active, .theme-card.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.option-card.active::after, .theme-card.active::after { content: "✓"; position: absolute; top: 12px; right: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 15px; font-weight: 800; }
.option-card strong { margin: 7px 0 3px; font-size: 23px; }
.option-card > span:last-child, .theme-card small { color: var(--muted); font-size: 15px; }
.theme-card { align-items: center; gap: 18px; }
.theme-card > span:last-child { display: grid; }
.theme-card strong { font-size: 21px; }
.theme-preview { display: grid; grid-template-columns: repeat(2, 28px); gap: 4px; flex: 0 0 auto; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.theme-preview i { width: 28px; height: 28px; border-radius: 5px; }
.blue-preview i:nth-child(1) { background: #003466; }.blue-preview i:nth-child(2) { background: #006B8F; }.blue-preview i:nth-child(3) { background: #F4F7FA; border: 1px solid #D2DCE4; }.blue-preview i:nth-child(4) { background: #172431; }
.petroleum-preview i:nth-child(1) { background: #0B5D5B; }.petroleum-preview i:nth-child(2) { background: #007F7A; }.petroleum-preview i:nth-child(3) { background: #F3F8F7; border: 1px solid #CFDDD9; }.petroleum-preview i:nth-child(4) { background: #172928; }
.option-row { display: grid; grid-template-columns: 1fr 1.25fr .75fr; gap: 18px; }
.compact-options { margin-bottom: 0; }
.segmented-group { display: flex; min-height: var(--control-height); padding: 4px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); }
.segment { flex: 1; min-width: 74px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-weight: 700; }
.segment.active { background: var(--primary); color: var(--on-primary); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: 10px 18px; border: 1px solid transparent; border-radius: 9px; font-size: calc(17px * var(--font-scale)); font-weight: 600; text-decoration: none; }
.btn.primary { background: var(--primary); color: var(--on-primary); }.btn.primary:hover { background: var(--primary-hover); }
.btn.secondary { border-color: var(--primary); background: var(--surface); color: var(--primary); }.btn.secondary:hover { background: var(--surface-soft); }
.btn.ghost { border-color: var(--border-strong); background: transparent; color: var(--text); }
.btn.danger { background: var(--danger); color: #fff; } html[data-mode="dark"] .btn.danger { color: #24100f; }
.full-button { width: 100%; }
.standards-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; border-bottom: 1px solid var(--border); background: var(--border); }
.standards-strip span { padding: 18px 22px; background: var(--surface); color: var(--muted); font-size: 14px; }.standards-strip strong { display: block; color: var(--text); }
.type-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 22px; }
.specimen-card, .component-card, .form-demo, .audit-note { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-small); }
.sample-h1 { margin: 18px 0 8px; font-size: clamp(36px, 5vw, 60px); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; }
.sample-h2 { margin: 0 0 8px; font-size: clamp(27px, 3vw, 38px); font-weight: 700; line-height: 1.2; }
.sample-h3 { margin: 0 0 18px; font-size: 23px; font-weight: 600; }
.sample-body { max-width: 72ch; margin: 0 0 14px; font-size: var(--text-base); line-height: 1.6; }
.sample-muted { max-width: 72ch; margin: 0 0 14px; color: var(--muted); font-size: var(--text-secondary); line-height: 1.55; }
.text-link { color: var(--primary); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.character-set { margin: 10px 0; font-size: clamp(18px, 2vw, 24px); letter-spacing: .04em; word-break: break-all; }
.token-list { margin: 24px 0 0; }.token-list div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); }.token-list dt { color: var(--muted); }.token-list dd { margin: 0; font-weight: 600; text-align: right; }
.palette-grid { display: grid; grid-template-columns: repeat(6, minmax(120px,1fr)); gap: 12px; }
.swatch { min-height: 150px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-small); }.swatch span, .swatch strong { display: block; }.swatch span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }.swatch strong { margin-top: 48px; font-size: 15px; }
.brand-swatch { background: var(--primary); color: var(--on-primary); }.accent-swatch { background: var(--accent); color: var(--on-accent); }.surface-swatch { background: var(--surface); color: var(--text); }.background-swatch { background: var(--page-bg); color: var(--text); }.text-swatch { background: var(--text); color: var(--surface); }.border-swatch { background: var(--border-strong); color: #fff; } html[data-mode="dark"] .border-swatch { color: #07131D; }
.component-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.button-row, .badge-row { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.badge.info { background: var(--info-soft); color: var(--info); }.badge.success { background: var(--success-soft); color: var(--success); }.badge.warning { background: var(--warning-soft); color: var(--warning); }.badge.error { background: var(--danger-soft); color: var(--danger); }
.progress-block { margin-top: 26px; }.progress-block label { display: block; margin-bottom: 8px; font-weight: 600; } progress { width: 100%; height: 16px; accent-color: var(--primary); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }.field { display: grid; gap: 7px; }.full-field { grid-column: 1/-1; }.field label { font-size: 16px; font-weight: 600; }.field small { color: var(--muted); font-size: 14px; }
.field input, .field select, .field textarea { width: 100%; min-height: var(--control-height); padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); }.field textarea { min-height: 130px; resize: vertical; }.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-small); } table { width: 100%; min-width: 760px; border-collapse: collapse; } caption { padding: 16px 18px; color: var(--muted); text-align: left; font-size: 14px; } th, td { min-height: 52px; padding: 15px 18px; border-top: 1px solid var(--border); text-align: left; vertical-align: middle; } th { background: var(--surface-soft); font-size: 15px; font-weight: 700; }.table-action { min-height: 38px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); color: var(--primary); font-weight: 600; }
.state-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }.state-card { display: flex; gap: 14px; min-height: 150px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }.state-card > span { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; font-weight: 800; }.state-card h3 { margin: 4px 0 4px; font-size: 18px; }.state-card p { margin: 0; color: var(--muted); font-size: 15px; }.info-state > span { background: var(--info-soft); color: var(--info); }.success-state > span { background: var(--success-soft); color: var(--success); }.warning-state > span { background: var(--warning-soft); color: var(--warning); }.error-state > span { background: var(--danger-soft); color: var(--danger); }
.ergonomics-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }.ergonomics-grid article { padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: center; }.ergonomics-grid strong { display: block; color: var(--primary); font-size: 28px; line-height: 1.2; }.ergonomics-grid span { color: var(--muted); font-size: 14px; }.audit-note { margin-top: 24px; }.audit-note p { max-width: 78ch; color: var(--muted); }
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px clamp(20px,4vw,64px); border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 14px; }
@media (max-width: 1120px) { .page-shell { grid-template-columns: 210px minmax(0,1fr); }.hero { grid-template-columns: 1fr; min-height: auto; }.hero-panel { max-width: 720px; }.palette-grid { grid-template-columns: repeat(3, minmax(120px,1fr)); }.state-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.ergonomics-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 850px) { .topnav { display: none; }.menu-toggle { display: inline-grid; }.page-shell { display: block; }.section-rail { display: none; }.two-options, .type-grid, .component-grid, .option-row { grid-template-columns: 1fr; }.standards-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }.section-heading, .control-deck-heading { display: block; }.control-deck-heading .btn { margin-top: 18px; } }
@media (max-width: 560px) { .topbar { min-height: 70px; padding-inline: 16px; }.brand-subtitle { display: none; }.mobile-nav { top: 70px; }.section, .control-deck { padding: 42px 16px; }.hero { min-height: auto; }.hero-panel, .specimen-card, .component-card, .form-demo, .audit-note { padding: 21px; }.standards-strip, .palette-grid, .state-grid, .ergonomics-grid, .form-grid { grid-template-columns: 1fr; }.active-summary { grid-template-columns: 1fr 1fr; }.footer { display: grid; }.theme-card { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }


/* BEGIN PREVIEW6 INSTITUTIONAL BLUE COMBINATIONS V8 */

/*
 * TEMA 1 — AZUL INSTITUCIONAL + TITANIO
 * El azul permanece fijo. Cambian los neutros y superficies.
 */
html[data-palette="titanium"][data-mode="light"] {
  color-scheme: light;

  --page-bg: #F6F8FB;
  --surface: #FFFFFF;
  --surface-soft: #E9EEF4;
  --surface-strong: #DAE3EB;

  --text: #17212B;
  --muted: #4E5B66;

  --header-bg: #003466;
  --header-text: #FFFFFF;

  --primary: #003466;
  --primary-hover: #00264C;
  --on-primary: #FFFFFF;

  --accent: #405366;
  --accent-hover: #2F4050;
  --on-accent: #FFFFFF;

  --border: #D2DAE2;
  --border-strong: #6F7E8C;

  --focus: #F2B705;

  --shadow-soft: 0 14px 38px rgba(25, 49, 69, .09);
  --shadow-small: 0 5px 17px rgba(25, 49, 69, .08);
}

html[data-palette="titanium"][data-mode="dark"] {
  color-scheme: dark;

  --page-bg: #0E141A;
  --surface: #16202A;
  --surface-soft: #1E2B36;
  --surface-strong: #293946;

  --text: #F4F7FA;
  --muted: #BCC6CF;

  --header-bg: #002B55;
  --header-text: #FFFFFF;

  --primary: #78B9E8;
  --primary-hover: #9DCCEE;
  --on-primary: #0E141A;

  --accent: #AFC4D8;
  --accent-hover: #CAD8E4;
  --on-accent: #0E141A;

  --border: #31414F;
  --border-strong: #687A89;

  --focus: #FFD43B;

  --shadow-soft: 0 17px 44px rgba(0, 0, 0, .34);
  --shadow-small: 0 6px 19px rgba(0, 0, 0, .28);
}

/*
 * TEMA 2 — AZUL INSTITUCIONAL + OBSIDIANA
 * Negro y grafito dominantes; azul reservado para identidad y acciones.
 */
html[data-palette="obsidian"][data-mode="light"] {
  color-scheme: light;

  --page-bg: #F5F6F8;
  --surface: #FFFFFF;
  --surface-soft: #E9EBEF;
  --surface-strong: #DADDE2;

  --text: #15181C;
  --muted: #50565F;

  --header-bg: #111315;
  --header-text: #FFFFFF;

  --primary: #003466;
  --primary-hover: #00264C;
  --on-primary: #FFFFFF;

  --accent: #2E3640;
  --accent-hover: #1F252C;
  --on-accent: #FFFFFF;

  --border: #CED2D7;
  --border-strong: #6B737C;

  --focus: #F2B705;

  --shadow-soft: 0 15px 40px rgba(10, 13, 17, .11);
  --shadow-small: 0 5px 18px rgba(10, 13, 17, .10);
}

html[data-palette="obsidian"][data-mode="dark"] {
  color-scheme: dark;

  --page-bg: #090B0E;
  --surface: #11151A;
  --surface-soft: #191F26;
  --surface-strong: #232B34;

  --text: #F5F7FA;
  --muted: #B9C0C8;

  --header-bg: #000000;
  --header-text: #FFFFFF;

  --primary: #6FB8E8;
  --primary-hover: #94CBEE;
  --on-primary: #090B0E;

  --accent: #9AA6B2;
  --accent-hover: #B8C1CA;
  --on-accent: #090B0E;

  --border: #2C333B;
  --border-strong: #646E78;

  --focus: #FFD43B;

  --shadow-soft: 0 18px 46px rgba(0, 0, 0, .40);
  --shadow-small: 0 7px 20px rgba(0, 0, 0, .34);
}

/*
 * MUESTRAS DEL SELECTOR
 */
.theme-block .option-grid {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.titanium-preview i:nth-child(1) {
  background: #003466;
}

.titanium-preview i:nth-child(2) {
  background: #405366;
}

.titanium-preview i:nth-child(3) {
  background: #F6F8FB;
  border: 1px solid #D2DAE2;
}

.titanium-preview i:nth-child(4) {
  background: #17212B;
}

.obsidian-preview i:nth-child(1) {
  background: #003466;
}

.obsidian-preview i:nth-child(2) {
  background: #111315;
}

.obsidian-preview i:nth-child(3) {
  background: #F5F6F8;
  border: 1px solid #CED2D7;
}

.obsidian-preview i:nth-child(4) {
  background: #090B0E;
}

@media (max-width: 850px) {
  .theme-block .option-grid {
    grid-template-columns: 1fr;
  }
}

/* END PREVIEW6 INSTITUTIONAL BLUE COMBINATIONS V8 */

/* BEGIN PREVIEW6 GOLD YELLOW THEMES V12 */

/*
|--------------------------------------------------------------------------
| TEMA 1 — CLARO
|--------------------------------------------------------------------------
| Se conserva exactamente la combinación institucional y titanio.
*/

html[data-palette="titanium"][data-mode="light"] {
  color-scheme: light;

  --page-bg: #F6F8FB;
  --surface: #FFFFFF;
  --surface-soft: #E9EEF4;
  --surface-strong: #DAE3EB;

  --text: #17212B;
  --muted: #4E5B66;

  --header-bg: #003466;
  --header-text: #FFFFFF;

  --primary: #003466;
  --primary-hover: #00264C;
  --on-primary: #FFFFFF;

  --accent: #405366;
  --accent-hover: #2F4050;
  --on-accent: #FFFFFF;

  --border: #D2DAE2;
  --border-strong: #6F7E8C;

  --focus: #F2B705;

  --shadow-soft: 0 14px 38px rgba(25, 49, 69, .09);
  --shadow-small: 0 5px 17px rgba(25, 49, 69, .08);
}

/*
|--------------------------------------------------------------------------
| TEMA 1 — OSCURO
|--------------------------------------------------------------------------
| Grafito, negro y oro técnico.
| Se elimina completamente el azul claro.
*/

html[data-palette="titanium"][data-mode="dark"] {
  color-scheme: dark;

  --page-bg: #0B0E12;
  --surface: #151A20;
  --surface-soft: #202730;
  --surface-strong: #2A333E;

  --text: #F3F5F7;
  --muted: #BCC4CC;

  --header-bg: #080A0D;
  --header-text: #FFFFFF;

  --primary: #D6A63B;
  --primary-hover: #E4BA5B;
  --on-primary: #11151A;

  --accent: #AFC4D8;
  --accent-hover: #CAD8E4;
  --on-accent: #11151A;

  --border: #303841;
  --border-strong: #68737E;

  --focus: #FFD43B;

  --success: #72D6A4;
  --success-soft: #123828;

  --warning: #FFD27A;
  --warning-soft: #3C2D0E;

  --danger: #FF9C96;
  --danger-soft: #44201E;

  --info: #D8E1E8;
  --info-soft: #29323A;

  --shadow-soft: 0 17px 44px rgba(0, 0, 0, .36);
  --shadow-small: 0 6px 19px rgba(0, 0, 0, .30);
}

/*
|--------------------------------------------------------------------------
| TEMA 2 — CLARO
|--------------------------------------------------------------------------
| Blanco arquitectónico, negro y amarillo técnico.
| Sin azul y sin celeste.
*/

html[data-palette="obsidian"][data-mode="light"] {
  color-scheme: light;

  --page-bg: #F8F8F5;
  --surface: #FFFFFF;
  --surface-soft: #ECEDE9;
  --surface-strong: #DEE1DC;

  --text: #15181B;
  --muted: #505860;

  --header-bg: #0A0C0F;
  --header-text: #FFFFFF;

  --primary: #FFD400;
  --primary-hover: #E2BC00;
  --on-primary: #111315;

  /*
   * Acento oscuro de la familia amarilla.
   * Se usa en textos y enlaces para mantener contraste.
   */
  --accent: #7A6100;
  --accent-hover: #624D00;
  --on-accent: #FFFFFF;

  --border: #D5D8DC;
  --border-strong: #6C747D;

  --focus: #FFD400;

  --success: #146C43;
  --success-soft: #E6F5ED;

  --warning: #825500;
  --warning-soft: #FFF3D6;

  --danger: #A8241E;
  --danger-soft: #FCE9E7;

  --info: #3F4A54;
  --info-soft: #ECEFF1;

  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 6px;

  --shadow-soft: none;
  --shadow-small: none;
}

/*
|--------------------------------------------------------------------------
| TEMA 2 — OSCURO
|--------------------------------------------------------------------------
| Negro profundo, grafito y amarillo técnico.
| Sin celeste.
*/

html[data-palette="obsidian"][data-mode="dark"] {
  color-scheme: dark;

  --page-bg: #07090B;
  --surface: #11151A;
  --surface-soft: #1B2128;
  --surface-strong: #252D35;

  --text: #F6F7F8;
  --muted: #BDC5CD;

  --header-bg: #000000;
  --header-text: #FFFFFF;

  --primary: #FFE14A;
  --primary-hover: #FFEA78;
  --on-primary: #111315;

  --accent: #FFE14A;
  --accent-hover: #FFEA78;
  --on-accent: #111315;

  --border: #343B43;
  --border-strong: #727B85;

  --focus: #FFE14A;

  --success: #72D6A4;
  --success-soft: #123828;

  --warning: #FFD27A;
  --warning-soft: #3C2D0E;

  --danger: #FF9C96;
  --danger-soft: #44201E;

  --info: #DDE3E8;
  --info-soft: #262D34;

  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 6px;

  --shadow-soft: none;
  --shadow-small: none;
}

/*
|--------------------------------------------------------------------------
| Fondo y composición del Tema 2
|--------------------------------------------------------------------------
*/

html[data-palette="obsidian"] body {
  background-image: none;
  background-color: var(--page-bg);
}

/*
 * Composición clara:
 * blanco dominante, bloque negro y una franja amarilla limitada.
 */
html[data-palette="obsidian"][data-mode="light"] .hero {
  position: relative;

  background:
    linear-gradient(
      108deg,
      #FFFFFF 0%,
      #FFFFFF 72%,
      #111315 72%,
      #111315 100%
    );
}

html[data-palette="obsidian"][data-mode="light"] .hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 9px;
  height: 100%;
  background: #FFD400;
}

/*
 * Composición oscura:
 * negro dominante con bloque grafito y franja amarilla.
 */
html[data-palette="obsidian"][data-mode="dark"] .hero {
  position: relative;

  background:
    linear-gradient(
      108deg,
      #07090B 0%,
      #07090B 72%,
      #222810 72%,
      #222810 100%
    );
}

html[data-palette="obsidian"][data-mode="dark"] .hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 9px;
  height: 100%;
  background: #FFE14A;
}

html[data-palette="obsidian"][data-mode="light"] .control-deck {
  background: #FFFFFF;
}

html[data-palette="obsidian"][data-mode="dark"] .control-deck {
  background: #0B0E12;
}

/*
|--------------------------------------------------------------------------
| Geometría arquitectónica del Tema 2
|--------------------------------------------------------------------------
*/

html[data-palette="obsidian"] .hero-panel,
html[data-palette="obsidian"] .option-card,
html[data-palette="obsidian"] .theme-card,
html[data-palette="obsidian"] .specimen-card,
html[data-palette="obsidian"] .component-card,
html[data-palette="obsidian"] .form-demo,
html[data-palette="obsidian"] .audit-note,
html[data-palette="obsidian"] .table-wrap,
html[data-palette="obsidian"] .state-card {
  border-radius: 5px;
  box-shadow: none;
}

html[data-palette="obsidian"] .hero-panel,
html[data-palette="obsidian"] .specimen-card,
html[data-palette="obsidian"] .component-card,
html[data-palette="obsidian"] .form-demo,
html[data-palette="obsidian"] .audit-note {
  border-top: 4px solid var(--primary);
}

html[data-palette="obsidian"] .section-heading {
  position: relative;
  padding-bottom: 18px;
}

html[data-palette="obsidian"] .section-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(180px, 38%);
  height: 4px;
  background: var(--primary);
}

/*
 * El amarillo brillante no se usa como texto sobre blanco.
 */
html[data-palette="obsidian"][data-mode="light"] .text-link,
html[data-palette="obsidian"][data-mode="light"] .table-action,
html[data-palette="obsidian"][data-mode="light"] .ergonomics-grid strong,
html[data-palette="obsidian"][data-mode="light"] .section-rail a:hover {
  color: var(--accent);
}

/*
 * El borde activo utiliza el amarillo oscuro, con contraste suficiente.
 */
html[data-palette="obsidian"][data-mode="light"] .option-card.active,
html[data-palette="obsidian"][data-mode="light"] .theme-card.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

html[data-palette="obsidian"] .option-card.active::after,
html[data-palette="obsidian"] .theme-card.active::after {
  background: var(--primary);
  color: var(--on-primary);
}

/*
 * Barra superior con línea amarilla.
 */
html[data-palette="obsidian"] .topbar {
  border-bottom-color: var(--primary);
}

/*
|--------------------------------------------------------------------------
| Muestras del selector
|--------------------------------------------------------------------------
*/

.titanium-preview i:nth-child(1) {
  background: #003466;
}

.titanium-preview i:nth-child(2) {
  background: #D6A63B;
}

.titanium-preview i:nth-child(3) {
  background: #F6F8FB;
  border: 1px solid #D2DAE2;
}

.titanium-preview i:nth-child(4) {
  background: #0B0E12;
}

.obsidian-preview i:nth-child(1) {
  background: #FFD400;
}

.obsidian-preview i:nth-child(2) {
  background: #0A0C0F;
}

.obsidian-preview i:nth-child(3) {
  background: #F8F8F5;
  border: 1px solid #D5D8DC;
}

.obsidian-preview i:nth-child(4) {
  background: #07090B;
}

/* END PREVIEW6 GOLD YELLOW THEMES V12 */
/* BEGIN PREVIEW6 NAVAL BRONZE V13 */

/*
|--------------------------------------------------------------------------
| MODO CLARO
|--------------------------------------------------------------------------
| Blanco dominante.
| Azul naval para marca, cabecera y acciones.
| Bronce únicamente como detalle.
*/

html[data-palette="obsidian"][data-mode="light"] {
  color-scheme: light;

  --page-bg: #F5F7F9;
  --surface: #FFFFFF;
  --surface-soft: #EDF1F4;
  --surface-strong: #DDE5EB;

  --text: #17212B;
  --muted: #4D5C6B;

  --header-bg: #0F2C4D;
  --header-text: #FFFFFF;

  --primary: #0F2C4D;
  --primary-hover: #091F37;
  --on-primary: #FFFFFF;

  /*
   * Bronce oscuro para texto y enlaces sobre blanco.
   * Contraste superior a WCAG AA.
   */
  --accent: #7A5D1E;
  --accent-hover: #604814;
  --on-accent: #FFFFFF;

  /*
   * Bronce original de la referencia para elementos gráficos.
   */
  --brand-metal: #B08D3A;

  --border: #D2DAE3;
  --border-strong: #6C7B89;

  --focus: #B08D3A;

  --success: #146C43;
  --success-soft: #E6F5ED;

  --warning: #825500;
  --warning-soft: #FFF3D6;

  --danger: #A8241E;
  --danger-soft: #FCE9E7;

  --info: #1B3D6E;
  --info-soft: #E7EEF6;

  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;

  --shadow-soft: 0 16px 38px rgba(15, 44, 77, .11);
  --shadow-small: 0 5px 16px rgba(15, 44, 77, .09);
}

/*
|--------------------------------------------------------------------------
| MODO OSCURO
|--------------------------------------------------------------------------
| Azul naval profundo.
| Azul medio únicamente como superficie.
| Blanco para acciones principales.
| Bronce como acento restringido.
*/

html[data-palette="obsidian"][data-mode="dark"] {
  color-scheme: dark;

  --page-bg: #0B1624;
  --surface: #0F2C4D;
  --surface-soft: #173657;
  --surface-strong: #1B3D6E;

  --text: #FFFFFF;
  --muted: #C9D4E5;

  --header-bg: #07111D;
  --header-text: #FFFFFF;

  /*
   * Botones principales claros: evita llenar la interfaz de dorado.
   */
  --primary: #F1F3F5;
  --primary-hover: #FFFFFF;
  --on-primary: #0B1624;

  /*
   * Bronce claro para enlaces y detalles sobre azul naval.
   */
  --accent: #C3A34A;
  --accent-hover: #D2B45A;
  --on-accent: #11151A;

  --brand-metal: #B08D3A;

  --border: #294661;
  --border-strong: #667E94;

  --focus: #D2B45A;

  --success: #72D6A4;
  --success-soft: #123828;

  --warning: #FFD27A;
  --warning-soft: #3C2D0E;

  --danger: #FF9C96;
  --danger-soft: #44201E;

  --info: #DCE8F5;
  --info-soft: #173657;

  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;

  --shadow-soft: 0 18px 46px rgba(0, 0, 0, .34);
  --shadow-small: 0 7px 21px rgba(0, 0, 0, .28);
}

/*
|--------------------------------------------------------------------------
| Fondo y composición
|--------------------------------------------------------------------------
*/

html[data-palette="obsidian"] body {
  background-image: none;
  background-color: var(--page-bg);
}

/*
 * Claro: blanco dominante con bloque naval en el extremo derecho.
 */
html[data-palette="obsidian"][data-mode="light"] .hero {
  background:
    linear-gradient(
      108deg,
      #FFFFFF 0%,
      #FFFFFF 70%,
      #0F2C4D 70%,
      #0F2C4D 100%
    );
}

/*
 * Oscuro: naval profundo con bloque azul medio.
 */
html[data-palette="obsidian"][data-mode="dark"] .hero {
  background:
    linear-gradient(
      108deg,
      #0B1624 0%,
      #0B1624 70%,
      #1B3D6E 70%,
      #1B3D6E 100%
    );
}

/*
 * Línea de metal muy fina: no se usa como franja dominante.
 */
html[data-palette="obsidian"] .hero {
  position: relative;
}

html[data-palette="obsidian"] .hero::before {
  content: "";
  position: absolute;
  top: 36px;
  right: 0;
  width: min(420px, 42%);
  height: 5px;
  background: var(--brand-metal);
}

/*
|--------------------------------------------------------------------------
| Cabecera, controles y superficies
|--------------------------------------------------------------------------
*/

html[data-palette="obsidian"] .topbar {
  border-bottom-color: var(--brand-metal);
}

html[data-palette="obsidian"][data-mode="light"] .control-deck {
  background:
    linear-gradient(
      180deg,
      #EDF1F4 0%,
      #F8FAFB 100%
    );
}

html[data-palette="obsidian"][data-mode="dark"] .control-deck {
  background:
    linear-gradient(
      180deg,
      #173657 0%,
      #0B1624 100%
    );
}

/*
 * Tarjetas sobrias.
 */
html[data-palette="obsidian"] .hero-panel,
html[data-palette="obsidian"] .option-card,
html[data-palette="obsidian"] .theme-card,
html[data-palette="obsidian"] .specimen-card,
html[data-palette="obsidian"] .component-card,
html[data-palette="obsidian"] .form-demo,
html[data-palette="obsidian"] .audit-note,
html[data-palette="obsidian"] .table-wrap,
html[data-palette="obsidian"] .state-card {
  border-radius: 7px;
}

/*
 * Detalle bronce únicamente en elementos destacados.
 */
html[data-palette="obsidian"] .hero-panel,
html[data-palette="obsidian"] .specimen-card,
html[data-palette="obsidian"] .component-card,
html[data-palette="obsidian"] .form-demo,
html[data-palette="obsidian"] .audit-note {
  border-top: 3px solid var(--brand-metal);
}

html[data-palette="obsidian"] .section-heading {
  position: relative;
  padding-bottom: 18px;
}

html[data-palette="obsidian"] .section-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(160px, 34%);
  height: 3px;
  background: var(--brand-metal);
}

/*
 * Selección activa en bronce sin rellenar toda la tarjeta.
 */
html[data-palette="obsidian"] .option-card.active,
html[data-palette="obsidian"] .theme-card.active {
  border-color: var(--brand-metal);
  box-shadow: inset 0 0 0 1px var(--brand-metal);
}

html[data-palette="obsidian"] .option-card.active::after,
html[data-palette="obsidian"] .theme-card.active::after {
  background: var(--brand-metal);
  color: #11151A;
}

/*
 * Botones secundarios y enlaces.
 */
html[data-palette="obsidian"][data-mode="dark"] .btn.secondary {
  border-color: var(--brand-metal);
  background: transparent;
  color: #FFFFFF;
}

html[data-palette="obsidian"][data-mode="dark"] .btn.secondary:hover {
  background: rgba(176, 141, 58, .12);
}

html[data-palette="obsidian"][data-mode="dark"] .text-link,
html[data-palette="obsidian"][data-mode="dark"] .table-action,
html[data-palette="obsidian"][data-mode="dark"] .ergonomics-grid strong {
  color: var(--accent);
}

/*
|--------------------------------------------------------------------------
| Muestra dentro del selector
|--------------------------------------------------------------------------
*/

.obsidian-preview i:nth-child(1) {
  background: #0F2C4D;
}

.obsidian-preview i:nth-child(2) {
  background: #1B3D6E;
}

.obsidian-preview i:nth-child(3) {
  background: #F5F7F9;
  border: 1px solid #D2DAE3;
}

.obsidian-preview i:nth-child(4) {
  background: #B08D3A;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 850px) {
  html[data-palette="obsidian"][data-mode="light"] .hero {
    background:
      linear-gradient(
        180deg,
        #FFFFFF 0%,
        #FFFFFF 74%,
        #0F2C4D 74%,
        #0F2C4D 100%
      );
  }

  html[data-palette="obsidian"][data-mode="dark"] .hero {
    background:
      linear-gradient(
        180deg,
        #0B1624 0%,
        #0B1624 74%,
        #1B3D6E 74%,
        #1B3D6E 100%
      );
  }

  html[data-palette="obsidian"] .hero::before {
    top: auto;
    right: 0;
    bottom: 26%;
    width: 46%;
  }
}

/* END PREVIEW6 NAVAL BRONZE V13 */
/* BEGIN PREVIEW6 FINAL CANDIDATE V20 */

:root {
  --font-ui: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  --font-scale: 1;
  --text-base: calc(18px * var(--font-scale));
  --text-secondary: calc(16px * var(--font-scale));
  --control-height: 48px;
  --reading-width: 72ch;
  --brand-metal: transparent;
}

html[data-font="plex"] {
  --font-ui: "IBM Plex Sans", Arial, Helvetica, sans-serif;
}

html[data-font="roboto"] {
  --font-ui: "Roboto", Arial, Helvetica, sans-serif;
}

/*
|--------------------------------------------------------------------------
| TEMA 1 CLARO — AZUL INSTITUCIONAL + TITANIO
|--------------------------------------------------------------------------
*/

html[data-palette="titanium"][data-mode="light"] {
  color-scheme: light;

  --page-bg: #F6F8FB;
  --surface: #FFFFFF;
  --surface-soft: #E9EEF4;
  --surface-strong: #DAE3EB;

  --text: #17212B;
  --muted: #4E5B66;

  --header-bg: #003466;
  --header-text: #FFFFFF;

  --primary: #003466;
  --primary-hover: #00264C;
  --on-primary: #FFFFFF;

  --accent: #405366;
  --accent-hover: #2F4050;
  --on-accent: #FFFFFF;

  --border: #D2DAE2;
  --border-strong: #6F7E8C;
  --focus: #E8B629;

  --brand-metal: #003466;

  --shadow-soft: 0 14px 38px rgba(25, 49, 69, .09);
  --shadow-small: 0 5px 17px rgba(25, 49, 69, .08);
}

/*
|--------------------------------------------------------------------------
| TEMA 1 OSCURO — GRAFITO SOBRIO
|--------------------------------------------------------------------------
| El oro se utiliza únicamente como detalle, no como relleno dominante.
*/

html[data-palette="titanium"][data-mode="dark"] {
  color-scheme: dark;

  --page-bg: #0B0E12;
  --surface: #151A20;
  --surface-soft: #202730;
  --surface-strong: #2A333E;

  --text: #F4F6F8;
  --muted: #BCC4CC;

  --header-bg: #080A0D;
  --header-text: #FFFFFF;

  --primary: #E7EBEF;
  --primary-hover: #FFFFFF;
  --on-primary: #11151A;

  --accent: #D6A63B;
  --accent-hover: #E4BA5B;
  --on-accent: #11151A;

  --border: #303841;
  --border-strong: #68737E;
  --focus: #FFD43B;

  --brand-metal: #B08D3A;

  --success: #72D6A4;
  --success-soft: #123828;

  --warning: #FFB35C;
  --warning-soft: #3B290D;

  --danger: #FF9C96;
  --danger-soft: #44201E;

  --info: #D8E1E8;
  --info-soft: #29323A;

  --shadow-soft: 0 17px 44px rgba(0, 0, 0, .36);
  --shadow-small: 0 6px 19px rgba(0, 0, 0, .30);
}

/*
|--------------------------------------------------------------------------
| TEMA 2 CLARO — BLANCO, AZUL NAVAL Y BRONCE
|--------------------------------------------------------------------------
*/

html[data-palette="obsidian"][data-mode="light"] {
  color-scheme: light;

  --page-bg: #F5F7F9;
  --surface: #FFFFFF;
  --surface-soft: #EDF1F4;
  --surface-strong: #DDE5EB;

  --text: #17212B;
  --muted: #4D5C6B;

  --header-bg: #0F2C4D;
  --header-text: #FFFFFF;

  --primary: #0F2C4D;
  --primary-hover: #091F37;
  --on-primary: #FFFFFF;

  --accent: #7A5D1E;
  --accent-hover: #604814;
  --on-accent: #FFFFFF;

  --border: #D2DAE3;
  --border-strong: #6C7B89;
  --focus: #B08D3A;

  --brand-metal: #B08D3A;

  --shadow-soft: 0 16px 38px rgba(15, 44, 77, .10);
  --shadow-small: 0 5px 16px rgba(15, 44, 77, .08);
}

/*
|--------------------------------------------------------------------------
| TEMA 2 OSCURO — AZUL NAVAL PROFUNDO Y BRONCE RESTRINGIDO
|--------------------------------------------------------------------------
*/

html[data-palette="obsidian"][data-mode="dark"] {
  color-scheme: dark;

  --page-bg: #0B1624;
  --surface: #0F2C4D;
  --surface-soft: #173657;
  --surface-strong: #1B3D6E;

  --text: #FFFFFF;
  --muted: #C9D4E5;

  --header-bg: #07111D;
  --header-text: #FFFFFF;

  --primary: #F1F3F5;
  --primary-hover: #FFFFFF;
  --on-primary: #0B1624;

  --accent: #C8A952;
  --accent-hover: #D8BC69;
  --on-accent: #11151A;

  --border: #294661;
  --border-strong: #667E94;
  --focus: #D8BC69;

  --brand-metal: #B08D3A;

  --success: #72D6A4;
  --success-soft: #123828;

  --warning: #FFB35C;
  --warning-soft: #3B290D;

  --danger: #FF9C96;
  --danger-soft: #44201E;

  --info: #DCE8F5;
  --info-soft: #173657;

  --shadow-soft: 0 18px 46px rgba(0, 0, 0, .34);
  --shadow-small: 0 7px 21px rgba(0, 0, 0, .28);
}

/*
|--------------------------------------------------------------------------
| Ergonomía y legibilidad
|--------------------------------------------------------------------------
*/

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.60;
}

p,
.sample-body,
.sample-muted,
.section-intro,
.lead,
.audit-note p {
  max-width: var(--reading-width);
}

button,
input,
select,
textarea {
  min-height: var(--control-height);
}

.option-row {
  grid-template-columns: 1fr 1.25fr;
}

/*
 * Se elimina el control experimental de densidad de la interfaz finalista.
 */
.option-row > .option-block:last-child {
  display: none;
}

/*
|--------------------------------------------------------------------------
| Uso restringido del oro y el bronce
|--------------------------------------------------------------------------
*/

html[data-mode="dark"] .topbar,
html[data-palette="obsidian"] .topbar {
  border-bottom-color: var(--brand-metal);
}

html[data-mode="dark"] .section-heading,
html[data-palette="obsidian"] .section-heading {
  position: relative;
  padding-bottom: 18px;
}

html[data-mode="dark"] .section-heading::after,
html[data-palette="obsidian"] .section-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(150px, 32%);
  height: 3px;
  background: var(--brand-metal);
}

/*
 * El metal no rellena las acciones principales.
 */
html[data-mode="dark"] .btn.primary {
  background: var(--primary);
  color: var(--on-primary);
}

html[data-mode="dark"] .option-card.active,
html[data-mode="dark"] .theme-card.active,
html[data-palette="obsidian"] .option-card.active,
html[data-palette="obsidian"] .theme-card.active {
  border-color: var(--brand-metal);
  box-shadow: inset 0 0 0 1px var(--brand-metal);
}

html[data-mode="dark"] .option-card.active::after,
html[data-mode="dark"] .theme-card.active::after,
html[data-palette="obsidian"] .option-card.active::after,
html[data-palette="obsidian"] .theme-card.active::after {
  background: var(--brand-metal);
  color: #11151A;
}

/*
|--------------------------------------------------------------------------
| Diferenciación visual del Tema 2
|--------------------------------------------------------------------------
*/

html[data-palette="obsidian"][data-mode="light"] .hero {
  background:
    linear-gradient(
      108deg,
      #FFFFFF 0%,
      #FFFFFF 72%,
      #0F2C4D 72%,
      #0F2C4D 100%
    );
}

html[data-palette="obsidian"][data-mode="dark"] .hero {
  background:
    linear-gradient(
      108deg,
      #0B1624 0%,
      #0B1624 72%,
      #1B3D6E 72%,
      #1B3D6E 100%
    );
}

html[data-palette="obsidian"] .hero {
  position: relative;
}

html[data-palette="obsidian"] .hero::before {
  content: "";
  position: absolute;
  top: 36px;
  right: 0;
  width: min(380px, 36%);
  height: 4px;
  background: var(--brand-metal);
}

html[data-palette="obsidian"] .hero-panel,
html[data-palette="obsidian"] .specimen-card,
html[data-palette="obsidian"] .component-card,
html[data-palette="obsidian"] .form-demo,
html[data-palette="obsidian"] .audit-note {
  border-top: 3px solid var(--brand-metal);
}

/*
|--------------------------------------------------------------------------
| Muestras del selector
|--------------------------------------------------------------------------
*/

.titanium-preview i:nth-child(1) {
  background: #003466;
}

.titanium-preview i:nth-child(2) {
  background: #405366;
}

.titanium-preview i:nth-child(3) {
  background: #F6F8FB;
  border: 1px solid #D2DAE2;
}

.titanium-preview i:nth-child(4) {
  background: #0B0E12;
}

.obsidian-preview i:nth-child(1) {
  background: #0F2C4D;
}

.obsidian-preview i:nth-child(2) {
  background: #1B3D6E;
}

.obsidian-preview i:nth-child(3) {
  background: #F5F7F9;
  border: 1px solid #D2DAE3;
}

.obsidian-preview i:nth-child(4) {
  background: #B08D3A;
}

/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 850px) {
  html[data-palette="obsidian"][data-mode="light"] .hero {
    background:
      linear-gradient(
        180deg,
        #FFFFFF 0%,
        #FFFFFF 78%,
        #0F2C4D 78%,
        #0F2C4D 100%
      );
  }

  html[data-palette="obsidian"][data-mode="dark"] .hero {
    background:
      linear-gradient(
        180deg,
        #0B1624 0%,
        #0B1624 78%,
        #1B3D6E 78%,
        #1B3D6E 100%
      );
  }

  .option-row {
    grid-template-columns: 1fr;
  }
}

/* END PREVIEW6 FINAL CANDIDATE V20 */
/* BEGIN PREVIEW6 PLATINUM DARK V21 */

html[data-palette="obsidian"][data-mode="dark"] {
  color-scheme: dark;

  --page-bg: #08111C;
  --surface: #0F2C4D;
  --surface-soft: #183B5E;
  --surface-strong: #234766;

  --text: #F7F9FB;
  --muted: #C5CED7;

  --header-bg: #07111D;
  --header-text: #FFFFFF;

  /*
   * Acción principal neutra.
   */
  --primary: #F1F4F7;
  --primary-hover: #FFFFFF;
  --on-primary: #08111C;

  /*
   * Platino técnico: sustituye completamente al bronce en modo oscuro.
   */
  --accent: #B7C4D0;
  --accent-hover: #D7E0E8;
  --on-accent: #0B1624;

  --brand-metal: #B7C4D0;

  --border: #39546E;
  --border-strong: #687B8E;

  --focus: #E8EEF3;

  --success: #72D6A4;
  --success-soft: #123828;

  --warning: #FFB35C;
  --warning-soft: #3B290D;

  --danger: #FF9C96;
  --danger-soft: #44201E;

  --info: #D9E3EC;
  --info-soft: #183B5E;

  --shadow-soft: 0 18px 46px rgba(0, 0, 0, .35);
  --shadow-small: 0 7px 21px rgba(0, 0, 0, .29);
}

/*
 * Fondo y bloque lateral del hero.
 */
html[data-palette="obsidian"][data-mode="dark"] .hero {
  background:
    linear-gradient(
      108deg,
      #08111C 0%,
      #08111C 72%,
      #183B5E 72%,
      #183B5E 100%
    );
}

/*
 * Zona de configuración coherente con el nuevo modo oscuro.
 */
html[data-palette="obsidian"][data-mode="dark"] .control-deck {
  background:
    linear-gradient(
      180deg,
      #183B5E 0%,
      #08111C 100%
    );
}

/*
 * El platino se limita a líneas, selección, iconos y detalles.
 */
html[data-palette="obsidian"][data-mode="dark"] .topbar {
  border-bottom-color: var(--brand-metal);
}

html[data-palette="obsidian"][data-mode="dark"]
:is(.option-card, .theme-card).active {
  border-color: var(--brand-metal);
  box-shadow: inset 0 0 0 1px var(--brand-metal);
}

html[data-palette="obsidian"][data-mode="dark"]
:is(.option-card, .theme-card).active::after {
  background: var(--brand-metal);
  color: #08111C;
}

html[data-palette="obsidian"][data-mode="dark"]
.section-heading::after {
  background: var(--brand-metal);
}

html[data-palette="obsidian"][data-mode="dark"]
:is(.hero-panel, .specimen-card, .component-card, .form-demo, .audit-note) {
  border-top-color: var(--brand-metal);
}

html[data-palette="obsidian"][data-mode="dark"]
:is(.text-link, .table-action, .ergonomics-grid strong) {
  color: var(--accent);
}

/*
 * Muestra del Tema 2:
 * naval, azul medio, bronce del modo claro y platino del modo oscuro.
 */
.obsidian-preview i:nth-child(1) {
  background: #0F2C4D;
}

.obsidian-preview i:nth-child(2) {
  background: #183B5E;
}

.obsidian-preview i:nth-child(3) {
  background: #B08D3A;
}

.obsidian-preview i:nth-child(4) {
  background: #B7C4D0;
}

/*
 * Adaptación móvil del hero.
 */
@media (max-width: 850px) {
  html[data-palette="obsidian"][data-mode="dark"] .hero {
    background:
      linear-gradient(
        180deg,
        #08111C 0%,
        #08111C 78%,
        #183B5E 78%,
        #183B5E 100%
      );
  }
}

/* END PREVIEW6 PLATINUM DARK V21 */