/* =========================================================
   TEMA OSCURO de BitacoraWay (fondo negro + nébula de partículas).
   Se carga DESPUÉS de los estilos de cada página y los sobrescribe.
   Las ventanas (panel del propietario y presupuesto) se quedan en claro
   para leerse e imprimirse bien.
   ========================================================= */
:root{
  --bg:#04060b; --surface:rgba(14,22,32,.72); --ink:#eef3f5; --muted:#9db0b8; --line:rgba(255,255,255,.12);
  --brand:#14a6ab; --brand-2:#f2762e; --brand-soft:rgba(20,166,171,.18);
  --panel:#0c1620; --field:rgba(255,255,255,.06);
  --shadow:0 12px 34px -14px rgba(0,0,0,.8);
  color-scheme:dark;
}
html,body{background:var(--bg)!important;color:var(--ink)}

/* --- capas: la nébula va fija detrás del contenido --- */
#lienzo{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none}
header.top{z-index:20}
section,footer,.secbar,main{position:relative;z-index:2}
.hero .wrap{position:relative;z-index:3}
section:not(.hero-home):not(.hero-photo){background:transparent!important;border-color:var(--line)!important}
.hero:not(.hero-home):not(.hero-photo)::after{display:none}

/* --- cabecera y pie --- */
header.top{background:rgba(4,6,11,.72)!important;border-bottom-color:var(--line)!important}
nav a{color:var(--muted)} nav a:hover,nav a.on{color:#fff}
.secbar{background:rgba(4,6,11,.85)!important}
.secbar a{color:var(--ink);border-color:var(--line)}
footer{background:rgba(2,3,7,.92)!important;border-top:1px solid var(--line)}

/* --- foto de cabecera: se funde con el negro --- */
.hero-home::after,.hero.hero-photo::after{background:linear-gradient(180deg,rgba(4,6,11,0) 0%,rgba(4,6,11,.6) 45%,var(--bg) 88%,var(--bg) 100%)!important}
.hero-home,.hero.hero-photo{border-bottom-color:var(--bg)!important}

/* --- paneles y tarjetas semitransparentes (deja ver la nébula) --- */
.why .ic{background:none!important;border:0!important;padding:0!important;backdrop-filter:none!important}
.step,.how > div,.adm-item{background:rgba(14,22,32,.62)!important;border-color:var(--line)!important;backdrop-filter:blur(6px)}
.dest{background:var(--surface);border:1px solid var(--line);backdrop-filter:blur(6px)}
.dest .img .tag{color:#12363d}
.dest p,.dest small{color:var(--muted)!important}
.vcard .go{color:#12363d}
.trip-info{background:rgba(255,255,255,.05)!important;border-color:var(--line)!important}

/* --- controles --- */
input,select,textarea{background:var(--field);color:var(--ink);border-color:var(--line)}
select option{background:#0c1620;color:#eef3f5}
label.f{color:#c9d6db}
.dest-pick button,.counter,.seg button,.extra,.cab button,.chips label,.chips2 span{background:rgba(255,255,255,.05)!important;color:var(--ink);border-color:var(--line)!important}
.dest-pick button small,.extra .info small,.cab button small{color:var(--muted)!important}
.extra.on,.dest-pick button.on,.cab button.on{background:var(--brand-soft)!important;border-color:var(--brand)!important}
.seg button.on,.chips2 input:checked+span{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff}
.counter button{color:#fff}
.btn.ghost{color:#fff;border-color:rgba(255,255,255,.55)}

/* --- resumen de precio y avisos --- */
.summary{background:rgba(9,16,24,.9)!important;border:1px solid var(--line);backdrop-filter:blur(8px)}
.toast{background:#0c1620;border:1px solid var(--line)}
.empty{color:var(--muted)}

/* --- VENTANAS (panel y presupuesto) en claro, como un documento --- */
.modal .box{
  --bg:#fbf3ee; --surface:#fffaf7; --ink:#12363d; --muted:#5f6a72; --line:#efdfd6; --brand:#0b8f94; --brand-soft:#e3f5f5; --field:#fff;
  background:#fffaf7!important;color:#12363d;color-scheme:light}
.modal .box input,.modal .box select,.modal .box textarea{background:#fff;color:#12363d;border-color:#efdfd6}
.modal .box .adm-item,.modal .box .step,.modal .box .pp-sec{background:var(--bg)!important;backdrop-filter:none}
.modal .box .seg button,.modal .box .chips label,.modal .box .counter{background:#fff!important;color:#12363d;border-color:#efdfd6!important}
.modal .box .seg button.on{background:#0b8f94!important;color:#fff}
.modal .box label.f{color:#374151}
.modal .box .btn.ghost{color:#0b8f94;border-color:#0b8f94}
.modal .box .pp-day,.modal .box .pp-mini{background:#fff;color:#12363d}

/* --- impresión: siempre en claro --- */
@media print{
  :root{--bg:#fff;--ink:#12363d;--muted:#5f6a72;--line:#ddd}
  html,body{background:#fff!important;color:#12363d}
  #lienzo{display:none!important}
}
@media (prefers-reduced-motion:reduce){#lienzo{display:none}}