/**
 * semar.css
 * ────────────────────────────────────────────────────────────────
 * Sistema de diseño de Semar Logística.
 *
 * Para cambiar la paleta de toda la app, editar las variables
 * --semar-* de :root. Las clases de Bootstrap (bg-primary,
 * btn-primary, bg-dark, etc.) se reescriben para usarlas.
 *
 * Cargar DESPUÉS de Bootstrap para que los overrides ganen.
 */

:root {
  /* ── Marca ───────────────────────────────────────── */
  --semar-green:        #86BC25;   /* verde lima del logo y botones de acción principales */
  --semar-green-dark:   #6BA01F;   /* hover/pressed del verde */
  --semar-green-light:  #A6D947;   /* fondos suaves, badges */

  --semar-blue:         #1B4794;   /* azul corporativo: navbars, headers, links */
  --semar-blue-dark:    #0F2D5B;   /* footer, sombras de profundidad */
  --semar-blue-light:   #3B68B5;   /* hover sobre azul */

  /* ── Neutros ─────────────────────────────────────── */
  --semar-bg:           #F5F7FA;   /* fondo de página */
  --semar-surface:      #FFFFFF;   /* fondo de cards */
  --semar-border:       #E2E8F0;
  --semar-text:         #1F2937;
  --semar-text-dim:     #6B7280;
  --semar-text-faint:   #9CA3AF;

  /* ── Semánticos ──────────────────────────────────── */
  --semar-success:      #16A34A;
  --semar-danger:       #DC2626;
  --semar-warning:      #F59E0B;
  --semar-info:         #0EA5E9;

  /* ── Espaciado y radio ───────────────────────────── */
  --semar-radius-sm: 6px;
  --semar-radius:    10px;
  --semar-radius-lg: 14px;

  --semar-shadow-sm: 0 1px 3px rgba(15, 45, 91, 0.08);
  --semar-shadow:    0 4px 12px rgba(15, 45, 91, 0.10);
  --semar-shadow-lg: 0 10px 30px rgba(15, 45, 91, 0.15);

  /* ── Tipografía ──────────────────────────────────── */
  --semar-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala tipográfica: usar estas variables en componentes nuevos
     para mantener consistencia. Las pantallas viejas siguen usando
     los tamaños de Bootstrap, sin conflicto. */
  --semar-text-xs:   0.75rem;    /* 12px - badges, micro labels */
  --semar-text-sm:   0.8125rem;  /* 13px - secondary text */
  --semar-text-base: 0.90625rem; /* 14.5px - body */
  --semar-text-lg:   1rem;       /* 16px - section titles */
  --semar-text-xl:   1.25rem;    /* 20px - page titles chicas */
  --semar-text-2xl:  1.5rem;     /* 24px - page titles grandes */
  --semar-text-3xl:  2rem;       /* 32px - números KPI grandes */

  --semar-leading-tight: 1.25;
  --semar-leading-base:  1.55;

  /* ── Spacing ─────────────────────────────────────── */
  --semar-space-1: 0.25rem;
  --semar-space-2: 0.5rem;
  --semar-space-3: 0.75rem;
  --semar-space-4: 1rem;
  --semar-space-5: 1.5rem;
  --semar-space-6: 2rem;
  --semar-space-8: 3rem;

  /* ── Superficie secundaria ───────────────────────── */
  /* Usada en headers de tabla, fondos de sección, hovers — da
     jerarquía sin pintar de color de marca. */
  --semar-surface-2: #F8FAFC;
}

/* ── Overrides de Bootstrap ─────────────────────────────────────
   Reescribimos las variables que Bootstrap 5 expone para que las
   clases utility (.bg-primary, .btn-primary, .text-primary, etc.)
   usen automáticamente la marca, sin tener que cambiar el HTML. */
:root {
  --bs-primary:         var(--semar-blue);
  --bs-primary-rgb:     27, 71, 148;
  --bs-success:         var(--semar-green);
  --bs-success-rgb:     134, 188, 37;
  --bs-link-color:      var(--semar-blue);
  --bs-link-hover-color: var(--semar-blue-dark);
  /* Forzamos que las utilities y componentes de Bootstrap usen Inter
     y el tamaño base nuevo sin que cada selector lo tenga que pedir. */
  --bs-font-sans-serif: var(--semar-font-sans);
  --bs-body-font-size:  var(--semar-text-base);
}

