/*
 * ┌─────────────────────────────────────────────────────────┐
 * │  ARGOS CAPACITA — Design Tokens v1.0                    │
 * │  Compatible: Bootstrap 4 (admin/AdminLTE) +             │
 * │              Bootstrap 5 (front / storeFront)           │
 * │  Cargar ANTES de adminLT.css / freelance.css            │
 * └─────────────────────────────────────────────────────────┘
 *
 * Prefijo:  --ac-*   (Argos Capacita)
 * Fuente:   IBM Plex Sans (Google Fonts, inyectada en layouts)
 * Anchor:   #008440
 */

/* ═══════════════════════════════════════════════════════════
   1. PALETA — Verde Argos (anclada en #008440 / hsl 142°)
   ═══════════════════════════════════════════════════════════ */
:root {
  --ac-green-50:  #edf9f2;   /* fondos suaves, alertas info */
  --ac-green-100: #c8eed9;   /* badges, pills claros        */
  --ac-green-200: #8fddb4;   /* bordes decorativos          */
  --ac-green-300: #4ec98a;   /* texto decorativo grande     */
  --ac-green-400: #18a85d;   /* links (4.7:1 sobre blanco)  */
  --ac-green-500: #008440;   /* ★ MARCA — color primario    */
  --ac-green-600: #006b35;   /* hover botones (5.8:1)       */
  --ac-green-700: #005529;   /* pressed / activo (7.4:1)    */
  --ac-green-800: #003e1e;   /* texto oscuro, thead         */
  --ac-green-900: #002713;   /* sidebar ítem activo         */

/* ═══════════════════════════════════════════════════════════
   2. ESCALA DE GRISES cálidos (tinte verde 4°)
   ═══════════════════════════════════════════════════════════ */
  --ac-gray-50:  #f7faf8;
  --ac-gray-100: #edf2ef;
  --ac-gray-200: #d8e4dd;
  --ac-gray-300: #bfd0c8;
  --ac-gray-400: #91a89e;
  --ac-gray-500: #64807a;
  --ac-gray-600: #4a6058;
  --ac-gray-700: #364840;
  --ac-gray-800: #253028;
  --ac-gray-900: #141c18;

/* ═══════════════════════════════════════════════════════════
   3. TOKENS SEMÁNTICOS — Colores
   ═══════════════════════════════════════════════════════════ */

  /* — Primario — */
  --ac-primary:        var(--ac-green-500);  /* #008440                     */
  --ac-primary-hover:  var(--ac-green-600);  /* #006b35 (reemplaza #00d165) */
  --ac-primary-active: var(--ac-green-700);  /* #005529                     */
  --ac-primary-light:  var(--ac-green-50);   /* fondos suaves               */
  --ac-primary-on:     #ffffff;              /* texto sobre fondo primario  */

  /* — Superficie / fondo — */
  --ac-bg:         var(--ac-gray-50);   /* fondo de página             */
  --ac-surface:    #ffffff;             /* cards, inputs               */
  --ac-surface-alt:var(--ac-gray-100);  /* filas alternas, tooltips    */
  --ac-border:     var(--ac-gray-200);  /* bordes generales            */
  --ac-border-focus: var(--ac-primary); /* borde al hacer focus        */

  /* — Texto — */
  --ac-text:         var(--ac-gray-900);  /* body text principal  */
  --ac-text-muted:   var(--ac-gray-500);  /* labels secundarios   */
  --ac-text-disabled:var(--ac-gray-400);  /* deshabilitado        */

  /* — Sidebar (reemplaza sidebar-dark-secondary / bg-secondary #6c757d) — */
  --ac-sidebar-bg:             #1a2b21;          /* verde muy oscuro          */
  --ac-sidebar-brand-bg:       #142019;          /* franja del logo           */
  --ac-sidebar-text:           #c5d8cb;          /* texto ítems nav           */
  --ac-sidebar-text-muted:     #7a9e85;          /* iconos inactivos          */
  --ac-sidebar-item-hover:     rgba(0,132,64,.18);
  --ac-sidebar-item-active-bg: var(--ac-primary);
  --ac-sidebar-item-active-tx: #ffffff;

  /* — Estado — */
  --ac-success:       var(--ac-primary);
  --ac-success-light: var(--ac-primary-light);
  --ac-warning:       #d97706;
  --ac-warning-light: #fffbeb;
  --ac-danger:        #dc2626;
  --ac-danger-light:  #fef2f2;
  --ac-info:          #0369a1;
  --ac-info-light:    #eff6ff;

/* ═══════════════════════════════════════════════════════════
   4. TIPOGRAFÍA
   ═══════════════════════════════════════════════════════════ */

  --ac-font:      'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --ac-font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Escala (base 16 px — mínimo para evitar auto-zoom en iOS) */
  --ac-text-xs:   0.75rem;   /*  12px — captions, meta         */
  --ac-text-sm:   0.875rem;  /*  14px — labels, badges         */
  --ac-text-base: 1rem;      /*  16px — body                   */
  --ac-text-md:   1.125rem;  /*  18px — subtítulos             */
  --ac-text-lg:   1.25rem;   /*  20px — card headings          */
  --ac-text-xl:   1.5rem;    /*  24px — section titles         */
  --ac-text-2xl:  1.875rem;  /*  30px — page h1                */
  --ac-text-3xl:  2.25rem;   /*  36px — hero                   */

  /* Pesos */
  --ac-weight-light:    300;
  --ac-weight-regular:  400;
  --ac-weight-medium:   500;
  --ac-weight-semibold: 600;
  --ac-weight-bold:     700;

  /* Interlineado */
  --ac-leading-tight: 1.25;
  --ac-leading-snug:  1.4;
  --ac-leading-base:  1.6;
  --ac-leading-loose: 1.75;

/* ═══════════════════════════════════════════════════════════
   5. ESPACIADO (grilla de 4 px)
   ═══════════════════════════════════════════════════════════ */
  --ac-s1:  0.25rem;  /*  4px */
  --ac-s2:  0.5rem;   /*  8px */
  --ac-s3:  0.75rem;  /* 12px */
  --ac-s4:  1rem;     /* 16px */
  --ac-s5:  1.25rem;  /* 20px */
  --ac-s6:  1.5rem;   /* 24px */
  --ac-s8:  2rem;     /* 32px */
  --ac-s10: 2.5rem;   /* 40px */
  --ac-s12: 3rem;     /* 48px */
  --ac-s16: 4rem;     /* 64px */

/* ═══════════════════════════════════════════════════════════
   6. RADIOS
   ═══════════════════════════════════════════════════════════ */
  --ac-radius-sm:   0.25rem;  /*  4px — badges pequeños         */
  --ac-radius-md:   0.5rem;   /*  8px — botones, inputs, cards  */
  --ac-radius-lg:   0.75rem;  /* 12px — modals, dropdowns       */
  --ac-radius-xl:   1rem;     /* 16px — hero cards              */
  --ac-radius-pill: 9999px;   /* pills, avatares                */

/* ═══════════════════════════════════════════════════════════
   7. SOMBRAS
   ═══════════════════════════════════════════════════════════ */
  --ac-shadow-xs:    0 1px 2px rgba(0,0,0,.05);
  --ac-shadow-sm:    0 1px 3px rgba(0,0,0,.09), 0 1px 2px rgba(0,0,0,.05);
  --ac-shadow-md:    0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --ac-shadow-lg:    0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04);
  --ac-shadow-card:  var(--ac-shadow-sm);
  --ac-shadow-modal: var(--ac-shadow-lg);
  --ac-shadow-focus: 0 0 0 3px rgba(0,132,64,.28); /* ring verde    */

