/**
 * AT TRANSPORTES - Identidad Cromática Corporativa
 * Sistema de Gestión de Reparto ATOQ
 *
 * Manual de Marca - Versión 1.0
 * Abril 2026
 */

:root {
  /* ========================================
     COLORES PRINCIPALES
     ======================================== */

  /* Negro Corporativo - Color Principal */
  --at-black: #000000;

  /* Blanco Institucional - Color Base */
  --at-white: #FFFFFF;

  /* Naranja Logístico - Color de Acción */
  --at-orange: #F97316;
  --at-orange-intense: #EA580C;
  --at-orange-soft: #FB923C;
  --at-orange-light: #FFEDD5;

  /* ========================================
     GRISES ESTRUCTURALES (Secundarios)
     ======================================== */

  --at-gray-darkest: #111827;
  --at-gray-dark: #1F2937;
  --at-gray-medium: #6B7280;
  --at-gray-light: #E5E7EB;
  --at-gray-lightest: #F9FAFB;

  /* ========================================
     COLORES FUNCIONALES (Estados)
     ======================================== */

  /* Entregado - Verde institucional */
  --at-success: #10B981;
  --at-success-light: #D1FAE5;

  /* Fallido - Rojo señalización */
  --at-danger: #EF4444;
  --at-danger-light: #FEE2E2;

  /* En proceso - Naranja logístico */
  --at-warning: var(--at-orange);
  --at-warning-light: var(--at-orange-light);

  /* Información - Azul técnico */
  --at-info: #3B82F6;
  --at-info-light: #DBEAFE;

  /* ========================================
     GRADIENTES CORPORATIVOS
     ======================================== */

  /* Gradiente principal: Negro a Gris Oscuro */
  --at-gradient-primary: linear-gradient(135deg, #000000 0%, #1F2937 100%);

  /* Gradiente de acción: Naranja Intenso a Naranja */
  --at-gradient-action: linear-gradient(135deg, #EA580C 0%, #F97316 100%);

  /* Gradiente sutil: Gris claro a Blanco */
  --at-gradient-subtle: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);

  /* Gradiente header: Negro con overlay naranja */
  --at-gradient-header: linear-gradient(135deg, #000000 0%, #1F2937 80%, #EA580C 100%);

  /* ========================================
     TIPOGRAFÍA
     ======================================== */

  --at-font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --at-font-monospace: "Courier New", Courier, monospace;

  /* ========================================
     ESPACIADO Y MEDIDAS
     ======================================== */

  --at-border-radius: 8px;
  --at-border-radius-large: 12px;
  --at-border-width: 2px;

  /* ========================================
     SOMBRAS
     ======================================== */

  --at-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --at-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --at-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --at-shadow-orange: 0 4px 6px -1px rgba(249, 115, 22, 0.3);
}

/* ========================================
   CLASES UTILITARIAS DE MARCA
   ======================================== */

/* Fondos */
.at-bg-primary { background-color: var(--at-black); }
.at-bg-white { background-color: var(--at-white); }
.at-bg-orange { background-color: var(--at-orange); }
.at-bg-gray-light { background-color: var(--at-gray-light); }

/* Textos */
.at-text-primary { color: var(--at-black); }
.at-text-white { color: var(--at-white); }
.at-text-orange { color: var(--at-orange); }
.at-text-gray { color: var(--at-gray-medium); }

/* Bordes */
.at-border-orange { border-color: var(--at-orange); }
.at-border-black { border-color: var(--at-black); }

/* Botones AT */
.btn-at-primary {
  background: var(--at-gradient-action);
  color: var(--at-white);
  border: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-at-primary:hover {
  background: var(--at-orange-intense);
  color: var(--at-white);
  box-shadow: var(--at-shadow-orange);
  transform: translateY(-2px);
}

.btn-at-secondary {
  background: var(--at-white);
  color: var(--at-black);
  border: var(--at-border-width) solid var(--at-black);
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-at-secondary:hover {
  background: var(--at-black);
  color: var(--at-white);
}

/* Badges AT */
.badge-at-orange {
  background-color: var(--at-orange);
  color: var(--at-white);
}

.badge-at-black {
  background-color: var(--at-black);
  color: var(--at-white);
}

/* Cards AT */
.card-at {
  border: 1px solid var(--at-gray-light);
  border-radius: var(--at-border-radius-large);
  box-shadow: var(--at-shadow-md);
}

.card-at-header {
  background: var(--at-gradient-primary);
  color: var(--at-white);
  border-radius: var(--at-border-radius-large) var(--at-border-radius-large) 0 0;
  padding: 1rem 1.5rem;
  font-weight: 700;
}

/* Elementos de movimiento (líneas diagonales) */
.at-movement-line {
  position: relative;
  overflow: hidden;
}

.at-movement-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    15deg,
    transparent 40%,
    var(--at-orange) 40%,
    var(--at-orange) 60%,
    transparent 60%
  );
  opacity: 0.1;
  animation: move-line 20s linear infinite;
}

@keyframes move-line {
  to {
    left: 100%;
  }
}

/* Navbar AT */
.navbar-at {
  background: var(--at-gradient-header);
  box-shadow: var(--at-shadow-lg);
}

.navbar-at .navbar-brand {
  font-weight: 800;
  color: var(--at-white);
  letter-spacing: 1px;
}

.navbar-at .nav-link {
  color: var(--at-white);
  font-weight: 500;
  transition: color 0.3s ease;
}

.navbar-at .nav-link:hover,
.navbar-at .nav-link.active {
  color: var(--at-orange);
}

/* Footer AT */
.footer-at {
  background: var(--at-black);
  color: var(--at-gray-light);
  padding: 2rem 0;
}

.footer-at a {
  color: var(--at-orange);
  text-decoration: none;
}

.footer-at a:hover {
  color: var(--at-orange-intense);
  text-decoration: underline;
}