/* =========================================================
   VIAx – Hoja de estilos unificada
   Paleta + Componentes globales + Pantalla de Login
   ========================================================= */
:root{
  /* Paleta base */
  --ink: #040404;
  --gold-1: rgb(180,164,26);
  --green-1: #36C16B;
  --gray-1: rgb(233,233,230);
  --mint-bg: #E2EBE6;
  --gold-2: rgb(232,186,38);
  --gray-2: #5F6360;
  --brown: rgb(117,63,19);
  --mint-1: #8CE4B4;
  --olive-1: rgb(134,104,29);
  --green-2: #24A04C;
  --olive-2: rgb(135,139,61);

  /* Semánticos */
  --bg-body: var(--mint-bg);
  --text-body: var(--ink);
  --brand-bg: var(--ink);
  --brand-text: #fff;
  --brand-accent: var(--gold-2);

  --btn: var(--green-2);
  --btn-hover: var(--green-1);
  --muted: var(--gray-2);

  --card-bg: #fff;
  --card-border: rgba(0,0,0,.06); /* borde sutil por defecto */
}

/* =========================================================
   Global
   ========================================================= */
html, body {
  height: 100%;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  background: var(--bg-body);
  color: var(--text-body);
}

/* =========================================================
   Navbar (general del sitio)
   ========================================================= */
.navbar-custom {
  background-color: var(--brand-bg) !important;
}
.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: var(--brand-text) !important;
}
.navbar-custom .nav-link:hover{
  color: var(--brand-accent) !important;
}
.brand-logo{
  height: 34px;
  width: auto;
}
.saldo-pill {
  background: rgba(54, 193, 107, .15);
  color: #e9e9e6;
  border: 1px solid rgba(54, 193, 107, .35);
  padding: .15rem .5rem;
  border-radius: .5rem;
  font-size: .85rem;
}

/* =========================================================
   Cards + Métricas + Badges
   ========================================================= */
.card{
  background: var(--card-bg);
  border-color: var(--card-border);
}
.metric-sm .label{
  color: var(--gray-2);
  font-weight: 600;
  margin-right: .25rem;
}
.badge-soft-success{
  background: rgba(36,160,76,.08);
  color: var(--green-2);
  border: 1px solid rgba(36,160,76,.25);
}
.badge-soft-danger{
  background: rgba(232, 86, 60, .08);
  color: #e8563c;
  border: 1px solid rgba(232, 86, 60, .25);
}
.badge-soft-warning{
  background: rgba(232,186,38,.10);
  color: var(--olive-2);
  border: 1px solid rgba(232,186,38,.30);
}

/* =========================================================
   Tablas
   ========================================================= */
.table-hover tbody tr:hover td, 
.table-hover tbody tr:hover th {
  background-color: rgba(36,160,76,.08);
}

/* =========================================================
   Utilerías
   ========================================================= */
.text-olive{ color: var(--olive-1) !important; }
.text-gold { color: var(--gold-2) !important; }
.border-olive { border-color: var(--olive-1) !important; }
.border-mint  { border-color: var(--mint-1) !important; }

/* =========================================================
   Login / Auth
   ========================================================= */
.auth-wrapper{
  min-height: 100vh;
  /* Fondo específico para pantalla de login */
  background: linear-gradient(135deg, var(--mint-bg), #fff);
}

.side-hero{
  background: radial-gradient(1000px 600px at 0% 0%, rgba(36,160,76,.12), transparent),
              linear-gradient(180deg, rgba(232,186,38,.15), transparent 55%),
              linear-gradient(90deg, #f8faf8, #eef5f1);
  padding: 2rem 1rem;
}

.brand-mini{
  display: flex; 
  align-items: center; 
  gap: .6rem;
  color: var(--ink); 
  text-decoration: none; 
  font-weight: 700;
}
.brand-mini img{
  height: 36px; 
  width: auto;
}

.carousel-indicators [data-bs-target]{
  background-color: var(--green-2);
}
.carousel-caption{
  position: static;
  text-align: left;
  color: var(--text-body);
  padding: 0;
}
.carousel-item h3{
  color: var(--ink);
  font-weight: 800;
}
.carousel-item p, 
.carousel-item li{
  color: var(--muted);
}

.pill{
  display: inline-block;
  background: rgba(36,160,76,.08);
  border: 1px solid rgba(36,160,76,.25);
  color: var(--green-2);
  padding: .15rem .5rem;
  border-radius: .5rem;
  font-size: .8rem;
  margin-bottom: .5rem;
}

/* Tarjeta del formulario */
.auth-card{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  border-radius: 16px;
}

/* Botón primario del login */
.btn-brand{
  background: var(--btn);
  border-color: var(--btn);
  color: #fff;
}
.btn-brand:hover{
  background: var(--btn-hover);
  border-color: var(--btn-hover);
  color: #fff;
}

/* Links y notas */
.link-muted{
  color: var(--muted);
  text-decoration: none;
}
.link-muted:hover{
  color: var(--green-2);
}
.small-note{ color: var(--muted); }

/* Responsivo login */
@media (max-width: 991.98px){
  .side-hero{ padding-bottom: 0; }
  .carousel{ margin-top: 1rem; }
}


/* === Centrado vertical del layout de login === */
.auth-wrapper{
  /* usar unidades "seguras" para móviles */
  min-height: 100svh;           /* fallback moderno a 100vh que respeta barras del navegador */
  display: flex;                /* activamos flex en el contenedor */
}

.auth-wrapper > .row{
  flex: 1;
  min-height: 100%;             /* la fila toma el alto disponible */
  align-items: center;          /* <-- centra verticalmente las 2 columnas */
}

/* En móviles suele ser mejor comenzar arriba */
@media (max-width: 991.98px){
  .auth-wrapper > .row{
    align-items: flex-start;
    padding-top: 1rem;
  }
  .auth-card{ margin-top: 1rem; }
}

/* opcional: que la tarjeta no se pegue si hay pantallas muy altas */
.auth-card{
  margin-block: 1rem;
}