/* ==========================================================================
   TALLER ATLAS — Modo claro (opcional)
   Se activa con el interruptor de la barra superior (html[data-mode="light"]). Paleta del tablero
   ATLAS en claro: blanco y azul marino, con el dorado de la marca oscurecido para que se lea.
   El modo oscuro (el del diseño Stitch) no depende de este archivo.
   ========================================================================== */
:root[data-mode="light"] {
  --bg: #f2f5f9;
  --surface: #ffffff;
  --card: #ffffff;
  --card-2: #f4f7fb;
  --border: #d9e1ea;
  --border-2: #c8d3df;
  --border-subtle: #e6ecf2;
  --text: #1f2d3d;
  --muted: #4a5a6b;
  --dim: #5f6f80;            /* contraste ≥ 4,5:1 sobre fondo y tarjetas (WCAG AA) */
  --cyan: #1b5e9e;           /* el acento cian del modo oscuro pasa a azul ATLAS */
  --cyan-soft: rgba(27, 94, 158, .1);
  --cyan-line: rgba(27, 94, 158, .35);
  --gold: #8a6424;
  --gold-soft: rgba(138, 100, 36, .1);
  --danger: #b42d2d;
  --danger-soft: rgba(180, 45, 45, .07);
  --ok: #0f7a4a;
  --shadow-lift: 0 12px 32px rgba(15, 58, 104, .12);
  --knob: #0f3a68;
  --on-knob: #ffffff;
  --map-bg: #e9eef4;
  --map-line: #1b5e9e;
  --map-point: #a8802f;
  --map-point-ring: #ffffff;
  --map-ref: #a8802f;
  color-scheme: light;
}