/* ── Tipografía base ──────────────────────────────── */
body {
  background-color: var(--semar-bg);
  color: var(--semar-text);
  font-family: var(--semar-font-sans);
  font-size: var(--semar-text-base);
  line-height: var(--semar-leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Navbar (admin) ───────────────────────────────── */
/* Reescribimos el navbar-dark + bg-dark de Bootstrap para que el
   navbar de admin use el azul Semar en vez del negro genérico. */
.navbar.bg-dark,
.navbar-dark {
  /* Azul más oscuro (era el azul medio) — baja el peso visual y se ve
     más sobrio. La banda verde inferior pasa de 3px a 2px por la misma
     razón. */
  background-color: var(--semar-blue-dark) !important;
  border-bottom: 2px solid var(--semar-green);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
.navbar-dark .navbar-brand {
  font-weight: 700;
  letter-spacing: -0.2px;
  font-size: 1.05rem;
}
.navbar-dark .nav-link {
  color: rgba(255,255,255,0.85) !important;
  transition: color .15s ease, background-color .15s ease;
  border-radius: var(--semar-radius-sm);
  padding: 0.45rem 0.85rem !important;
}
.navbar-dark .nav-link:hover {
  background-color: rgba(255,255,255,0.10);
  color: #fff !important;
}
.navbar-dark .nav-link.active {
  background-color: var(--semar-green);
  color: #fff !important;
  font-weight: 600;
}

/* ── Botones ──────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg:               var(--semar-blue);
  --bs-btn-border-color:     var(--semar-blue);
  --bs-btn-hover-bg:         var(--semar-blue-light);
  --bs-btn-hover-border-color: var(--semar-blue-light);
  --bs-btn-active-bg:        var(--semar-blue-dark);
  --bs-btn-active-border-color: var(--semar-blue-dark);
}
.btn-success {
  --bs-btn-bg:               var(--semar-green);
  --bs-btn-border-color:     var(--semar-green);
  --bs-btn-hover-bg:         var(--semar-green-dark);
  --bs-btn-hover-border-color: var(--semar-green-dark);
  --bs-btn-active-bg:        var(--semar-green-dark);
  --bs-btn-active-border-color: var(--semar-green-dark);
}
/* Botón de marca: para CTAs principales que no son ni primary ni success */
.btn-semar {
  background-color: var(--semar-green);
  color: #fff;
  border: none;
  border-radius: var(--semar-radius);
  padding: 0.65rem 1.25rem;
  font-weight: 600;
  transition: background-color .15s ease, transform .15s ease;
}
.btn-semar:hover {
  background-color: var(--semar-green-dark);
  color: #fff;
  transform: translateY(-1px);
}
.btn-semar:active {
  transform: translateY(0);
}

/* ── Botones — defaults modernos ───────────────────
   Bootstrap default es font-weight:400 y radius medio. Subimos a
   peso 500 (más legible) y usamos nuestro radius corto. No tocamos
   colores: btn-primary/btn-success ya están aliasados a marca. */
.btn {
  --bs-btn-border-radius: var(--semar-radius-sm);
  font-weight: 500;
  letter-spacing: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}
.btn-sm {
  --bs-btn-border-radius: var(--semar-radius-sm);
  font-weight: 500;
}

/* ── Cards ────────────────────────────────────────── */
/* Sin box-shadow por default — las cards se distinguen por su borde.
   Las sombras (--semar-shadow*) quedan disponibles para modales,
   dropdowns y la login-card que las usan explícitamente. */
.card {
  border: 1px solid var(--semar-border);
  border-radius: var(--semar-radius-lg);
  box-shadow: none;
  background-color: var(--semar-surface);
}
.card-header {
  border-top-left-radius: var(--semar-radius-lg) !important;
  border-top-right-radius: var(--semar-radius-lg) !important;
  font-weight: 600;
}
.card-header.bg-primary,
.card-header.bg-dark {
  border-bottom: 2px solid var(--semar-green);
}

/* Cards de estadísticas (usadas en dashboards).
   Se eliminó el efecto "se levanta" en hover — se sentía 2018 y es
   innecesario; el feedback ahora es un cambio sutil de color de borde. */
.stats-card {
  border: 1px solid var(--semar-border);
  border-radius: var(--semar-radius-lg);
  background-color: var(--semar-surface);
  box-shadow: none;
  transition: border-color .15s ease;
}
.stats-card:hover {
  border-color: #CBD5E1;
}
.stats-card .stats-value {
  font-size: var(--semar-text-3xl);   /* 32px (era 28px) */
  font-weight: 700;
  color: var(--semar-text);           /* gris oscuro (era azul); el azul se reserva para acentos */
  margin: 0;
  line-height: var(--semar-leading-tight);
  letter-spacing: -0.5px;
}
.stats-card .stats-label {
  font-size: var(--semar-text-xs);
  color: var(--semar-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  font-weight: 600;
}
.stats-card .stats-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--semar-radius);
  background-color: rgba(27, 71, 148, 0.08);
  color: var(--semar-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.stats-card.stats-success .stats-icon {
  background-color: rgba(134, 188, 37, 0.12);
  color: var(--semar-green-dark);
}

/* ── Badges de estado de pedido ───────────────────── */
.badge-estado {
  padding: 0.35em 0.65em;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-estado.estado-pendiente   { background: #FEF3C7; color: #92400E; }
.badge-estado.estado-asignado    { background: rgba(27,71,148,.12); color: var(--semar-blue); }
.badge-estado.estado-en_proceso  { background: rgba(134,188,37,.18); color: var(--semar-green-dark); }
.badge-estado.estado-despachado  { background: #FEF3C7; color: #B45309; }
.badge-estado.estado-entregado   { background: #D1FAE5; color: #065F46; }
.badge-estado.estado-cancelado   { background: #FEE2E2; color: #991B1B; }

/* ── Login ────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, var(--semar-blue) 0%, var(--semar-blue-dark) 100%);
  position: relative;
  overflow: hidden;
  padding: 20px;
}
/* Detalle visual: una banda verde diagonal sutil de fondo */
.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(134,188,37,.18), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(134,188,37,.12), transparent 50%);
  pointer-events: none;
}
.login-card {
  background: #fff;
  border-radius: var(--semar-radius-lg);
  box-shadow: var(--semar-shadow-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
}
.login-card .login-logo {
  text-align: center;
  margin-bottom: 1.75rem;
}
.login-card .login-logo h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.login-card .login-logo h1 .brand-mark {
  color: var(--semar-green);
}
.login-card .login-logo h1 .brand-name {
  color: var(--semar-blue);
}
.login-card .login-logo .login-tagline {
  color: var(--semar-text-dim);
  font-size: 0.85rem;
  margin-top: 0.35rem;
}
.login-card .form-control {
  border-radius: var(--semar-radius-sm);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--semar-border);
}
.login-card .form-control:focus {
  border-color: var(--semar-blue);
  box-shadow: 0 0 0 3px rgba(27, 71, 148, 0.12);
}
.login-card .btn-login {
  width: 100%;
  background-color: var(--semar-green);
  color: #fff;
  border: none;
  border-radius: var(--semar-radius-sm);
  padding: 0.75rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  transition: background-color .15s ease, transform .15s ease;
}
.login-card .btn-login:hover {
  background-color: var(--semar-green-dark);
  transform: translateY(-1px);
}
.login-card .btn-login:active {
  transform: translateY(0);
}

/* ── Tablas ───────────────────────────────────────── */
/* Cambio importante: los headers ya NO son azul Semar con texto blanco.
   Pasan a un gris claro con texto secundario — patrón moderno, baja el
   peso visual y deja respirar la data. Si una pantalla específica
   necesita header azul (raro), lo puede pedir vía clase puntual. */
.table thead th {
  background-color: var(--semar-surface-2);
  color: var(--semar-text-dim);
  font-weight: 600;
  font-size: 0.6875rem;   /* 11px */
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-top: 1px solid var(--semar-border);
  border-bottom: 1px solid var(--semar-border);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.table tbody tr {
  transition: background-color .1s ease;
}
.table tbody tr:hover {
  background-color: var(--semar-surface-2);
}
.table tbody td {
  border-color: var(--semar-border);
  vertical-align: middle;
}

/* ── Avatares ────────────────────────────────────── */
.delivery-avatar {
  background: var(--semar-blue) !important;
}

/* ── Focus accesible y limpio ─────────────────────── */
/* Bootstrap mete un ring de box-shadow grueso por default en muchos
   elementos interactivos. Lo reemplazamos por un outline limpio.
   Los inputs SÍ mantienen el ring sutil (es el patrón moderno). */
:focus-visible {
  outline: 2px solid var(--semar-blue);
  outline-offset: 2px;
}
.btn:focus-visible,
.btn:focus,
a:focus-visible,
.nav-link:focus,
.nav-link:focus-visible {
  box-shadow: none;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--semar-blue);
  box-shadow: 0 0 0 3px rgba(27, 71, 148, 0.12);
  outline: none;
}

/* ── Animación de "live pulse" usada en el navbar y en el tracking en vivo ── */
@keyframes nav-live-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

/* ── Empty state ──────────────────────────────────────
   Para pantallas donde una tabla/listado no tiene resultados.
   Uso esperado:
     <div class="empty-state">
       <div class="empty-icon"><i class="bi bi-inbox"></i></div>
       <div class="empty-title">Sin resultados</div>
       <div class="empty-subtitle">Probá ajustar los filtros</div>
     </div>
*/
.empty-state {
  text-align: center;
  padding: var(--semar-space-8) var(--semar-space-4);
  color: var(--semar-text-dim);
}
.empty-state .empty-icon {
  font-size: 2.5rem;
  color: var(--semar-text-faint);
  margin-bottom: var(--semar-space-3);
}
.empty-state .empty-title {
  font-size: var(--semar-text-lg);
  font-weight: 600;
  color: var(--semar-text);
  margin-bottom: var(--semar-space-2);
}
.empty-state .empty-subtitle {
  font-size: var(--semar-text-sm);
  margin-bottom: var(--semar-space-4);
}

/* ── Skeleton loaders ─────────────────────────────────
   Para mostrar placeholders mientras carga data. Uso esperado:
     <span class="skeleton" style="width:120px; height:1em;"></span>
*/
.skeleton {
  background: linear-gradient(90deg,
    var(--semar-border) 0%,
    var(--semar-surface-2) 50%,
    var(--semar-border) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--semar-radius-sm);
  display: inline-block;
  min-height: 1em;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Section title (encabezado sutil de sección) ──────
   Uso esperado: <div class="section-title">Cobranzas del día</div>
*/
.section-title {
  font-size: var(--semar-text-xs);
  font-weight: 600;
  color: var(--semar-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: var(--semar-space-3);
  padding-bottom: var(--semar-space-2);
  border-bottom: 1px solid var(--semar-border);
}