/* =========================================================
   La Guardiana – CAJA (v4.1 Glass PRO • Full)
   Paleta: Oro, Vino, Cielo, Campo
   Mejores: foco accesible, validación, botones CTA, fixes móviles
========================================================= */
:root{
  --oro:#F5A000;
  --vino:#7A1E26;
  --cielo:#1FB6E5;
  --campo:#2F7D32;
  --hoja:#3FA35A;
  --tinta:#0B0F12;
  --blanco:#FFFFFF;
  --brillo-oro:rgba(245,160,0,.25);
  --borde-menta:rgba(31,182,229,.55);
  --radius:18px;
  --radius-lg:22px;
  --shadow-strong:0 28px 80px rgba(0,0,0,.6);
  --shadow-soft:0 12px 36px rgba(0,0,0,.35);
}

/* ===== Reset sutil ===== */
*{box-sizing:border-box}
img,svg{max-width:100%;height:auto}

/* ===== Fondo + Overlay ===== */
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,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;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(11,15,18,.55) 0%,rgba(122,30,38,.45) 55%,rgba(245,160,0,.30) 100%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(60% 60% at 50% 40%,transparent 0%,transparent 55%,rgba(0,0,0,.35) 100%);
}

/* ===== Header (FIJO) ===== */
.header-lg{
  position:fixed; top:0; left:0; width:100%;
  z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  height:72px; padding:10px 22px; margin:0;
  background:linear-gradient(90deg, rgba(11,15,18,.92), rgba(17,25,32,.90));
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(245,160,0,.25);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.header-left{display:flex;gap:12px;align-items:center}
.header-avatar{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#1b1b1b;font-size:1.25rem;
  background:radial-gradient(100% 100% at 30% 30%,#FFD65A 0%,#F5A000 70%);
  border:1.2px solid rgba(0,0,0,.12);
  box-shadow:0 6px 16px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.35);
}
.header-user{line-height:1.05}
.header-name{
  display:block;font-weight:900;text-transform:uppercase;letter-spacing:.6px;font-size:.98rem;color:#FFD65A;
  text-shadow:0 3px 12px rgba(0,0,0,.45);
}
.header-role{
  display:inline-block;margin-top:2px;font-weight:800;font-size:.78rem;letter-spacing:.3px;color:#FCEFD6;opacity:.95;
}

/* ===== Acciones header ===== */
.header-actions{ display:flex; align-items:center; gap:10px; }
.btn-hdr{
  display:inline-flex; align-items:center; gap:8px;
  height:44px; padding:0 16px;
  border-radius:14px; font-weight:900; letter-spacing:.2px;
  border:1px solid rgba(245,160,0,.35);
  color:#FCEFD6; text-decoration:none;
  background:linear-gradient(135deg,#23272f,#0f1318);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  transition:transform .16s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn-hdr:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  border-color:var(--borde-menta);
  box-shadow:0 14px 30px rgba(0,0,0,.45);
}
.btn-hdr i{font-size:1rem; line-height:1}
.btn-hdr--gold{
  background:linear-gradient(135deg,#FFB200,var(--oro));
  border:none; color:#3E1A00;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:0 12px 26px rgba(245,160,0,.45);
}
.btn-hdr--gold:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:0 16px 34px rgba(245,160,0,.55);
}
.btn-hdr--ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%, rgba(255,255,255,.05) 100%);
  border:1px solid rgba(255,255,255,.35);
  color:#F8E5DB;
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}
.btn-hdr--ghost:hover{
  border-color:rgba(255,255,255,.55);
  box-shadow:0 14px 30px rgba(0,0,0,.4);
}

/* ===== Offset para que el contenido no quede tapado por el header fijo ===== */
main, .container, .container-guardiana{
  padding-top:88px !important;  /* header 72px + margen; ajusta si cambias altura */
}

