/* ============================================================
   base.css  –  Sistema de diseño global Crown / Conalca
   Importado en TODOS los templates vía Base.html
   ============================================================ */

/* ── 1. GOOGLE FONTS ────────────────────────────────────────
   Se importan aquí para que todos los templates los hereden.
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;900&family=Barlow:wght@400;500;600&display=swap');

/* ── 2. DESIGN TOKENS (variables CSS) ───────────────────────
   Cambiar un valor aquí lo cambia en TODA la app.
   ---------------------------------------------------------- */
:root {
  /* Paleta principal */
  --c-bg:        #0f1117;
  --c-surface:   #1a1d27;
  --c-card:      #22263a;
  --c-border:    #2e3350;

  /* Acento naranja de la marca (tomado del login original #fc7a2f) */
  --c-accent:    #f5a623;
  --c-accent-dk: #d4881a;

  /* Acento azul para acciones secundarias */
  --c-accent2:   #3b82f6;

  /* Semánticos */
  --c-success:   #22c55e;
  --c-danger:    #ef4444;
  --c-warn:      #f59e0b;

  /* Texto */
  --c-text:      #f0f2ff;
  --c-muted:     #8891b0;

  /* Tipografía */
  --font-head:   'Barlow Condensed', sans-serif;
  --font-body:   'Barlow', sans-serif;

  /* Espaciado y forma */
  --radius:      14px;
  --radius-sm:   8px;
  --tap:         52px;   /* altura mínima de elementos táctiles en móvil */

  /* Sombras */
  --shadow:      0 4px 24px rgba(0, 0, 0, .45);
  --shadow-sm:   0 2px 10px rgba(0, 0, 0, .3);

  /* Transición base */
  --trans:       .18s ease;
}

/* ── 3. RESET MÍNIMO ─────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Evita zoom involuntario en iOS al hacer foco en inputs */
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
}

/* ── 4. LAYOUT BASE ──────────────────────────────────────── */
.content-body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.content-body-contenido {
  flex: 1;
  /* Cada template hijo se encarga de su propio padding/layout */
}

/* ── 5. NAVBAR ───────────────────────────────────────────── */
/*
  Sobreescribimos Bootstrap .navbar para que encaje con
  nuestro sistema de diseño oscuro.
*/
.navbar {
  background-color: var(--c-surface) !important;
  border-bottom: 1.5px solid var(--c-border);
  padding: 0 16px;
  min-height: 56px;
}

.navbar-brand {
  font-family: var(--font-head) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  color: var(--c-accent) !important;
}

.navbar-nav .nav-link {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-muted) !important;
  padding: 16px 12px !important;
  transition: color var(--trans);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--c-text) !important;
}

/* Línea inferior en el ítem activo */
.navbar-nav .nav-link.active {
  box-shadow: inset 0 -2px 0 var(--c-accent);
}

/* Botón hamburguesa */
.navbar-toggler {
  border-color: var(--c-border) !important;
  padding: 6px 10px;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%238891b0' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* Botón Cerrar / Iniciar Sesión en navbar */
.navbar .btn-secondary {
  background: transparent !important;
  border: 1.5px solid var(--c-border) !important;
  color: var(--c-muted) !important;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--radius-sm) !important;
  padding: 8px 16px !important;
  transition: border-color var(--trans), color var(--trans);
  height: auto !important;
}
.navbar .btn-secondary:hover {
  border-color: var(--c-danger) !important;
  color: var(--c-danger) !important;
}

/* Menú colapsado en móvil */
.navbar-collapse {
  background-color: var(--c-surface);
  border-top: 1px solid var(--c-border);
  margin-top: 4px;
  padding: 8px 0;
}
@media (min-width: 992px) {
  .navbar-collapse {
    background: transparent;
    border-top: none;
    margin-top: 0;
    padding: 0;
  }
}

/* ── 6. SISTEMA DE TOASTS (reemplaza appendAlert) ─────────── */
/*
  Los toasts se inyectan desde base.js en #content-alerts-efc-id.
  Son los únicos mensajes de feedback al usuario.
*/
.content-alerts-efc {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: calc(100vw - 28px);
  max-width: 440px;
}

.alert-toast {
  width: 100%;
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow);
  animation: toastIn .22s ease forwards;
  pointer-events: auto;
}

.alert-toast.success { background: var(--c-success); color: #000; }
.alert-toast.warning { background: var(--c-warn);    color: #000; }
.alert-toast.error   { background: var(--c-danger);  color: #fff; }
.alert-toast.info    { background: var(--c-accent2); color: #fff; }

.alert-toast i { font-size: 18px; flex-shrink: 0; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── 7. SPINNER GLOBAL ───────────────────────────────────── */
/*
  Overlay de carga. Se activa con JS añadiendo clase .show.
  Cada template puede usarlo: document.getElementById('op-spinner').classList.add('show')
*/
.op-spinner-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 23, .75);
  z-index: 9998;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  backdrop-filter: blur(2px);
}
.op-spinner-overlay.show { display: flex; }

.op-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--c-border);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.op-spinner-text {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--c-muted);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 8. COMPONENTES REUTILIZABLES ────────────────────────── */

/* Botón CTA grande — usado en Operativo, Agenda, etc. */
.op-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--trans), transform .1s;
  -webkit-user-select: none;
  user-select: none;
}
.op-cta-btn:active        { opacity: .85; transform: scale(.97); }
.op-cta-btn.iniciar       { background: var(--c-success); color: #000; }
.op-cta-btn.foto          { background: var(--c-accent2); color: #fff; }
.op-cta-btn.accent        { background: var(--c-accent);  color: #000; }
.op-cta-btn i             { font-size: 26px; }

/* Badge de estado */
.op-estado-badge {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
}
.op-estado-badge.pendiente  { background: #2a2010; color: var(--c-warn);    border: 1px solid var(--c-warn); }
.op-estado-badge.iniciado,
.op-estado-badge.en_proceso { background: #102030; color: var(--c-accent2); border: 1px solid var(--c-accent2); }
.op-estado-badge.finalizado { background: #102510; color: var(--c-success); border: 1px solid var(--c-success); }

/* Banner de éxito / finalizado */
.op-done-banner {
  background: #0d2b18;
  border: 1.5px solid var(--c-success);
  border-radius: var(--radius-sm);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.op-done-banner i      { font-size: 44px; color: var(--c-success); }
.op-done-banner strong {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-success);
  letter-spacing: .04em;
}

/* ── 9. FORMULARIOS BASE ─────────────────────────────────── */
/*
  Estilos base para inputs y selects en toda la app.
  Los templates específicos pueden sobreescribir si necesitan.
*/
.base-input {
  width: 100%;
  height: var(--tap);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  padding: 0 14px;
  outline: none;
  transition: border-color var(--trans);
  -webkit-appearance: none;
  appearance: none;
}
.base-input:focus          { border-color: var(--c-accent2); }
.base-input[readonly]      { color: var(--c-muted); cursor: default; }
.base-input::placeholder   { color: var(--c-muted); font-size: 15px; }

.base-select {
  width: 100%;
  height: var(--tap);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  padding: 0 40px 0 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238891b0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
  transition: border-color var(--trans);
}
.base-select:focus { border-color: var(--c-accent2); }

.base-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 6px;
}

/* ── 10. UTILIDADES ──────────────────────────────────────── */
.hidden { display: none !important; }

.section-title {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-muted);
}