/* ---------- Base y barra superior ---------- */
:root[data-mode="light"] body::before {
  background:
    radial-gradient(60% 40% at 50% -6%, rgba(27, 94, 158, .07), transparent 70%),
    radial-gradient(40% 30% at 92% 4%, rgba(138, 100, 36, .05), transparent 70%);
}
:root[data-mode="light"] ::selection { background: rgba(27, 94, 158, .18); color: var(--text); }
:root[data-mode="light"] .topbar { background: rgba(255, 255, 255, .88); border-bottom-color: var(--border); }
:root[data-mode="light"] .brand__atlas { color: #0f3a68; }
:root[data-mode="light"] .brand__sep { color: rgba(74, 90, 107, .45); }
:root[data-mode="light"] .session-btn { background: #fff; }
:root[data-mode="light"] .crumbs i { color: #9fb0c2; }

/* ---------- Portada ---------- */
:root[data-mode="light"] .hero__title { color: #0f3a68; }
:root[data-mode="light"] .hero__title-a { background-image: linear-gradient(180deg, #1d5592 0%, #0f3a68 60%, #0b2c52 100%); }
:root[data-mode="light"] .hero__title-b { background-image: linear-gradient(180deg, #c49a48 0%, #9c7430 55%, #7a5a22 100%); }
:root[data-mode="light"] .spec-card { border-color: var(--border); box-shadow: 0 1px 2px rgba(15, 58, 104, .05), 0 8px 24px rgba(15, 58, 104, .07); }
:root[data-mode="light"] .spec-card:hover, :root[data-mode="light"] .spec-card:focus-visible { border-color: rgba(27, 94, 158, .42); box-shadow: 0 12px 32px rgba(15, 58, 104, .14); }
:root[data-mode="light"] .spec-card__img { filter: none; }
:root[data-mode="light"] .spec-card__img--oscuro { display: none; }
:root[data-mode="light"] .spec-card__img--claro { display: block; }
:root[data-mode="light"] .spec-card:hover .spec-card__img { filter: saturate(1.05) brightness(1.02); }
:root[data-mode="light"] .spec-card__shade {
  background:
    linear-gradient(to top, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .6) 32%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(to right, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .3) 44%, transparent 72%);
}
:root[data-mode="light"] .spec-card:hover .spec-card__title { color: #0f3a68; }
:root[data-mode="light"] .spec-card__count { background: rgba(255, 255, 255, .82); border-color: var(--border); }

/* ---------- Catálogo ---------- */
:root[data-mode="light"] .search input { border-color: var(--border); }
:root[data-mode="light"] .search input:focus { border-color: rgba(27, 94, 158, .45); box-shadow: 0 0 0 3px rgba(27, 94, 158, .1); }
:root[data-mode="light"] .search kbd { border-color: var(--border); background: var(--card-2); }
:root[data-mode="light"] .filters { border-bottom-color: var(--border); }
:root[data-mode="light"] .pill[aria-selected="true"] { background: rgba(27, 94, 158, .1); border-color: rgba(27, 94, 158, .3); }
:root[data-mode="light"] .tool-card { border-color: var(--border); box-shadow: 0 1px 2px rgba(15, 58, 104, .04); }
:root[data-mode="light"] .tool-card:hover, :root[data-mode="light"] .tool-card:focus-visible { border-color: rgba(27, 94, 158, .3); }
:root[data-mode="light"] .tool-card__icon { border-color: var(--border); background: var(--card-2); color: var(--cyan); }
:root[data-mode="light"] .tool-card:hover .tool-card__icon { border-color: rgba(27, 94, 158, .3); }

/* ---------- Botones y campos ---------- */
:root[data-mode="light"] .btn { background: #fff; }
:root[data-mode="light"] .btn:hover:not(:disabled) { color: #0f3a68; }
:root[data-mode="light"] .btn--primary { background: #0f3a68; border-color: #0f3a68; color: #fff; }
:root[data-mode="light"] .btn--primary:hover:not(:disabled) { background: #1b5e9e; border-color: #1b5e9e; color: #fff; box-shadow: 0 0 0 4px rgba(27, 94, 158, .12), 0 10px 26px rgba(15, 58, 104, .2); }
:root[data-mode="light"] .btn--gold { background: transparent; border-color: rgba(138, 100, 36, .5); }
:root[data-mode="light"] .btn--gold:hover:not(:disabled) { color: #6f5020; }
:root[data-mode="light"] .btn--ghost { background: transparent; }
:root[data-mode="light"] .btn--danger:hover:not(:disabled) { color: var(--danger); border-color: rgba(180, 45, 45, .4); }
:root[data-mode="light"] .input, :root[data-mode="light"] input[type=color] { border-color: var(--border-2); }
:root[data-mode="light"] .input:focus { border-color: rgba(27, 94, 158, .6); box-shadow: 0 0 0 3px rgba(27, 94, 158, .12); }
:root[data-mode="light"] select.input option { background: #fff; }
:root[data-mode="light"] .seg { background: #eef3f8; }
:root[data-mode="light"] .seg button[aria-pressed="true"] { background: #fff; color: var(--cyan); box-shadow: 0 1px 3px rgba(15, 58, 104, .12); }
:root[data-mode="light"] .check input { border-color: rgba(74, 90, 107, .45); }
:root[data-mode="light"] .check input:checked::after { border-color: #fff; }
:root[data-mode="light"] .check--radio input:checked::after { background: #fff; }
:root[data-mode="light"] input[type=range]::-webkit-slider-thumb { background: #fff; box-shadow: 0 0 0 4px rgba(27, 94, 158, .12); }

/* ---------- Carga, listas y tarjetas de documento ---------- */
:root[data-mode="light"] .dropzone { border-color: #b9c7d6; background: rgba(255, 255, 255, .6); }
:root[data-mode="light"] .dropzone:hover, :root[data-mode="light"] .dropzone:focus-visible { border-color: rgba(27, 94, 158, .5); background: #fff; }
:root[data-mode="light"] .dropzone.is-over { background: rgba(27, 94, 158, .05); }
:root[data-mode="light"] .statusbar__dot { box-shadow: none; }
:root[data-mode="light"] .doc-card:hover { border-color: rgba(27, 94, 158, .35); }
:root[data-mode="light"] .doc-card.is-error, :root[data-mode="light"] .file-row.is-error { border-color: rgba(180, 45, 45, .4); }
:root[data-mode="light"] .doc-card.is-locked { border-color: rgba(138, 100, 36, .45); }
:root[data-mode="light"] .doc-card.sortable-chosen { box-shadow: 0 0 0 2px rgba(27, 94, 158, .25), var(--shadow-lift); }
:root[data-mode="light"] .doc-card__preview { border-color: var(--border); }
:root[data-mode="light"] .add-card { background: rgba(255, 255, 255, .5); }
:root[data-mode="light"] .add-card:hover { border-color: rgba(27, 94, 158, .5); background: #fff; }
:root[data-mode="light"] .tag--cyan { border-color: rgba(27, 94, 158, .35); background: rgba(27, 94, 158, .07); }
:root[data-mode="light"] .tag--gold { border-color: rgba(138, 100, 36, .4); }
:root[data-mode="light"] .tag--danger { border-color: rgba(180, 45, 45, .35); }
:root[data-mode="light"] .tag--ok { border-color: rgba(15, 122, 74, .35); background: rgba(15, 122, 74, .07); }

/* ---------- Rejilla de páginas y visor ---------- */
:root[data-mode="light"] .pg.is-sel { background: #e8f0f9; }
:root[data-mode="light"] .pg__thumb canvas, :root[data-mode="light"] .pg__thumb img { box-shadow: 0 2px 10px rgba(15, 58, 104, .18); }
:root[data-mode="light"] .pg__thumb .ph { background: linear-gradient(110deg, #e6ecf3 30%, #f3f6fa 50%, #e6ecf3 70%); background-size: 200% 100%; }
:root[data-mode="light"] .pg__check { border-color: rgba(74, 90, 107, .5); background: rgba(255, 255, 255, .92); color: #fff; }
:root[data-mode="light"] .pg.is-sel .pg__check { background: var(--cyan); border-color: var(--cyan); }
:root[data-mode="light"] .pg__actions .icon-btn { background: rgba(255, 255, 255, .95); }
:root[data-mode="light"] .viewer { background: #e9eef4; }
:root[data-mode="light"] .viewer__stage { background: repeating-conic-gradient(#e1e8f0 0% 25%, #edf1f6 0% 50%) 50% / 22px 22px; }
:root[data-mode="light"] .viewer__page { box-shadow: 0 10px 34px rgba(15, 58, 104, .22); }
:root[data-mode="light"] .crop-stage { background: #e9eef4; }
:root[data-mode="light"] .cropper-view-box { outline-color: rgba(27, 94, 158, .85) !important; }
:root[data-mode="light"] .cropper-modal { background: #0f3a68 !important; opacity: .45 !important; }

/* ---------- Progreso, avisos y resultado ---------- */
:root[data-mode="light"] .progress { background: var(--card-2); }
:root[data-mode="light"] .progress__bar i { background: linear-gradient(90deg, #1b5e9e, #4a8bc4); box-shadow: none; }
:root[data-mode="light"] .notice { background: #fff; }
:root[data-mode="light"] .notice--warn { border-color: rgba(138, 100, 36, .35); background: rgba(138, 100, 36, .07); }
:root[data-mode="light"] .notice--error { border-color: rgba(180, 45, 45, .3); background: var(--danger-soft); }
:root[data-mode="light"] .notice--ok { border-color: rgba(15, 122, 74, .3); background: rgba(15, 122, 74, .06); }
:root[data-mode="light"] .result__seal { border-color: rgba(138, 100, 36, .45); box-shadow: none; }
:root[data-mode="light"] .chip:hover { background: rgba(27, 94, 158, .06); }
:root[data-mode="light"] .chip[aria-pressed="true"] { background: rgba(27, 94, 158, .1); }
:root[data-mode="light"] .compare div, :root[data-mode="light"] .list-plain li { background: var(--card-2); }
:root[data-mode="light"] .tabs button[aria-selected="true"] { background: rgba(27, 94, 158, .1); }

/* ---------- Tablas, texto y mapa ---------- */
:root[data-mode="light"] table.data th { background: #eef3f8; }
:root[data-mode="light"] table.data tr:nth-child(even) td { background: #f7f9fc; }
:root[data-mode="light"] .textview { color: #2c3e50; }
:root[data-mode="light"] .diff-del { background: rgba(180, 45, 45, .1); color: #b42d2d; text-decoration-color: rgba(180, 45, 45, .5); }
:root[data-mode="light"] .diff-ins { background: rgba(27, 94, 158, .12); color: #0f3a68; }
:root[data-mode="light"] .map__bar .btn { background: rgba(255, 255, 255, .92); }
:root[data-mode="light"] .map .leaflet-control-zoom a { background: rgba(255, 255, 255, .95) !important; }
:root[data-mode="light"] .map .leaflet-control-attribution { background: rgba(255, 255, 255, .85) !important; }
:root[data-mode="light"] .map .leaflet-control-scale-line { background: rgba(255, 255, 255, .8); }
:root[data-mode="light"] .map .leaflet-popup-content-wrapper, :root[data-mode="light"] .map .leaflet-popup-tip { background: #fff; }

/* ---------- Avisos flotantes y ventanas ---------- */
:root[data-mode="light"] .toast { background: rgba(255, 255, 255, .98); }
:root[data-mode="light"] .modal-back { background: rgba(15, 58, 104, .4); }
:root[data-mode="light"] .modal { box-shadow: 0 16px 48px rgba(15, 58, 104, .25); }
