/* 279studio — modo claro (tema Hueso del sistema de diseño, 00_empresa/sistema-de-diseno/).
   Solo actúa con <html data-theme="hueso">, que pone js/tema.js (preferencia del dispositivo o
   elección del visitante). El modo oscuro no cambia: este archivo no toca ninguna regla sin ese atributo.
   Se carga el último en todas las páginas. */

/* 1. Las variables de la web pasan a su papel en claro: el negro es el fondo, el hueso es la tinta. */
:root[data-theme="hueso"] {
  color-scheme: light;
  --negro: #f4f2ed;            /* fondo continuo (hueso) */
  --gris-osc: #fbfaf7;         /* superficies: modales, desplegables, secciones (papel) */
  --hueso: #141312;            /* titulares y texto fuerte (tinta) */
  --gris-text: #141312;        /* texto de lectura (tinta, 16,6:1) */
  --acento: #8c8478;           /* decorativo: barra de scroll, detalles */
  --acento-suave: #5f594f;     /* texto secundario (6,2:1) */
  --acento-vivo: #7a5212;      /* ámbar de texto: enlaces, antetítulos, énfasis, foco (6,2:1) */
  --acento-vivo-rgb: 122, 82, 18;
  --linea: rgba(20, 19, 18, 0.14);
  --linea-fuerte: rgba(20, 19, 18, 0.42);
  /* Colores de plan: los mismos tonos, más oscuros para leerse sobre hueso y sobre sus tarjetas tintadas (4,6:1 o más) */
  --m-arena: #7b642f;
  --m-mar: #3a705c;
  --m-oro: #7a5212;
  --m-azul: #4267a2;
  /* Propios del modo claro */
  --ambar-relleno: #c9974a;    /* el ámbar de marca se mantiene en los rellenos de botón */
  --sobre-ambar: #0a0a0a;
  --error-claro: #a33d2b;
  --velo: rgba(20, 19, 18, 0.03);
}