/* ===== Botón de cierre de sesión clásico (si lo usas) ===== */
.btn-logout{
  background:linear-gradient(180deg,rgba(122,30,38,.30) 0%,rgba(122,30,38,.24) 100%);
  border:1px solid rgba(255,255,255,.35);color:#F8E5DB;font-weight:800;border-radius:14px;padding:10px 16px;
  display:inline-flex;gap:.45rem;align-items:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  box-shadow:0 6px 18px rgba(0,0,0,.28), inset 0 -2px 0 rgba(255,255,255,.12);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-logout:hover{
  transform:translateY(-1px);background:linear-gradient(180deg,rgba(122,30,38,.38) 0%,rgba(122,30,38,.30) 100%);
  border-color:rgba(255,255,255,.55);color:#fff;box-shadow:0 10px 26px rgba(122,30,38,.40);
}

/* ===== Contenedores ===== */
.container{position:relative;z-index:5;min-height:calc(100vh - 96px);display:flex;justify-content:center;align-items:flex-start;padding:24px}
.container-guardiana{max-width:1120px;width:100%}

/* ===== Panel principal ===== */
.panel-card{
  width:100%;border-radius:var(--radius-lg);
  border:1.5px solid rgba(245,160,0,.35);
  background:linear-gradient(165deg,rgba(122,30,38,.70) 0%,rgba(11,15,18,.85) 70%);
  box-shadow:var(--shadow-soft);padding:1.25rem;
}
@media (min-width:768px){.panel-card{padding:1.75rem 2rem}}
.h-title{font-weight:900;letter-spacing:.4px;color:#FFD65A;margin:0;font-size:1.6rem}
.subtle{color:#FCEFD6;opacity:.9;font-weight:700}
.rule-rose{height:3px;background:linear-gradient(90deg,var(--vino),var(--oro) 40%,var(--hoja));border-radius:3px;margin:8px 0 18px}

/* ===== Banners ===== */
.banner{
  border-radius:16px;border:1.5px solid rgba(245,160,0,.35);
  background:linear-gradient(165deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.03) 60%);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden;box-shadow:var(--shadow-soft);
}
.banner-header{
  display:flex;gap:12px;align-items:center;padding:14px 16px;
  background:linear-gradient(90deg,rgba(11,15,18,.85) 0%,rgba(122,30,38,.85) 100%);
  color:#fff;border-bottom:1px solid rgba(245,160,0,.25);
}
.banner-icon{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
}
.banner-title{margin:0;font-size:1rem;text-transform:uppercase;font-weight:900;letter-spacing:.6px;color:#FFD65A}
.banner-sub{margin:0;color:#FCEFD6;opacity:.95;font-size:.95rem}
.banner-body{padding:16px}
.banner-footer{
  border-top:1px dashed rgba(255,255,255,.18);padding:10px 16px;color:#FCEFD6;font-size:.9rem;background:rgba(11,15,18,.35);
}

/* ===== Grid helpers ===== */
.form-grid{display:grid;gap:12px}
@media (min-width:992px){
  .cols-2{grid-template-columns:1fr 1fr}
  .cols-3{grid-template-columns:1fr 1fr 1fr}
}

/* ===== Inputs / selects ===== */
label,.form-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);
}

/* Estados HTML5 nativos */
.form-control:required:invalid,.form-select:required:invalid{
  border-color:rgba(255,160,160,.55);
  box-shadow:0 0 0 2px rgba(255,80,80,.15) inset;
}
.form-control:valid,.form-select:valid{
  border-color:rgba(63,163,90,.55);
}

/* Number inputs */
.input-group{width:100%}
.input-group .form-control,.input-group-text{height:48px;line-height:48px}
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}

/* Autofill */
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;
}

/* Select nativo */
.form-select{appearance:none;-webkit-appearance:none;background-image:none}

