/*
 DASAQI · SISTEMA VISUAL UNIFICADO v1 (2026-10-29)
 Apariencia solamente: NO redefine visibilidad de modales, rutas, formularios,
 validaciones, Firebase, reglas, estructuras de columnas ni interacciones JS.
 Referencia: Mi Dasaqi / Mi Academia, acentos oro y azul Dasaqi.
*/
:root {
  --du-bg: #101114;
  --du-bg-soft: #15171b;
  --du-surface: #1b1e24;
  --du-surface-raised: #23262d;
  --du-border: rgba(255,255,255,.13);
  --du-border-strong: rgba(255,255,255,.21);
  --du-gold: #d6a12a;
  --du-gold-light: #f0c86f;
  --du-gold-tint: rgba(214,161,42,.13);
  --du-blue: #24c4f4;
  --du-blue-tint: rgba(36,196,244,.11);
  --du-text: #f4f5f7;
  --du-muted: #aab1bd;
  --du-soft: #858f9e;
  --du-radius: 20px;
  --du-shadow: 0 16px 46px rgba(0,0,0,.21);
  --du-font: 'Poppins','Segoe UI',Arial,sans-serif;
}

/* Tipografía y foco accesible: no alteran los tamaños ni valores de inputs. */
body:has(.account-page),body:has(.academy-page),body:has(.calc-container),
body:has(.paint-main),body:has(.academy-soon-wrap),body:has(.ph-main) {
  color: var(--du-text);
  background-color: var(--du-bg);
  font-family: var(--du-font);
}
body:has(.calc-container) button,body:has(.calc-container) input,body:has(.calc-container) select,
body:has(.paint-main) button,body:has(.paint-main) input,body:has(.paint-main) select,
body:has(.academy-soon-wrap) button {font-family:inherit;}
:where(.account-page,.academy-page,.calc-container,.paint-main,.ph-main,.academy-soon-wrap)
  :is(button,a,input,select,textarea):focus-visible {
  outline:2px solid var(--du-gold);
  outline-offset:3px;
}