/* 2. Botones: relleno ámbar de marca con texto negro; en hover, tinta con texto hueso (como en el sistema). */
[data-theme="hueso"] .btn-primary { background: var(--ambar-relleno); color: var(--sobre-ambar); }
[data-theme="hueso"] .btn-primary:hover,
[data-theme="hueso"] .btn-primary:focus-visible { background: #141312; color: #f4f2ed; }
[data-theme="hueso"] .btn-outline::before { background: var(--ambar-relleno); }
[data-theme="hueso"] .btn-outline:hover,
[data-theme="hueso"] .btn-outline:focus-visible { color: var(--sobre-ambar); }
[data-theme="hueso"] .extras-list button:hover,
[data-theme="hueso"] .extras-list button:focus-visible,
[data-theme="hueso"] .mini-budget .sim-choice[aria-pressed="true"] { background: var(--ambar-relleno); color: var(--sobre-ambar); }
[data-theme="hueso"] .btn-loud:focus-visible { box-shadow: 0 0 0 3px #f4f2ed, 0 0 0 6px #7a5212; }
[data-theme="hueso"] ::selection { background: var(--ambar-relleno); color: var(--sobre-ambar); }
/* Rellenos con el color del plan: en claro el plan es oscuro, así que el texto va en hueso */
[data-theme="hueso"] .mb-tab.is-on,
[data-theme="hueso"] .pack-card--lg .pack-cta .btn-outline:hover,
[data-theme="hueso"] .pack-card--lg .pack-cta .btn-outline:focus-visible { color: #f4f2ed; }

/* 3. Cabecera, menú en píldora y barras fijas: translúcidas sobre hueso */
[data-theme="hueso"] .site-header.is-shrunk { background: rgba(244, 242, 237, 0.78); }
[data-theme="hueso"] .nav-pill,
[data-theme="hueso"] .nav-pill::before { background: rgba(251, 250, 247, 0.8); }
[data-theme="hueso"] .navbar.is-compact .nav-pill,
[data-theme="hueso"] .navbar.is-compact .nav-pill::before { background: rgba(251, 250, 247, 0.94); }
[data-theme="hueso"] .nav-links a:hover,
[data-theme="hueso"] .nav-links a:focus-visible,
[data-theme="hueso"] .modal-close:hover,
[data-theme="hueso"] .modal-close:focus-visible { background: rgba(20, 19, 18, 0.06); }
[data-theme="hueso"] .menu-bar { background: rgba(244, 242, 237, 0.96); }
[data-theme="hueso"] .q-nav { background: rgba(244, 242, 237, 0.96); }
[data-theme="hueso"] .mb-side { background: var(--negro); }

/* 4. Velos y fondos sutiles de tarjetas (en oscuro, hueso al 2-3 %; en claro, tinta al 3 %) */
[data-theme="hueso"] .tilt-card-inner,
[data-theme="hueso"] .catalog-item,
[data-theme="hueso"] .mini-budget,
[data-theme="hueso"] .demo-slide,
[data-theme="hueso"] .svc,
[data-theme="hueso"] .sim-box { background: linear-gradient(160deg, var(--velo), transparent); }
[data-theme="hueso"] .blog-card,
[data-theme="hueso"] .post-card-link,
[data-theme="hueso"] .q-card,
[data-theme="hueso"] .cmp,
[data-theme="hueso"] .article-formula,
[data-theme="hueso"] .article-body blockquote { background-color: var(--velo); }
[data-theme="hueso"] .q-card.is-on { background: rgba(var(--acento-vivo-rgb), 0.1); }
[data-theme="hueso"] .mb-card { background: linear-gradient(180deg, color-mix(in srgb, var(--t) 8%, transparent), transparent 55%); }
[data-theme="hueso"] .mb-card.is-on { background: rgba(var(--acento-vivo-rgb), 0.08); }
[data-theme="hueso"] .quiz-cta { background: radial-gradient(90% 120% at 100% 50%, rgba(201, 151, 74, 0.16), transparent 60%), linear-gradient(160deg, var(--velo), transparent); }
[data-theme="hueso"] .pack-info { background: linear-gradient(180deg, color-mix(in srgb, var(--pack) 12%, transparent), transparent 46%), var(--velo); }
[data-theme="hueso"] .pack-card--lg { background: linear-gradient(180deg, color-mix(in srgb, var(--pack) 12%, transparent), transparent 44%), var(--velo); }
[data-theme="hueso"] .founder-photo { background: repeating-linear-gradient(135deg, rgba(20, 19, 18, 0.04) 0 2px, transparent 2px 9px), linear-gradient(160deg, var(--gris-osc), var(--negro)); }
[data-theme="hueso"] .article-body code { background: rgba(20, 19, 18, 0.07); }

/* 5. Modales y desplegables */
[data-theme="hueso"] .modal-overlay { background: rgba(20, 19, 18, 0.42); }
[data-theme="hueso"] .modal-dialog { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, #fbfaf7), #f4f2ed 55%); box-shadow: -28px 0 70px rgba(20, 19, 18, 0.18); }
@media (max-width: 640px) { [data-theme="hueso"] .modal-dialog { box-shadow: 0 -20px 60px rgba(20, 19, 18, 0.18); } }
[data-theme="hueso"] .select-list { background: #fbfaf7; border-color: #d6d0c3; box-shadow: 0 24px 60px rgba(20, 19, 18, 0.16); }

/* 6. Errores de formulario */
[data-theme="hueso"] .form-status[data-state="error"],
[data-theme="hueso"] .field[data-err]::after { color: var(--error-claro); }
[data-theme="hueso"] .field input[aria-invalid="true"],
[data-theme="hueso"] .field textarea[aria-invalid="true"] { border-color: var(--error-claro); }
[data-theme="hueso"] .field-select .select-trigger[aria-invalid="true"] { border-bottom-color: var(--error-claro); }
[data-theme="hueso"] .field-check input[aria-invalid="true"] { outline-color: var(--error-claro); }

/* 7. Detalles gráficos */
[data-theme="hueso"] #starfield { background: radial-gradient(ellipse at 50% 0%, rgba(201, 151, 74, 0.10), transparent 60%), var(--negro); }
[data-theme="hueso"] #cursor { mix-blend-mode: normal; }
[data-theme="hueso"] .sys-art .node .dot,
[data-theme="hueso"] .sys-art .hub-bg { fill: var(--negro); }

/* 8. Botón de modo (lo añade js/tema.js dentro del menú, junto al idioma) */
.tema-switch {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: 999px; color: var(--acento-suave);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.tema-switch:hover { color: var(--hueso); background: rgba(244, 242, 237, 0.06); }
[data-theme="hueso"] .tema-switch:hover { background: rgba(20, 19, 18, 0.06); }
.tema-switch svg { width: 1.05rem; height: 1.05rem; }
.tema-switch .tema-luna { display: none; }
[data-theme="hueso"] .tema-switch .tema-sol { display: none; }
[data-theme="hueso"] .tema-switch .tema-luna { display: block; }