/* ============================================================
   Alliance Savate International — Paquete de diseño compartido
   Tokens + UI kit. Servido por asi; los subdominios lo enlazan:
     <link rel="stylesheet" href="https://alliance-savate-international.org/assets/css/asi-theme.css">
   Fuente única de verdad del tema ASI (no duplicar).
   ============================================================ */

:root {
  /* Colores */
  --color-primary:        #1A3567;
  --color-primary-light:  #2356A8;
  --color-primary-dark:   #12244A;
  --color-primary-pale:   #EEF2FA;
  --color-secondary:      #C8102E;
  --color-secondary-dark: #A50D26;
  --color-accent:         #E8A020;
  --color-white:          #FFFFFF;
  --color-bg:             #F5F7FA;
  --color-bg-alt:         #EAECF0;
  --color-text:           #1A1A2E;
  --color-text-muted:     #6B7280;
  --color-border:         #D1D5DB;
  --color-success:        #059669;
  --color-success-pale:   #ECFDF5;
  --color-warning:        #D97706;
  --color-warning-pale:   #FFFBEB;
  --color-danger:         #DC2626;
  --color-danger-pale:    #FEF2F2;

  /* Tipografía */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs:.75rem; --font-size-sm:.875rem; --font-size-md:1rem;
  --font-size-lg:1.125rem; --font-size-xl:1.25rem; --font-size-2xl:1.5rem;
  --font-size-3xl:2rem; --font-size-4xl:2.5rem;

  /* Espaciado */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;

  /* Bordes */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:9999px;

  /* Sombras */
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:0 8px 24px rgba(0,0,0,.12);
  --shadow-xl:0 20px 48px rgba(0,0,0,.15);

  /* Transiciones / layout */
  --transition-fast:.15s ease; --transition-normal:.25s ease;
  --navbar-h:68px; --sidebar-w:248px; --container:1200px;
}

/* ── Base ──────────────────────────────────────────────── */
.asi *, .asi *::before, .asi *::after { box-sizing: border-box; }
.asi {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}
.asi h1,.asi h2,.asi h3,.asi h4 { color: var(--color-primary); line-height: 1.25; margin: 0 0 .5rem; }
.asi a { color: var(--color-secondary); text-decoration: none; }
.asi a:hover { text-decoration: underline; }
.asi .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-4); }
.asi .text-muted { color: var(--color-text-muted); }

/* ── Botones ───────────────────────────────────────────── */
.asi .btn {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 600;
  padding: .55rem 1.1rem; border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none; line-height: 1.2;
}
.asi .btn:hover { text-decoration: none; }
.asi .btn-primary   { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.asi .btn-primary:hover { background: var(--color-primary-light); border-color: var(--color-primary-light); color:#fff; }
.asi .btn-secondary { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
.asi .btn-secondary:hover { background: var(--color-secondary-dark); border-color: var(--color-secondary-dark); color:#fff; }
.asi .btn-accent    { background: var(--color-accent); color: #1A1A2E; border-color: var(--color-accent); }
.asi .btn-outline   { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.asi .btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.asi .btn-ghost     { background: transparent; border-color: transparent; color: var(--color-primary); }
.asi .btn-success   { background: var(--color-success); color:#fff; border-color: var(--color-success); }
.asi .btn-danger    { background: var(--color-danger); color:#fff; border-color: var(--color-danger); }
.asi .btn-sm { padding: .35rem .7rem; font-size: var(--font-size-xs); }
.asi .btn-lg { padding: .75rem 1.5rem; font-size: var(--font-size-md); }
.asi .btn-block { display: flex; width: 100%; }

/* ── Tarjetas ──────────────────────────────────────────── */
.asi .card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.asi .card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); font-weight: 700; color: var(--color-primary); }
.asi .card-body { padding: 1.25rem; }
.asi .card-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--color-border); }

/* ── Badges ────────────────────────────────────────────── */
.asi .badge { display: inline-block; font-size: var(--font-size-xs); font-weight: 700; padding: .25rem .6rem; border-radius: var(--radius-full); }
.asi .badge-primary { background: var(--color-primary-pale); color: var(--color-primary); }
.asi .badge-secondary { background: var(--color-danger-pale); color: var(--color-secondary); }
.asi .badge-accent { background: #FDF2DC; color: #92600A; }
.asi .badge-success { background: var(--color-success-pale); color: var(--color-success); }
.asi .badge-warning { background: var(--color-warning-pale); color: var(--color-warning); }
.asi .badge-danger { background: var(--color-danger-pale); color: var(--color-danger); }
.asi .badge-neutral { background: var(--color-bg-alt); color: var(--color-text-muted); }

/* ── Alertas ───────────────────────────────────────────── */
.asi .alert { padding: .8rem 1rem; border-radius: var(--radius-md); border: 1px solid transparent; font-size: var(--font-size-sm); }
.asi .alert-success { background: var(--color-success-pale); border-color: #A7F3D0; color: #065F46; }
.asi .alert-warning { background: var(--color-warning-pale); border-color: #FDE68A; color: #92400E; }
.asi .alert-danger  { background: var(--color-danger-pale); border-color: #FECACA; color: #991B1B; }
.asi .alert-info    { background: var(--color-primary-pale); border-color: #C7D7F0; color: var(--color-primary); }

/* ── Formularios ───────────────────────────────────────── */
.asi .form-group { margin-bottom: 1rem; }
.asi .form-label { display: block; font-weight: 600; font-size: var(--font-size-sm); margin-bottom: .35rem; }
.asi .form-control {
  width: 100%; padding: .55rem .75rem; font-family: var(--font-sans); font-size: var(--font-size-sm);
  color: var(--color-text); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.asi .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(26,53,103,.12); }

/* ── Tablas ────────────────────────────────────────────── */
.asi table.asi-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.asi table.asi-table thead tr { background: var(--color-bg-alt); text-align: left; }
.asi table.asi-table th, .asi table.asi-table td { padding: .7rem 1rem; }
.asi table.asi-table tbody tr { border-top: 1px solid var(--color-border); }

/* ── Utilidades ────────────────────────────────────────── */
.asi .d-flex { display: flex; }
.asi .gap-2 { gap: .5rem; } .asi .gap-3 { gap: .75rem; } .asi .gap-4 { gap: 1rem; }
.asi .flex-wrap { flex-wrap: wrap; }
.asi .items-center { align-items: center; }
.asi .justify-between { justify-content: space-between; }