/* =========================================================
   LFH THEME (Verde premium + Dorado)
   Archivo único y depurado
   ========================================================= */

:root{
  /* Verde premium (nuevo) */
  --lfh-green:      #25382F;  /* verde base */
  --lfh-green-dark: #1B2A22;  /* más oscuro para top del degradado */
  --lfh-green-ink:  #16231D;  /* tinta para iconos/texto sobre dorado */

  /* Dorados */
  --lfh-gold:       #C9A46A;
  --lfh-gold-dark:  #B8935D;
  --lfh-gold-soft:  #E6D2A7;

  /* Texto */
  --lfh-text:       rgba(255,255,255,.95);
  --lfh-text-soft:  rgba(255,255,255,.78);

  /* Glass */
  --lfh-glass:        rgba(201,164,106,.08);
  --lfh-glass-border: rgba(201,164,106,.16);

  /* Bottom nav */
  --lfh-bottom-nav-h: 78px;
}

/* =========================
   BASE / FONDO GLOBAL
   ========================= */

/* El degradado vive en el documento completo y se mantiene al scroll */
html, body{
  min-height: 100%;
  height: auto;
  background: linear-gradient(180deg, var(--lfh-green-dark) 0%, var(--lfh-green) 100%) !important;
  background-attachment: fixed !important;
  color: var(--lfh-text);
}

/* Evita que wrappers del template pinten fondo */
.content-area,
.container,
.lfh-shell{
  background: transparent !important;
}

/* Capa de fondo del template (si existe) */
.pagehead-bg,
.primary-bg{
  background: linear-gradient(180deg, var(--lfh-green-dark) 0%, var(--lfh-green) 100%) !important;
  background-image: none !important;

  /* Importante: no empuja layout ni crea espacio extra */
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important;
}

/* Quitar pseudo-elementos decorativos del template */
.pagehead-bg:before, .pagehead-bg:after,
.primary-bg:before, .primary-bg:after{
  content: none !important;
  display: none !important;
}

/* Contenido por encima del fondo */
.content-area{
  position: relative !important;
  z-index: 1 !important;
  min-height: 100vh !important;
}

/* Espacio inferior SOLO el necesario para bottom nav */
.lfh-shell{
  padding-bottom: calc(var(--lfh-bottom-nav-h) + 24px + env(safe-area-inset-bottom)) !important;
}

/* =========================
   LOGO
   ========================= */
.lfh-logo{
  width: 150px;
  height: auto;
  display: block;
  margin: 0 auto 18px auto;
  opacity: .98;
}

/* =========================
   CONTENEDOR / GLASS CARD
   ========================= */
.lfh-glass{
  border-radius: 22px;
  background: var(--lfh-glass);
  border: 1px solid var(--lfh-glass-border);
  backdrop-filter: blur(10px);
}

/* =========================
   TIPOGRAFÍA
   ========================= */
.lfh-title{
  color: var(--lfh-text);
  font-weight: 900;
}
.lfh-subtitle{
  color: var(--lfh-text-soft);
}

/* =========================
   BOTONES
   ========================= */
.lfh-btn{
  background: var(--lfh-gold) !important;
  color: var(--lfh-green-ink) !important;
  font-weight: 900;
  border-radius: 16px;
}

.lfh-btn-outline{
  background: transparent !important;
  color: var(--lfh-gold-soft) !important;
  border: 1px solid rgba(201,164,106,.45) !important;
  border-radius: 16px;
}

/* =========================
   INPUTS (Materialize-proof)
   ========================= */

/* Base para cualquier input en .input-field */
.input-field input[type="text"],
.input-field input[type="email"],
.input-field input[type="password"],
.input-field input[type="number"],
.input-field input:not(.browser-default){
  background: rgba(255,255,255,.92) !important;

  /* Matar líneas inferiores de Materialize */
  border: 1px solid rgba(201,164,106,.35) !important;
  border-bottom: 1px solid rgba(201,164,106,.35) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background-image: none !important;

  border-radius: 999px !important;

  height: 52px !important;
  padding: 0 18px !important;
  box-sizing: border-box !important;

  color: rgba(0,0,0,.82) !important;
  caret-color: rgba(0,0,0,.82) !important;
  -webkit-text-fill-color: rgba(0,0,0,.82) !important; /* Safari/iOS */

  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.input-field input::placeholder{
  color: rgba(0,0,0,.35) !important;
  -webkit-text-fill-color: rgba(0,0,0,.35) !important;
}

.input-field label{
  color: rgba(255,255,255,.75) !important;
}

/* Focus */
.input-field input:focus{
  border: 1px solid rgba(201,164,106,.75) !important;
  border-bottom: 1px solid rgba(201,164,106,.75) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Input específico del código (acceso) — sin label, solo placeholder */
.input-field input#codigo{
  background: rgba(255,255,255,.98) !important;
  padding: 0 22px !important;
}
.input-field label[for="codigo"]{
  display: none !important;
}

/* =========================
   VIDEO CONTAINER
   ========================= */
.lfh-video{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(201,164,106,.22);
}

/* =========================
   PILLS / BADGES
   ========================= */
.lfh-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 12px;
  border-radius: 999px;

  background: rgba(201,164,106,.14);
  border: 1px solid rgba(201,164,106,.25);
  color: var(--lfh-text);

  font-size: 13px;
}

/* =========================
   BOTTOM NAV (FINAL LIMPIO)
   - Activo: “sumergido”
   - Inactivo: sin contenedor
   ========================= */
.lfh-bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: var(--lfh-bottom-nav-h);
  padding-bottom: env(safe-area-inset-bottom);

  display: flex;
  align-items: center;
  justify-content: space-evenly;

  background: linear-gradient(180deg, var(--lfh-gold) 0%, var(--lfh-gold-dark) 100%);
  z-index: 9999;
  box-shadow: 0 -6px 20px rgba(0,0,0,.18);
}

.lfh-bottom-nav a{
  width: 56px;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;
  text-decoration: none;

  /* Inactivo NO tiene contenedor */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  transition: all .2s ease;
}

.lfh-bottom-nav a i{
  font-size: 28px;
  color: rgba(31,79,73,.55);
  opacity: .85;
}

.lfh-bottom-nav a.active{
  background: rgba(31,79,73,.18) !important;
  border: 1px solid rgba(31,79,73,.35) !important;
}

.lfh-bottom-nav a.active i{
  color: #163b36;
  opacity: 1;
}

.lfh-bottom-nav a.is-disabled{
  opacity: .55;
  pointer-events: none;
}

.lfh-bottom-nav a span{
  display: none !important;
}

/* =========================
   PEQUEÑOS FIXES GENERALES
   ========================= */

/* Evita que el último card deje margen enorme */
.card:last-child{
  margin-bottom: 0 !important;
}

/* Si Materialize mete underline en inputs por clases raras */
input:not([type]):focus:not([readonly]),
input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]){
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ===== Bottom nav: blindaje final ===== */
.lfh-bottom-nav a,
.lfh-bottom-nav a:hover,
.lfh-bottom-nav a:focus{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Inactivo = sin contenedor */
.lfh-bottom-nav a.inactive{
  background: transparent !important;
  border: 0 !important;
}
.lfh-bottom-nav a.inactive i{
  color: rgba(31,79,73,.55) !important;
  opacity: .85 !important;
}

/* Activo = “sumergido” */
.lfh-bottom-nav a.active{
  background: rgba(31,79,73,.18) !important;
  border: 1px solid rgba(31,79,73,.35) !important;
}
.lfh-bottom-nav a.active i{
  color: #163b36 !important;
  opacity: 1 !important;
}