/* ============================================================================
   LOTÉALO — Tema de marca (manual v1.0)
   Paleta oficial:
     Azul petróleo  #2B3E4A  (confianza, tecnología, control)
     Verde esmeralda #005F4B (terreno, crecimiento, estabilidad)
     Dorado arena   #C9A76D  (valor, inversión, rentabilidad)
     Blanco cálido  #FAFAF8  (claridad, orden, espacio)
   Tipografía: Montserrat (auto-hospedada para respetar la CSP).
   ============================================================================ */

@font-face { font-family:'Montserrat'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/fonts/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-weight:500; font-style:normal; font-display:swap;
  src:url('/fonts/Montserrat-Medium.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/fonts/Montserrat-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/fonts/Montserrat-Bold.ttf') format('truetype'); }

:root {
  --lot-azul:   #2B3E4A;
  --lot-verde:  #005F4B;
  --lot-oro:    #C9A76D;
  --lot-blanco: #FAFAF8;

  /* Bootstrap toma esta variable en 5.3 para toda la tipografía. */
  --bs-body-font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-primary: #2B3E4A;
  --bs-primary-rgb: 43, 62, 74;
  --bs-link-color: #005F4B;
  --bs-link-hover-color: #00473a;
}

body { background-color: var(--lot-blanco) !important; }

/* Navbar de marca (azul petróleo). */
.bg-lotealo { background-color: var(--lot-azul) !important; }
.navbar-brand img { display:block; }

/* Botones primarios → azul petróleo. */
.btn-primary {
  --bs-btn-bg: #2B3E4A; --bs-btn-border-color: #2B3E4A;
  --bs-btn-hover-bg: #22323c; --bs-btn-hover-border-color: #22323c;
  --bs-btn-active-bg: #1b2830; --bs-btn-active-border-color: #1b2830;
  --bs-btn-disabled-bg: #2B3E4A; --bs-btn-disabled-border-color: #2B3E4A;
}
.btn-outline-primary {
  --bs-btn-color: #2B3E4A; --bs-btn-border-color: #2B3E4A;
  --bs-btn-hover-bg: #2B3E4A; --bs-btn-hover-border-color: #2B3E4A;
  --bs-btn-active-bg: #2B3E4A; --bs-btn-active-border-color: #2B3E4A;
}
/* Éxito / confirmaciones → verde esmeralda. */
.btn-success {
  --bs-btn-bg: #005F4B; --bs-btn-border-color: #005F4B;
  --bs-btn-hover-bg: #004b3b; --bs-btn-hover-border-color: #004b3b;
  --bs-btn-active-bg: #003b2f; --bs-btn-active-border-color: #003b2f;
}
.btn-outline-success {
  --bs-btn-color: #005F4B; --bs-btn-border-color: #005F4B;
  --bs-btn-hover-bg: #005F4B; --bs-btn-hover-border-color: #005F4B;
}
/* Acento dorado (llamados de valor / advertencias suaves). */
.btn-warning {
  --bs-btn-bg: #C9A76D; --bs-btn-border-color: #C9A76D; --bs-btn-color: #2B3E4A;
  --bs-btn-hover-bg: #bd9857; --bs-btn-hover-border-color: #bd9857; --bs-btn-hover-color: #2B3E4A;
  --bs-btn-active-bg: #b08b45; --bs-btn-active-color: #2B3E4A;
}

/* Texto/insignias/enlaces de marca. */
.text-primary { color: #2B3E4A !important; }
.text-success { color: #005F4B !important; }
.badge.text-bg-primary { background-color: #2B3E4A !important; }
.badge.text-bg-success { background-color: #005F4B !important; }
a { color: #005F4B; }
a:hover { color: #00473a; }
.navbar-brand, a.navbar-brand:hover { color: #fff; }

/* Barras de progreso, foco y acentos varios. */
.progress-bar { background-color: #2B3E4A; }
.form-control:focus, .form-select:focus {
  border-color: #7fb3a5; box-shadow: 0 0 0 .2rem rgba(0, 95, 75, .15);
}
.table > :not(caption) > * > * { --bs-table-accent-bg: transparent; }

/* Titulares en Montserrat SemiBold/Bold. */
h1, h2, h3, .h1, .h2, .h3, .navbar-brand { font-weight: 600; }

/* ============================================================================
   Pantallas de acceso (login, recuperación, verificación) — layout partido.
   Izquierda: panel de marca con degradado y trama de lotización.
   Derecha: formulario sobre blanco cálido. En móvil se apila y el panel de
   marca queda reducido a una cabecera compacta.
   ========================================================================== */

html, body { height: 100%; }
.acceso { min-height: 100vh; align-items: stretch; }

@media (min-width: 992px) {
  .acceso-marca, .acceso-form { min-height: 100vh; }
}

.acceso-marca {
  background:
    linear-gradient(135deg, #2B3E4A 0%, #24404A 45%, #005F4B 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Trama sutil de manzanas y calles: refuerza el concepto de lotización. */
.acceso-marca::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 20% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 90% at 20% 30%, #000 30%, transparent 75%);
}

.acceso-marca > * { position: relative; z-index: 1; }

.acceso-eyebrow {
  color: #C9A76D; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; font-size: .78rem; margin-bottom: 1rem;
}
.acceso-titular { font-weight: 700; line-height: 1.15; font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.acceso-bajada  { color: rgba(255,255,255,.78); max-width: 34rem; }
.acceso-pie     { color: rgba(255,255,255,.45); font-size: .8rem; }
.acceso-logo    { width: 240px; max-width: 60%; height: auto; }
.acceso-olvide  { white-space: nowrap; }

.acceso-form { background: var(--lot-blanco); }
.acceso-caja  { width: 100%; max-width: 30rem; }
.acceso-caja .card { border-radius: .9rem; }
.acceso-caja .form-label { font-weight: 600; font-size: .9rem; }
.acceso-caja .form-control { padding: .65rem .85rem; }

.btn-acceso {
  --bs-btn-bg: #005F4B; --bs-btn-border-color: #005F4B; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #004b3b; --bs-btn-hover-border-color: #004b3b; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #003b2f; --bs-btn-active-border-color: #003b2f;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .6rem 1.6rem;
}

@media (max-width: 991.98px) {
  .acceso { min-height: auto; }
  .acceso-marca { padding: 1.75rem 1.25rem !important; }
  .acceso-marca .acceso-titular { font-size: 1.5rem; }
  .acceso-marca .acceso-bajada, .acceso-marca .acceso-pie { display: none; }
  .acceso-marca .acceso-logo { max-width: 180px; }
}