/* ═══════════════════════════════════════════════════════════
   8. TRANSICIONES
   ═══════════════════════════════════════════════════════════ */
  --ac-ease-out: cubic-bezier(0,0,.2,1);
  --ac-dur-fast: 150ms;
  --ac-dur-base: 220ms;
  --ac-t-fast:   150ms cubic-bezier(0,0,.2,1);
  --ac-t-base:   220ms cubic-bezier(0,0,.2,1);

/* ═══════════════════════════════════════════════════════════
   9. ACCESIBILIDAD
   ═══════════════════════════════════════════════════════════ */
  --ac-touch-min: 2.75rem; /* 44px — Apple HIG / WCAG mínimo */

/* ═══════════════════════════════════════════════════════════
   10. PUENTES Bootstrap 5 (--bs-* → --ac-*)
       Permite que utilidades de BS5 usen la paleta Argos
   ═══════════════════════════════════════════════════════════ */
  --bs-primary-rgb:   0, 132, 64;
  --bs-primary:       var(--ac-primary);
  --bs-secondary-rgb: 26, 43, 33;
  --bs-secondary:     var(--ac-sidebar-bg);
  --bs-success-rgb:   0, 132, 64;
  --bs-success:       var(--ac-primary);
  --bs-body-font-family: var(--ac-font);
  --bs-body-font-size:   var(--ac-text-base);
  --bs-body-line-height: var(--ac-leading-base);
  --bs-body-color:       var(--ac-text);
  --bs-body-bg:          var(--ac-bg);
  --bs-border-color:     var(--ac-border);
  --bs-border-radius:    var(--ac-radius-md);
}