/* Fondos de dashboards: misma familia, manteniendo los fondos de login y multimedia. */
.account-page,
.academy-page.academy-dashboard-page {
 background-image: radial-gradient(ellipse at 78% 4%,rgba(36,196,244,.055),transparent 38%),
                   radial-gradient(ellipse at 14% 38%,rgba(214,161,42,.055),transparent 38%),
                   linear-gradient(140deg,#121418 0%,#0e1013 68%,#111318 100%);
 background-attachment:fixed;
}
.account-page::before,.academy-page.academy-dashboard-page::before {background:transparent;}
body:has(.calc-container),body:has(.paint-main),body:has(.academy-soon-wrap),body:has(.ph-main) {
 background-image: radial-gradient(ellipse at 82% 0%,rgba(214,161,42,.07),transparent 36%),
                   radial-gradient(ellipse at 16% 25%,rgba(36,196,244,.045),transparent 36%);
 background-color:var(--du-bg);
}

/* Cabeceras uniformes; se conserva la posición fixed/sticky que cada módulo necesita. */
.account-navbar,.academy-navbar,.calc-header,.paint-topbar,.ph-header {
 background:rgba(15,17,21,.94);
 border-bottom:1px solid var(--du-border);
 backdrop-filter:blur(14px);
 -webkit-backdrop-filter:blur(14px);
}
.calc-header,.paint-topbar,.ph-header {min-height:76px;}
.account-navbar .logo-dark,.academy-navbar .logo-dark {max-width:142px;}
.calc-brand img,.ph-header img,.paint-brand .du-brand-image {width:139px;max-width:36vw;height:auto;object-fit:contain;display:block;}
.paint-topbar {height:auto;min-height:76px;padding:14px max(3.5vw,22px);}
.paint-brand {gap:15px;font-family:var(--du-font);font-size:14px;font-weight:700;letter-spacing:.02em;}
.paint-brand .du-brand-breadcrumb {font-size:12px;letter-spacing:0;color:var(--du-muted);font-weight:650;white-space:normal;}
.paint-brand .du-brand-breadcrumb small {display:block;color:var(--du-gold);font:600 10px/1.4 var(--du-font);letter-spacing:.07em;}
.paint-topbar .live-dot,.calc-header .status-dot {background:var(--du-gold);}
.paint-topbar .top-link,.calc-header .back-link,.ph-header a:not(:first-child),.student-back {
 border-color:var(--du-border-strong);
 border-radius:11px;
 color:var(--du-text);
 background:rgba(255,255,255,.035);
}
.paint-topbar .top-link:hover,.calc-header .back-link:hover,.ph-header a:not(:first-child):hover,
.account-navbar a:hover,.academy-navbar a:hover {color:var(--du-gold-light);border-color:rgba(214,161,42,.46);}

/* Panels: mismos radios, bordes y superficies, sin cambiar grids. */
.dashboard-sidebar,.student-sidebar,
.account-panel,.calc-card,.calc-results-column .result-panel,
.paint-main .viewer-side,.paint-main .inspector,.paint-main .phases,
.paint-main .report-actions,.paint-main .project-selector,.paint-main .paint-library,
.ph-main .ph-card,.academy-soon,.login-panel,.register-panel {
 border-color:var(--du-border);
 border-radius:var(--du-radius);
 box-shadow:var(--du-shadow);
}
.dashboard-sidebar,.student-sidebar {
 background:linear-gradient(145deg,#22252b 0%,#16181d 95%);
}
.dashboard-nav-link.is-active,.student-nav-item.is-active {border-color:rgba(214,161,42,.32);background:linear-gradient(105deg,rgba(214,161,42,.17),rgba(214,161,42,.045));color:var(--du-gold-light)!important;}
.dash-hero,.student-hero,.student-category-hero,.calc-hero {
 background:radial-gradient(circle at 89% 14%,var(--du-blue-tint),transparent 33%),
            radial-gradient(circle at 15% 90%,var(--du-gold-tint),transparent 40%),
            linear-gradient(127deg,#29272a,#1b1e24 62%,#181a20);
 border-color:rgba(214,161,42,.19);
 border-radius:24px;
}
.dash-link-card,.pillar-overview-card,.student-learning-card,.student-card,.account-card,
.profile-editor-card,.map-editor-card,.public-profile-card,.calc-card,.result-panel {
 border-color:var(--du-border);
}
.dash-link-card,.pillar-overview-card {background:linear-gradient(145deg,rgba(255,255,255,.066),rgba(255,255,255,.025));}
.dash-link-card:hover,.pillar-overview-card:hover {border-color:rgba(214,161,42,.52);}
.account-panel-header {background:var(--du-blue-tint);}

/* Herramientas: puente visual entre Calculadora, Guía y Mi Dasaqi. */
.calc-hero,.paint-main .intro {border-radius:23px;}
.paint-main .intro {
 background:radial-gradient(circle at 92% 10%,var(--du-blue-tint),transparent 39%),
            linear-gradient(120deg,#29262a,#1a1d23);
 border:1px solid rgba(214,161,42,.18);
 padding:36px 38px;
 margin-bottom:25px;
 align-items:center;
}
.paint-main .intro h1 {font-family:var(--du-font);font-size:clamp(29px,3.5vw,46px);font-weight:700;letter-spacing:-.035em;}
.paint-main .intro h1 em {color:var(--du-gold-light);}
.paint-main .intro .eyebrow,.paint-main .kicker,
.paint-main .phase-detail strong,.paint-main .phase-index,
.paint-main .library-cat,.paint-main .phase-explain .technique b,
.paint-main .phase-btn.is-active .number {color:var(--du-gold-light);}
.paint-main .project-selector,.paint-main .viewer-side,.paint-main .inspector,
.paint-main .phases,.paint-main .report-actions,.paint-main .paint-library {background:linear-gradient(145deg,#1b1e24,#17191e);}
.paint-main .upload-zone {background:#1d2229;border-color:#48515d;border-radius:17px;}
.paint-main .upload-zone:hover,.paint-main .upload-zone.drag-over {background:#28271f;border-color:var(--du-gold);}
.paint-main .upload-icon,.paint-main .upload-zone strong b,.paint-main .privacy-tag {color:var(--du-gold-light);border-color:rgba(214,161,42,.35);}
.paint-main .selector-card {background:#20242b;border-color:var(--du-border);}
.paint-main .selector-card.is-active {background:linear-gradient(135deg,rgba(214,161,42,.18),#23252b);border-color:var(--du-gold);box-shadow:inset 0 0 0 1px rgba(214,161,42,.24);}
.paint-main .pill,.paint-main .project-selector .pill {border-color:rgba(214,161,42,.32);color:var(--du-gold-light);}
.paint-main .palette-row,.paint-main .phase-detail,.paint-main .phase-explain,.paint-main .library-card,.paint-main .reference-row,
.paint-main .phase-btn {background:#22262e;border-color:var(--du-border);}
.paint-main .phase-btn.is-active {background:rgba(214,161,42,.14);border-color:var(--du-gold);color:var(--du-text);}
.paint-main .phase-detail p,.paint-main .phase-explain p {color:#c8cdd7;}
.paint-main .library-open-link {border-color:rgba(214,161,42,.35);color:var(--du-gold-light);background:rgba(214,161,42,.06);}
.paint-main .library-open-link:hover {background:rgba(214,161,42,.18);}
.paint-main .library-help-note {background:var(--du-gold-tint);border-color:rgba(214,161,42,.32);}
.paint-main .library-include input,.paint-main .paint-highlight-toggle input {accent-color:var(--du-gold);}
.paint-main .phase-tone-chip {background:#20242b;border-color:var(--du-border);}
.paint-main .viewer-stage {color:var(--du-gold-light);border-color:rgba(214,161,42,.24);}
.paint-main .viewer-frame {background:radial-gradient(circle at 45% 40%,#30333b 0%,#15181e 72%);}

/* CTAs primarias doradas / secundarios discretos. No se alteran los onClick ni href. */
.calc-container .btn-primary,
.paint-main .btn.primary,.academy-soon .btn.primary,
.ph-main .ph-btn:not(.ph-btn-outline),
.student-primary-btn,.dash-button:not(.dash-button-outline),.btn-account,.btn-login {
 background:var(--du-gold);
 border-color:var(--du-gold);
 color:#161719!important;
 border-radius:11px;
 box-shadow:none;
}
.calc-container .btn-primary:hover,
.paint-main .btn.primary:hover,.academy-soon .btn.primary:hover,
.student-primary-btn:hover,.dash-button:not(.dash-button-outline):hover {
 background:var(--du-gold-light);color:#151516!important;
}
.calc-container .btn-secondary,.paint-main .btn.ghost,.academy-soon .btn.ghost,
.student-secondary-btn,.dash-button-outline,.btn-account-outline,.ph-btn-outline {
 background:rgba(255,255,255,.045);
 border:1px solid var(--du-border-strong);
 border-radius:11px;
 color:var(--du-text)!important;
}
.calc-container .btn-secondary:hover,.paint-main .btn.ghost:hover,
.student-secondary-btn:hover,.dash-button-outline:hover {
 border-color:rgba(214,161,42,.57);color:var(--du-gold-light)!important;
}
.calc-container .mode-tab.is-active {background:var(--du-gold);color:#151515;}
.calc-container .tech-tab.is-active {background:var(--du-gold-tint);border-color:var(--du-gold);}
.calc-container .price-display {background:radial-gradient(circle at 50% 0%,rgba(214,161,42,.16),transparent 80%),#26231f;}
.calc-container .price-display strong {color:var(--du-gold-light);}

/* Titulares, campos y textos auxiliares: coherencia sin afectar el cálculo. */
.calc-hero h1,.paint-main h1,.student-hero h1,.dash-hero h1,
.ph-main h1,.academy-soon h1 {font-family:var(--du-font);}
.calc-container .eyebrow,.calc-container .section-kicker,.calc-container .head-icon,
.student-eyebrow,.student-section-heading>span,.dashboard-shell .brand-eyebrow {
 color:var(--du-gold-light);
}
.calc-container .field input,.calc-container .field select,
.paint-main .library-toolbar input,.paint-main .library-toolbar select,
.paint-main .inline-number select {
 background:#14171c;border-color:#464b53;border-radius:11px;
}
.calc-container .field input:focus,.calc-container .field select:focus,
.paint-main .library-toolbar input:focus,.paint-main .library-toolbar select:focus {border-color:var(--du-gold);box-shadow:0 0 0 3px rgba(214,161,42,.13);}
.paint-main .phase-explain .technique {color:var(--du-muted);}

/* Lecciones 'en construcción' + páginas de funciones futuras. */
.academy-soon,.ph-main .ph-card {background:linear-gradient(140deg,#22252b,#17191e);}
.academy-soon .kicker,.academy-soon .academy-soon-label,.ph-main .ph-badge {color:var(--du-gold-light);}
.academy-soon .academy-soon-orbit,.ph-main .ph-badge {border-color:rgba(214,161,42,.34);}
.ph-header a:first-child {border:0;padding:0;background:none;}
.ph-header a:not(:first-child) {border-radius:11px;}

/* Armonía suave también en las pantallas públicas de Academia/Tienda, sin cambiar su estructura. */
.academy-page .course-card,.academy-page .coming-card,.products-page .product-card {
 border-color:var(--du-border);border-radius:var(--du-radius);
}
.academy-page .course-card:hover,.academy-page .coming-card:hover {border-color:rgba(214,161,42,.5);}

@media(max-width:850px) {
 .paint-topbar {gap:12px;}
 .paint-brand .du-brand-image {width:116px;}
 .paint-brand .du-brand-breadcrumb {font-size:11px;}
 .paint-main .intro {padding:27px 23px;}
}
@media(max-width:540px) {
 .paint-topbar {min-height:69px;padding:11px 13px;}
 .paint-brand {gap:9px;}
 .paint-brand .du-brand-image {width:85px;max-width:27vw;}
 .paint-brand .du-brand-breadcrumb {font-size:10px;}
 .paint-brand .du-brand-breadcrumb small {font-size:8px;}
 .paint-main .intro {padding:25px 18px;}
 .paint-main .intro h1 {font-size:31px;}
 .paint-main .intro .intro-meta {display:none;}
 .paint-topbar .top-actions {gap:6px;}
 .paint-topbar .top-link {padding:7px 8px;font-size:10px;}
}
@media(prefers-reduced-motion:reduce) {
 .paint-main .btn:hover,.calc-container .btn:hover {transform:none;}
}

/* Respaldo tipográfico del logotipo si la carpeta parallax no está disponible en local. */
.du-brand-lockup{display:inline-flex;align-items:center;flex:0 0 auto;}
.du-brand-fallback{color:var(--du-gold-light);font:800 20px/1 var(--du-font);letter-spacing:.095em;}
.du-brand-fallback[hidden]{display:none!important;}
@media(max-width:540px){.du-brand-fallback{font-size:14px;letter-spacing:.035em;}}