@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");
/* Paletas "Caribe" del directorio y la ficha de restaurantes.
 *
 * Cada vista pinta <div class="lgr" data-paleta="laguna|arena|atardecer">. Sin el atributo
 * queda la paleta original (negro y verde LOGIN). Se redefinen los mismos tokens que usan
 * las vistas (--verde es el color de accion, se llame como se llame) y se corrigen los
 * pocos colores que estaban escritos a mano. --ok es el "abierto ahora": no puede depender
 * del color de accion, porque en Atardecer la accion es coral.
 */

/* ---------- Laguna: azul verdoso profundo, turquesa, arena y coral ---------- */
.lgr[data-paleta="laguna"]{
  --fondo:#0f2f35; --panel:#143a41; --panel2:#18454d; --linea:#26575f;
  --texto:#f1f7f5; --suave:#9dbdbb;
  --verde:#2ec4b6; --verde2:#7ee8dc; --sobre-verde:#062b2a;
  --oro:#ffc971; --rojo:#ff8f7a; --ok:#7ee8dc; --coral:#ff7a59;
  --pie:#0b262b;
}
/* ---------- Arena: clara, arena y turquesa profundo ---------- */
.lgr[data-paleta="arena"]{
  --fondo:#f6efe3; --panel:#fffaf1; --panel2:#efe5d4; --linea:#e0d3bd;
  --texto:#123447; --suave:#5d7382;
  --verde:#0a8f8a; --verde2:#0a8f8a; --sobre-verde:#ffffff;
  --oro:#e09b2d; --rojo:#c2452d; --ok:#0a8a6f; --coral:#e8603f;
  --pie:#123447;
}
/* ---------- Atardecer: azul noche y coral ---------- */
.lgr[data-paleta="atardecer"]{
  --fondo:#15243c; --panel:#1b2e4b; --panel2:#213859; --linea:#2d4769;
  --texto:#f6f1e9; --suave:#a9b5c7;
  --verde:#ff8a5c; --verde2:#ffb391; --sobre-verde:#2a1206;
  --oro:#ffd166; --rojo:#ff9b9b; --ok:#5fe0c8; --coral:#ff8a5c;
  --pie:#101c30;
}

/* ---------- Bahia: azul puerto, marfil y champaña. El azul da confianza (seriedad,
   calma); el champaña, lo premium; el verde agua, el "si" suave de abierto ahora. ---------- */
.lgr[data-paleta="bahia"]{
  --fondo:#162a40; --panel:#1c334d; --panel2:#223c5a; --linea:#2f4d6d;
  --texto:#f5efe4; --suave:#a9b7c7;
  --verde:#d9b779; --verde2:#ecd3a1; --sobre-verde:#1d1a12;
  --oro:#f0c46b; --rojo:#f2a38e; --ok:#7fd1c7; --coral:#e59d80;
  --pie:#11213a;
}

/* ---------- Original LOGIN (30-09-2026, la unica que se ofrece): negro y verde de siempre, con
   todo el diseño nuevo. Antes "original" quedaba fuera de estas reglas (:not(original)) y volvian la
   tipografia y los detalles viejos. ---------- */
.lgr[data-paleta="original"]{
  --fondo:#121314; --panel:#1d1e21; --panel2:#26272b; --linea:rgba(236,233,226,.12);
  --texto:#ecebe6; --suave:#9d9b94;
  --verde:#00a261; --verde2:#3ee89b; --sobre-verde:#03150d;
  --oro:#3ee89b; --rojo:#e39a8a; --ok:#3ee89b; --coral:#d98a64; --urgente:#f28c38; --sobre-urgente:#1a0c02;
  --pie:#1a1b1d;
}

/* ---------- Esmeralda: lujo de selva. Esmeralda profundo, oro viejo y marfil, filetes
   dorados finos (la serif de titulos es comun a todas las paletas). ---------- */
.lgr[data-paleta="esmeralda"]{
  --fondo:#0c241f; --panel:#11302a; --panel2:#163a33; --linea:#2c4a41;
  --texto:#f4eee2; --suave:#b7c0b0;
  --verde:#c9a45c; --verde2:#e3c98f; --sobre-verde:#1a1407;
  --oro:#d8b36a; --rojo:#e3a08b; --ok:#9ed9b8; --coral:#c98f6e;
  --pie:#091c18;
}
.lgr:is([data-paleta="esmeralda"],[data-paleta="original"]) .lgr-cab h1 em,.lgr:is([data-paleta="esmeralda"],[data-paleta="original"]) .lgr-eyebrow{color:var(--verde)}
.lgr:is([data-paleta="esmeralda"],[data-paleta="original"]) .lgr-eyebrow::before{background:var(--verde)}
.lgr:is([data-paleta="esmeralda"],[data-paleta="original"]) :is(.lgr-tarjeta,.lgr-top li,.lgr-bloque,.lgr-principal section,.lgr-hero,.lgr-buscar,.lgr-tipos,.lgr-chip){
  border-color:color-mix(in srgb,var(--verde) 30%,transparent)}
.lgr:is([data-paleta="esmeralda"],[data-paleta="original"]) .lgr-top__puesto{background:var(--verde);color:var(--sobre-verde)}
.lgr:is([data-paleta="esmeralda"],[data-paleta="original"]) .lgr-chip[aria-current="true"]{background:var(--verde);color:var(--sobre-verde)}