/* ═══════════════════════════════════════════════════════════
   CAPA DE APLICACIÓN
   Los selectores aquí deben ir en el <link> que se carga
   DESPUÉS de adminLT.css / app.css para ganar en cascada.
   Si este archivo se carga antes, mover estas reglas a
   argos.css (que ya se carga después de adminLT.css).
   ═══════════════════════════════════════════════════════════ */

/* ── Global body ──────────────────────────────────────────── */
body {
  font-family:      var(--ac-font);
  font-size:        var(--ac-text-base);
  line-height:      var(--ac-leading-base);
  color:            var(--ac-text);
  background-color: var(--ac-bg);
}

/* ── Headings ─────────────────────────────────────────────── */
h1, .h1 { font-size: var(--ac-text-2xl); font-weight: var(--ac-weight-bold);     line-height: var(--ac-leading-tight); }
h2, .h2 { font-size: var(--ac-text-xl);  font-weight: var(--ac-weight-semibold); line-height: var(--ac-leading-snug);  }
h3, .h3 { font-size: var(--ac-text-lg);  font-weight: var(--ac-weight-semibold); line-height: var(--ac-leading-snug);  }
h4, .h4 { font-size: var(--ac-text-md);  font-weight: var(--ac-weight-medium);   }
h5, .h5 { font-size: var(--ac-text-base);font-weight: var(--ac-weight-medium);   }
h6, .h6 { font-size: var(--ac-text-sm);  font-weight: var(--ac-weight-semibold); letter-spacing: .04em; text-transform: uppercase; }

/* ── Links ───────────────────────────────────────────────── */
a             { color: var(--ac-green-400); text-decoration: none; }
a:hover       { color: var(--ac-primary-hover); text-decoration: underline; }

/* ── Botón primario (Bootstrap 4 + 5) ───────────────────── */
.btn-primary,
.btn-primary-argos,
.btn-success {
  background-color: var(--ac-primary);
  border-color:     var(--ac-primary);
  color:            var(--ac-primary-on);
  font-family:      var(--ac-font);
  font-weight:      var(--ac-weight-medium);
  border-radius:    var(--ac-radius-md);
  min-height:       var(--ac-touch-min);
  transition:       background-color var(--ac-t-fast),
                    border-color     var(--ac-t-fast),
                    box-shadow       var(--ac-t-fast);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary-argos:hover,
.btn-primary-argos:focus,
.btn-success:hover,
.btn-success:focus {
  background-color: var(--ac-primary-hover);  /* #006b35 — fix #00d165 */
  border-color:     var(--ac-primary-hover);
  color:            var(--ac-primary-on);
  box-shadow:       var(--ac-shadow-focus);
}
.btn-primary:active,
.btn-primary-argos:active,
.btn-success:active {
  background-color: var(--ac-primary-active) !important;
  border-color:     var(--ac-primary-active) !important;
}
.btn-primary:disabled,
.btn-primary-argos:disabled {
  background-color: var(--ac-green-300);
  border-color:     var(--ac-green-300);
}

/* Botón outline-primary */
.btn-outline-primary {
  color:        var(--ac-primary);
  border-color: var(--ac-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--ac-primary);
  border-color:     var(--ac-primary);
  color:            var(--ac-primary-on);
}

/* Todos los botones */
.btn { min-height: var(--ac-touch-min); }

/* ── Focus ring global ───────────────────────────────────── */
:focus-visible {
  outline:        2px solid var(--ac-primary);
  outline-offset: 2px;
}

/* ── Inputs ──────────────────────────────────────────────── */
.form-control,
.form-select {
  border-color:  var(--ac-border);
  border-radius: var(--ac-radius-md);
  font-family:   var(--ac-font);
  font-size:     var(--ac-text-base);
  min-height:    var(--ac-touch-min);
  transition:    border-color var(--ac-t-fast),
                 box-shadow   var(--ac-t-fast);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ac-border-focus);
  box-shadow:   var(--ac-shadow-focus);
  outline:      none;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  border-radius: var(--ac-radius-md);
  box-shadow:    var(--ac-shadow-card);
  border-color:  var(--ac-border);
}
.card-header {
  font-weight: var(--ac-weight-semibold);
  font-size:   var(--ac-text-base);
  border-color:var(--ac-border);
}

