/* =========================================================
   La Guardiana – Recepción (v3 INTENSA)
   Paleta: Oro Guardiana, Vino Chicha, Cielo Turquesa, Verde Campo
========================================================= */
:root{
  /* Colores marca (tomados de tus imágenes) */
  --oro:    #F5A000;   /* amarillo/mostaza intenso del logo */
  --vino:   #7A1E26;   /* borgoña/chicha profundo del logotipo */
  --cielo:  #1FB6E5;   /* turquesa cielo */
  --campo:  #2F7D32;   /* verde pasto/campo */
  --hoja:   #3FA35A;   /* verde brillante para hover */
  --tinta:  #0B0F12;   /* casi negro para profundidad */
  --blanco: #FFFFFF;

  --brillo-oro: rgba(245,160,0,.25);
  --borde-menta: rgba(31,182,229,.55);

  --radius: 18px;
  --shadow-strong: 0 28px 80px rgba(0,0,0,.6);
  --shadow-soft:   0 12px 36px rgba(0,0,0,.35);
}

/* =========================
   Fondo + Overlay cálido
========================= */
body{
  font-family:'Inter',system-ui,sans-serif;
  margin:0; min-height:100vh; color:var(--blanco);
  background:url("../img/Fondo_Login_LG.png") center/cover no-repeat fixed;
  position:relative;
}
.bg-overlay{
  position:fixed; inset:0;
  /* degradiente cálido que potencia los amarillos y mantiene el cielo vivo */
  background:
    linear-gradient(180deg,
      rgba(11,15,18,.55) 0%,
      rgba(122,30,38,.45) 55%,
      rgba(245,160,0,.30) 100%);
  z-index:0;
}

/* =========================
   Header
========================= */
header{
  position:fixed; left:0; right:0; top:0; height:72px; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 2rem; background:transparent!important; border:none!important;
}
.icono-usuario{
  font-size:2.6rem; color:var(--oro);
  text-shadow:0 4px 14px rgba(0,0,0,.45);
  transition:transform .25s ease, color .25s ease;
}
.icono-usuario:hover{ transform:scale(1.06); color:#FFD65A; }
header strong{ font-weight:800; color:#FFD65A; letter-spacing:.2px; }
header small{ color:#FCEFD6; opacity:.95; }

/* Cerrar sesión: vino con brillo oro */
.btn-logout{
  background: rgba(122,30,38,.18);
  border: 1px solid rgba(122,30,38,.55);
  color:#FFD2BF; font-weight:700; border-radius:12px; padding:8px 14px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: all .22s ease;
}
.btn-logout i{ margin-right:.35rem; }
.btn-logout:hover{
  background: rgba(122,30,38,.28);
  border-color: var(--vino);
  color: var(--blanco);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(122,30,38,.45);
}

/* =========================
   Contenedor
========================= */
.container{
  position:relative; z-index:5;
  min-height:100vh; display:flex; justify-content:center; align-items:center;
  padding-top:104px; padding-bottom:2rem;
}

/* =========================
   Card – vino → tinta con borde oro
========================= */
.form-card{
  width:100%; max-width:520px; padding:2.1rem; border-radius:var(--radius);
  background:
    linear-gradient(165deg, rgba(122,30,38,.86) 0%, rgba(11,15,18,.88) 65%);
  border:1.5px solid rgba(245,160,0,.35);
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.form-card:hover{ transform:translateY(-3px); border-color:rgba(245,160,0,.55); }
.form-card h2{
  text-align:center; font-weight:900; letter-spacing:.4px; margin-bottom:1.2rem;
  color:#FFD65A; text-shadow:0 4px 14px rgba(0,0,0,.5);
}

/* =========================
   Inputs
========================= */
label{ font-weight:800; color:#FFF5DC; margin-bottom:.35rem; }

.input-group-text{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(245,160,0,.35);
  border-right:none; color:#FFD65A;
  border-radius:12px 0 0 12px; font-size:1.12rem; min-width:50px;
  display:flex; align-items:center; justify-content:center;
}

.form-control,.form-select{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(245,160,0,.35);
  color:#fff; border-radius:0 12px 12px 0; caret-color:var(--cielo);
}
.form-control::placeholder{ color:#F8E5B8; opacity:.9; }

.form-control:focus,.form-select:focus{
  color:#fff!important; outline:none;
  border-color: var(--borde-menta);
  box-shadow: 0 0 0 4px rgba(31,182,229,.22), 0 0 22px rgba(245,160,0,.28);
  background: rgba(255,255,255,.10);
}

.input-group{ width:100%; }
.input-group .form-control,.input-group-text{ height:48px; line-height:48px; }
.col-6 .input-group{ display:flex; width:100%; }
.col-6 .input-group>.form-control{ flex:1 1 auto; width:1%; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type="number"]{ -moz-appearance:textfield; }
input:-webkit-autofill{
  -webkit-text-fill-color:#fff!important;
  -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.06) inset!important;
  box-shadow:0 0 0 1000px rgba(255,255,255,.06) inset!important;
}

/* =========================
   Botones (oro y verde campo)
========================= */
.btn-primary{
  /* Agregar a la lista */
  background: linear-gradient(135deg, #FFB200, var(--oro));
  border:none; font-weight:900; font-size:1.08rem; border-radius:12px; padding:12px 0;
  color:#3E1A00;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: 0 12px 26px rgba(245,160,0,.45);
  transition: transform .16s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{
  transform: translateY(-2px); filter: brightness(1.05);
  box-shadow: 0 16px 34px rgba(245,160,0,.55);
}

/* Ver lista */
.btn-success{
  background: linear-gradient(135deg, var(--campo), var(--hoja));
  border:none; font-weight:900; font-size:1.08rem; border-radius:12px; padding:12px 0;
  color:#EFFFF6; box-shadow:0 12px 26px rgba(63,163,90,.45);
  transition: transform .16s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-success:hover{
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow:0 16px 34px rgba(63,163,90,.58);
}

/* Deshabilitado */
.btn:disabled, .btn[disabled]{ opacity:.8; filter:saturate(.85); cursor:not-allowed; }

/* =========================
   Utilidades
========================= */
.text-shadow-soft{ text-shadow:0 2px 6px rgba(0,0,0,.35); }
header.bg-light, header.border-bottom{ background:transparent!important; border:none!important; }

/* =========================
   Responsive
========================= */
@media (max-width:576px){
  header{ padding:0 1rem; height:64px; }
  .icono-usuario{ font-size:2.2rem; }
  .form-card{ padding:1.6rem; max-width:100%; }
}