/* Lo que estaba escrito a mano en las vistas */
/* Fuente de titulos de todas las paletas del boton "Estilos": serif de alto contraste. */
.lgr[data-paleta]{--display:"Outfit",Georgia,"Times New Roman",serif}
.lgr[data-paleta] :is(.lgr-cab h1,.lgr-hero h1,.lgr-seccion h2,.lgr-tarjeta h2,.lgr-top h3,.lgr-reclamo h2){letter-spacing:-.005em}
.lgr[data-paleta] .lgr-cab h1{font-weight:700}

.lgr[data-paleta]{color:var(--texto);
  background:radial-gradient(70% 320px at 12% 0%,color-mix(in srgb,var(--verde) 18%,transparent),transparent 70%) no-repeat}
.lgr[data-paleta] .lgr-filtros{background:color-mix(in srgb,var(--fondo) 92%,transparent)}
.lgr[data-paleta] .lgr-hero{background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--verde) 24%,transparent),transparent 55%),
                                       linear-gradient(160deg,var(--panel2),var(--panel))}
.lgr[data-paleta] .lgr-btn--primario:hover{background:color-mix(in srgb,var(--verde) 85%,#fff)}
.lgr[data-paleta] .lgr-barra{background:color-mix(in srgb,var(--fondo) 94%,transparent)}
.lgr[data-paleta] .lgr-media{background-color:var(--panel2)}
.lgr[data-paleta] .lgr-sello{border-color:color-mix(in srgb,var(--verde) 45%,transparent)}
.lgr[data-paleta] .lgr-top li:hover{border-color:color-mix(in srgb,var(--verde) 55%,transparent)}
.lgr[data-paleta] .lgr-hecho{background:color-mix(in srgb,var(--texto) 5%,transparent)}
.lgr[data-paleta] .lgr-punto{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.lgr[data-paleta] .lgr-abierto[data-estado="abierto"]{color:var(--ok)}
.lgr[data-paleta] .lgr-abierto[data-estado="pronto"]{color:var(--coral)}
.lgr[data-paleta] .lgr-top__puesto{background:var(--coral);color:#fff}
.lgr[data-paleta] .lgr-estrellas i,.lgr[data-paleta] .lgr-cerca small{color:var(--oro)}
.lgr[data-paleta] .lgr-cerca li a:hover b{color:var(--verde)}
.lgr[data-paleta] .lgr-chip[aria-current="true"],
.lgr[data-paleta] .lgr-paginas [aria-current="page"]{background:var(--texto);color:var(--fondo)}

/* El resto de la pagina (fondo, cabecera y pie del sitio) acompaña la paleta */
body:has(.lgr[data-paleta="laguna"]){background:#0f2f35!important}
body:has(.lgr[data-paleta="arena"]){background:#f6efe3!important}
body:has(.lgr[data-paleta="atardecer"]){background:#15243c!important}
body:has(.lgr[data-paleta="bahia"]){background:#162a40!important}
body:has(.lgr[data-paleta="esmeralda"]){background:#0c241f!important}
body:has(.lgr[data-paleta="laguna"]) #kt_app_header,body:has(.lgr[data-paleta="laguna"]) #kt_app_footer{background:#0b262b!important}
body:has(.lgr[data-paleta="arena"]) #kt_app_header,body:has(.lgr[data-paleta="arena"]) #kt_app_footer{background:#123447!important}
body:has(.lgr[data-paleta="atardecer"]) #kt_app_header,body:has(.lgr[data-paleta="atardecer"]) #kt_app_footer{background:#101c30!important}
body:has(.lgr[data-paleta="bahia"]) #kt_app_header,body:has(.lgr[data-paleta="bahia"]) #kt_app_footer{background:#11213a!important}
body:has(.lgr[data-paleta="esmeralda"]) #kt_app_header,body:has(.lgr[data-paleta="esmeralda"]) #kt_app_footer{background:#091c18!important}
body:has(.lgr[data-paleta]) #kt_app_main,body:has(.lgr[data-paleta]) #kt_app_wrapper{background:transparent!important}
/* El boton principal siempre con su color de texto propio (en la ficha otra regla lo aclaraba) */
.lgr[data-paleta] .lgr-btn--primario,.lgr[data-paleta] .lgr-btn--primario svg{color:var(--sobre-verde)!important}

/* Estilo mate (30-09 noche): en restaurantes y directorio, fechas/estrellas en mostaza, separadores dorados. */
.lgr[data-paleta="original"] :is(.lgr-eyebrow,.lgh-eyebrow){color:#b8975a}
.lgr[data-paleta="original"] .lgi--oro{color:#3ee89b;fill:#3ee89b}
.lgr[data-paleta="original"] :is(.lgh-cap,.lgd-grupo + .lgd-grupo){border-top-color:rgba(184,151,90,.35)}
.lgr[data-paleta="original"] .lgd-t + .lgd-t{border-top-color:rgba(236,233,226,.14)}

/* 23-10-2026 (founder): Reservar es urgente, va en naranja; el resto del verde queda. */
.lgr[data-paleta] .lgr-btn--primario,.lgd .lgr-btn--primario{background:var(--urgente,#f28c38)!important;color:var(--sobre-urgente,#1a0c02)!important;border-color:transparent!important}