/* ── Tablas ──────────────────────────────────────────────── */
.table thead th {
  background-color: var(--ac-green-50) !important;
  color:            var(--ac-green-800) !important;
  font-weight:      var(--ac-weight-semibold);
  font-size:        var(--ac-text-sm);
  letter-spacing:   .04em;
  text-transform:   uppercase;
  border-color:     var(--ac-green-200) !important;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge-primary,
.badge.bg-primary,
.bg-primary { background-color: var(--ac-primary) !important; }

/* ── Nav Pills ───────────────────────────────────────────── */
.nav-pills .nav-link {
  color:         var(--ac-gray-500);
  border-radius: var(--ac-radius-md);
  transition:    background-color var(--ac-t-fast), color var(--ac-t-fast);
}
.nav-pills .nav-link:not(.active):hover {
  color:            #ffffff !important;
  background-color: var(--ac-primary-hover) !important;  /* fix #00d165 */
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--ac-primary) !important;
  color:            #ffffff !important;
}

/* ── Sidebar AdminLTE ───────────────────────────────────────
   Reemplaza el uso de bg-secondary (#6c757d) en el sidebar.
   Clase aplicada: sidebar-dark-primary-argos (en sidebar.blade.php)
   ─────────────────────────────────────────────────────────── */
.main-sidebar,
.sidebar-dark-primary-argos {
  background-color: var(--ac-sidebar-bg) !important;
}
.sidebar-dark-primary-argos .brand-link,
.sidebar-dark-primary-argos .brand-link:not([class*=navbar]) {
  background-color:  var(--ac-sidebar-brand-bg) !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
  color: #ffffff !important;
}
.sidebar-dark-primary-argos .nav-sidebar .nav-link {
  color:         var(--ac-sidebar-text) !important;
  font-family:   var(--ac-font);
  font-size:     var(--ac-text-sm);
  border-radius: var(--ac-radius-sm);
  transition:    background-color var(--ac-t-fast),
                 color            var(--ac-t-fast);
}
.sidebar-dark-primary-argos .nav-sidebar .nav-link:hover {
  background-color: var(--ac-sidebar-item-hover) !important;
  color: #ffffff !important;
}
.sidebar-dark-primary-argos .nav-sidebar .nav-link.active {
  background-color: var(--ac-sidebar-item-active-bg) !important;
  color:            var(--ac-sidebar-item-active-tx) !important;
  font-weight:      var(--ac-weight-semibold);
}
.sidebar-dark-primary-argos .nav-sidebar .nav-link i {
  color: var(--ac-sidebar-text-muted) !important;
  transition: color var(--ac-t-fast);
}
.sidebar-dark-primary-argos .nav-sidebar .nav-link:hover i,
.sidebar-dark-primary-argos .nav-sidebar .nav-link.active i {
  color: #ffffff !important;
}
/* Texto del menú colapsado */
.sidebar-dark-primary-argos .nav-sidebar .nav-header {
  color: var(--ac-sidebar-text-muted) !important;
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Navbar superior (AdminLTE) ──────────────────────────── */
.main-header.navbar-white,
.main-header.navbar-light {
  border-bottom: 1px solid var(--ac-border);
}

/* ── Alertas / Flash ─────────────────────────────────────── */
.alert-success {
  background-color: var(--ac-green-50);
  border-color:     var(--ac-green-200);
  color:            var(--ac-green-800);
}

/* ── Estado vacío ────────────────────────────────────────── */
.ac-empty-state {
  padding:    var(--ac-s12) var(--ac-s8);
  text-align: center;
  color:      var(--ac-gray-500);
}
.ac-empty-state i,
.ac-empty-state svg {
  font-size: 2.5rem;
  color: var(--ac-gray-400);
  margin-bottom: var(--ac-s4);
}

/* ── Texto utilitario ────────────────────────────────────── */
.text-primary   { color: var(--ac-primary) !important; }
.text-muted     { color: var(--ac-text-muted) !important; }
.border-primary { border-color: var(--ac-primary) !important; }