/* ===== Botones ===== */
.btn,.btn-primary,.btn-success{width:100%}
.btn-cta{
  font-weight:900;border-radius:12px;padding:12px 0;transition:transform .16s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-dark.btn-cta{
  background:linear-gradient(135deg,#23272f,#0f1318);
  color:#fff;border:1px solid rgba(245,160,0,.25);
  box-shadow:0 12px 26px rgba(0,0,0,.45);
}
.btn-dark.btn-cta:hover{transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 16px 34px rgba(0,0,0,.55)}
.btn-primary{
  background:linear-gradient(135deg,#FFB200,var(--oro));border:none;font-weight:900;font-size:1.06rem;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);
}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 16px 34px rgba(245,160,0,.55)}
.btn-success{
  background:linear-gradient(135deg,var(--campo),var(--hoja));border:none;color:#EFFFF6;font-weight:900;font-size:1.06rem;border-radius:12px;padding:12px 0;
  box-shadow:0 12px 26px rgba(63,163,90,.45);
}
.btn-success:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 16px 34px rgba(63,163,90,.58)}
.btn:disabled,.btn[disabled]{opacity:.8;filter:saturate(.85);cursor:not-allowed}

/* Utilidad usada en HTML */
.gap-12{gap:12px}

/* ===== Tabs ===== */
.nav-tabs{border-color:rgba(245,160,0,.35)!important}
.nav-tabs .nav-link{
  font-weight:900;color:#FCEFD6;border:1px solid rgba(245,160,0,.25)!important;background:rgba(255,255,255,.06);
  margin-right:6px;border-radius:12px 12px 0 0;
}
.nav-tabs .nav-link:hover{filter:brightness(1.04)}
.nav-tabs .nav-link.active{
  color:#3E1A00!important;background:linear-gradient(135deg,#FFB200,var(--oro))!important;border-color:var(--oro)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.tab-pane{padding-top:8px}

/* ===== Alertas (flotante centrada) ===== */
#msgAlert{
  position:fixed;top:25px;left:50%;transform:translateX(-50%);z-index:3000;
  min-width:320px;max-width:600px;text-align:center;border-radius:10px;opacity:.97;
  box-shadow:0 4px 10px rgba(0,0,0,.25);animation:fadeSlideDown .4s ease;
  transition:opacity .5s ease, transform .5s ease;
}
@keyframes fadeSlideDown{
  from{opacity:0;transform:translate(-50%,-15px)} to{opacity:.97;transform:translate(-50%,0)}
}
#msgAlert:not(.show){opacity:0;transform:translate(-50%,-15px)}
.alert-fixed{position:fixed;top:20px;right:20px;z-index:1050;min-width:260px}
.text-shadow-soft{text-shadow:0 2px 6px rgba(0,0,0,.35)}

/* Afinado de colores de texto auxiliar */
.form-text{color:antiquewhite}

/* ===== Select popup nativo (legible) ===== */
.form-select option,select option,optgroup{
  color:#222!important;background:#ffffff!important;
}
.form-select option:checked{background:#ffd36b!important;color:#111!important}
.form-select option:hover{background:#f3f3f3!important}

/* ===== Scrollbar (opc) ===== */
@media (pointer:fine){
  *{scrollbar-width:thin;scrollbar-color:#c7c7c7 transparent}
  *::-webkit-scrollbar{height:10px;width:10px}
  *::-webkit-scrollbar-thumb{border-radius:10px;background:#c7c7c7}
  *::-webkit-scrollbar-track{background:transparent}
}

/* ===== Responsive ===== */
@media (max-width:576px){
  .header-lg{padding:8px 12px;height:64px}
  .header-avatar{width:40px;height:40px;font-size:1.1rem}
  .header-name{font-size:.92rem;letter-spacing:.5px}
  .panel-card{padding:1.2rem}
  #msgAlert{min-width:calc(100% - 24px);left:12px;transform:none}
}

/* ===== Preferencia de movimiento reducido ===== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ===== (Opcional) Tablas – Guardiana Compact ===== */
.table-wrap{
  border-radius:16px; overflow:auto; max-height:62vh;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 36px rgba(0,0,0,.35);
  background:rgba(17,22,27,.65); backdrop-filter: blur(2px);
}
.table-guardiana{ margin:0; color:#EAECEF; font-size:.92rem; width:100%; }
.table-guardiana thead th{
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg,#1f2937,#161d27);
  color:#EDEFF3; border-bottom:1px solid rgba(255,255,255,.12);
  text-transform:uppercase; letter-spacing:.3px; font-weight:900;
  padding:.5rem .65rem; white-space:nowrap;
}
.table-guardiana tbody tr{ background: rgba(35,42,52,.68); }
.table-guardiana tbody tr:nth-child(even){ background: rgba(35,42,52,.52); }
.table-guardiana tbody tr:hover{ background: rgba(31,182,229,.12); }
.table-guardiana td{
  padding:.45rem .65rem; vertical-align:middle; border-color:rgba(255,255,255,.08); white-space:nowrap;
}
/* Scrollbar discreto (opc) */
.table-wrap::-webkit-scrollbar{height:10px;width:10px}
.table-wrap::-webkit-scrollbar-thumb{border-radius:10px;background:#c7c7c7}
.table-wrap::-webkit-scrollbar-track{background:transparent}

/* ===== En móviles: acciones compactas ===== */
@media (max-width: 576px){
  .header-actions{ gap:8px; }
  .btn-hdr{ height:42px; padding:0 14px; }
}
