/* ══════════════════════════════════════════════════════════════════
   Grupo La Habana · TRES PROPUESTAS del mismo CRM
   Mismo HTML y mismo JS; sólo cambia la piel. El cliente elige una.
     A · «Claro»        — la de siempre (estilos.css tal cual)
     B · «Noche Habana» — negro y oro del logo, titulares con serifa
     C · «Terraza»      — crema y rojo del león, navegación arriba
   Selector: propuesta.js (?estilo=a|b|c, se recuerda por navegador).
   ══════════════════════════════════════════════════════════════════ */

/* ── B · NOCHE HABANA ──────────────────────────────────────────── */
/* :root[x][x] sube la especificidad por encima de :root[data-tema="noche"]
   y de [data-neg]: en B manda la propuesta, sea cual sea el tema */
:root[data-estilo="b"][data-estilo]{
  --fondo:#0B0A08; --panel:#15130F; --panel-2:#1B1813; --hover:#201C16;
  --linea:#2E281E; --linea-suave:#221E17;
  --texto:#F4EEE2; --texto-2:#BDB29C; --texto-3:#857B69; --tinta:#D6B35A;
  --marca:#D6B35A; --marca-suave:#1F1A10; --marca-txt:#15110A;
  --lounge:#E3B96B; --hemingway:#C9A46A; --redlion:#F0677B; --coral:#F08A7E;
  --ok:#4FD497; --ok-bg:#12281D; --aviso:#E9B04A; --aviso-bg:#2A2112;
  --malo:#F07168; --malo-bg:#2C1816; --neutro:#BDB29C; --neutro-bg:#221E17;
  --r:10px; --r2:9px; --r3:7px;
  --sombra:0 1px 0 rgba(214,179,90,.05), 0 10px 30px -18px rgba(0,0,0,.9);
  --sombra-media:0 14px 36px -16px rgba(0,0,0,.9);
  --sombra-alta:0 24px 60px -18px rgba(0,0,0,.95);
  --serif:'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  color-scheme:dark;
}
:root[data-estilo="b"][data-estilo][data-neg="lounge"]{--marca:#E3B96B}
:root[data-estilo="b"][data-estilo][data-neg="hemingway"]{--marca:#CFAE78}
:root[data-estilo="b"][data-estilo][data-neg="redlion"]{--marca:#F0677B; --marca-txt:#1A0609; --marca-suave:#2A1418}
[data-estilo="b"] body{
  background:radial-gradient(1200px 600px at 85% -10%, rgba(214,179,90,.09), transparent 60%), var(--fondo);
}
[data-estilo="b"] :is(.tit h1, .identidad h1, .m-titulo, .dlg-cab h2, .ficha-cab h2){
  font-family:var(--serif); font-weight:600; letter-spacing:0; font-size:2rem; line-height:1.1;
}
[data-estilo="b"] .identidad h1{font-size:1.7rem}
[data-estilo="b"] .tarj h2{font-family:var(--serif); font-size:1.28rem; font-weight:600; letter-spacing:0}
[data-estilo="b"] .cifra .n{font-family:var(--serif); font-weight:600; font-size:2.35rem; letter-spacing:0; color:var(--marca)}
[data-estilo="b"] .cifra .et, [data-estilo="b"] .nav-tit, [data-estilo="b"] .tabla th{letter-spacing:.12em; text-transform:uppercase; font-size:10.5px}
[data-estilo="b"] .lat{
  background:linear-gradient(180deg, #100E0A, #0B0A08); border-right:1px solid transparent;
  border-image:linear-gradient(180deg, transparent, rgba(214,179,90,.45), transparent) 1;
}
[data-estilo="b"] .nav button[aria-current="page"]{
  background:linear-gradient(90deg, rgba(214,179,90,.16), transparent); color:var(--marca); box-shadow:inset 2px 0 0 var(--marca);
}
[data-estilo="b"] .tarj, [data-estilo="b"] .correo{border-color:#2A2419; background:linear-gradient(180deg, #17150F, #131109)}
[data-estilo="b"] .identidad{background:linear-gradient(100deg, #1B170F, #110F0B); border-color:#3A3020}
[data-estilo="b"] .identidad::before{background:linear-gradient(180deg, #F3D98B, #A8832F)}
[data-estilo="b"] .btn:not(.fino){background:linear-gradient(180deg, #E8C872, #B8903A); color:#15110A; box-shadow:0 6px 18px -8px rgba(214,179,90,.6)}
[data-estilo="b"] .chip[aria-pressed="true"]{background:linear-gradient(180deg, #E8C872, #B8903A); color:#15110A; border-color:transparent}
[data-estilo="b"] .cab{background:rgba(11,10,8,.78)}
[data-estilo="b"] .graf .seg{filter:saturate(1.15)}
[data-estilo="b"] #tema{display:none}                     /* B es de noche por definición */

/* ── C · TERRAZA ──────────────────────────────────────────────── */
:root[data-estilo="c"][data-estilo]{
  --fondo:#F3EEE4; --panel:#FFFDF8; --panel-2:#F7F2E8; --hover:#FBF7EF;
  --linea:#E6DDCC; --linea-suave:#EFE8DB;
  --texto:#1F1A14; --texto-2:#5E5548; --texto-3:#978C7B; --tinta:#B3122E;
  --marca:#B3122E; --marca-suave:#FBE9EA; --marca-txt:#fff;
  --r:22px; --r2:16px; --r3:12px;
  --sans:'Plus Jakarta Sans', 'Inter', -apple-system, system-ui, sans-serif;
  --sombra:0 1px 0 rgba(31,26,20,.03), 0 12px 28px -20px rgba(31,26,20,.35);
  --sombra-media:0 18px 38px -20px rgba(31,26,20,.4);
  color-scheme:light;
}
:root[data-estilo="c"][data-estilo][data-neg="lounge"]{--marca:#A86F14; --marca-suave:#FAF0DD}
:root[data-estilo="c"][data-estilo][data-neg="hemingway"]{--marca:#6B5330; --marca-suave:#F2ECE1}
:root[data-estilo="c"][data-estilo][data-neg="redlion"]{--marca:#A31027; --marca-suave:#FBECEE}
[data-estilo="c"] #tema{display:none}                     /* C es de día por definición */
[data-estilo="c"] :is(.tit h1, .identidad h1, .m-titulo){font-weight:800; letter-spacing:-.035em}
[data-estilo="c"] .tit h1{font-size:1.9rem}
[data-estilo="c"] .cifra .n{font-weight:800; letter-spacing:-.045em}
[data-estilo="c"] .tarj{border-color:transparent}
[data-estilo="c"] .identidad{background:var(--panel); border-color:transparent; box-shadow:var(--sombra)}
[data-estilo="c"] .identidad::before{width:6px; background:linear-gradient(180deg, #D4AF37, #B3122E)}
[data-estilo="c"] .btn{border-radius:30px; padding:9px 17px}
[data-estilo="c"] .filtros{border-radius:30px; border-color:transparent; background:#EAE2D3}
[data-estilo="c"] .filtro{border-radius:30px}
[data-estilo="c"] .cifra .ico{border-radius:50%; background:var(--marca-suave); color:var(--marca)}

/* navegación ARRIBA en pantalla ancha; en móvil sigue el cajón de siempre */
@media (min-width:981px){
  [data-estilo="c"] .app{display:block}
  [data-estilo="c"] .lat{
    position:static; height:auto; flex-direction:row; align-items:center; gap:18px;
    padding:10px 24px; overflow:visible; background:#1F1A14; border:0;
  }
  [data-estilo="c"] .marca{flex:none; padding:0}
  [data-estilo="c"] .marca img{width:52px}
  [data-estilo="c"] .nav{flex-direction:row; flex-wrap:wrap; gap:3px; align-items:center}
  [data-estilo="c"] .nav-tit{display:none}
  [data-estilo="c"] .nav-tit2{display:block; width:1px; height:22px; padding:0; margin:0 8px !important; background:#4A4136; overflow:hidden; font-size:0}
  [data-estilo="c"] .nav button{width:auto; padding:7px 12px; border-radius:30px; color:#D9CFBF; font-size:13px}
  [data-estilo="c"] .nav button svg{width:15px; height:15px}
  [data-estilo="c"] .nav button:hover{background:#2E271F; color:#fff}
  [data-estilo="c"] .nav button[aria-current="page"]{background:#FFFDF8; color:#1F1A14; box-shadow:none}
  [data-estilo="c"] .nav .cuenta{background:#B3122E; color:#fff}
  [data-estilo="c"] .lat-pie{display:none}
  [data-estilo="c"] .cab{background:rgba(243,238,228,.86)}
  [data-estilo="c"] .cuerpo{margin:0 auto}
}

/* ── el selector de propuesta (lo pinta propuesta.js) ─────────────── */
.propuesta{
  position:fixed; right:16px; bottom:16px; z-index:65; display:flex; align-items:center; gap:4px;
  background:#15130F; color:#F4EEE2; border-radius:30px; padding:5px 6px 5px 14px;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.55); font:500 12.5px/1 'Inter', system-ui, sans-serif;
}
.propuesta span{margin-right:4px; opacity:.7}
.propuesta button, .propuesta a{
  border:0; background:none; color:inherit; font:inherit; font-weight:650; border-radius:20px;
  padding:7px 11px; cursor:pointer; text-decoration:none;
}
.propuesta button[aria-pressed="true"]{background:#D6B35A; color:#15110A}
.propuesta button:hover:not([aria-pressed="true"]), .propuesta a:hover{background:rgba(255,255,255,.1)}
.propuesta a{border-left:1px solid rgba(255,255,255,.15); border-radius:0 20px 20px 0; margin-left:2px}
@media (max-width:720px){ .propuesta{left:12px; right:12px; justify-content:center; bottom:10px} }
@media print{ .propuesta{display:none} }

/* Los logotipos de una tinta se eligen por el TEMA, y B/C lo fijan por su cuenta:
   el del Lounge negro sobre el negro de B no se veía. El papel de la factura
   (siempre blanco) queda fuera. */
[data-estilo="b"] img:is([src*="lounge-negro"], [src*="emb-lounge-negro"]):not(.p-logo){filter:invert(1) brightness(.92)}
[data-estilo="c"] img:is([src*="lounge-blanco"], [src*="emb-lounge-blanco"]):not(.p-logo){filter:invert(1)}

/* El chip activo de C era del rojo del león, y el emblema del Red Lion (rojo)
   desaparecía encima. Tinta oscura, como la barra de arriba. */
[data-estilo="c"] .chip[aria-pressed="true"]{background:#1F1A14; border-color:#1F1A14; color:#fff}
/* en el móvil la píldora de propuestas va fija abajo: que no tape lo último */
@media (max-width:720px){ html[data-estilo] body{padding-bottom:70px} }