/* ============================================================
   BASE.CSS — Modo claro. Variables CBDN, reset, tipografia
   Graficas del Caribe — CBDN Academy 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
  --font-display: 'Syne', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'DM Sans', 'Segoe UI', Arial, sans-serif;

  /* Paleta institucional CBDN */
  --color-rojo:        #C41E3A;
  --color-rojo-dark:   #9E1530;
  --color-rojo-glow:   rgba(196, 30, 58, 0.15);
  --color-dorado:      #A8871F;   /* dorado mas oscuro para legibilidad en fondo claro */
  --color-dorado-dim:  #7A6215;
  --color-dorado-glow: rgba(168, 135, 31, 0.15);
  --color-marino:      #1B2A4A;

  /* Superficies — modo claro */
  --surface-page:   #F5F4F0;      /* fondo de pagina: blanco roto calido */
  --surface-hero:   #EEECEA;      /* hero ligeramente mas oscuro */
  --surface-card:   #FFFFFF;      /* cards blancas */
  --surface-card-2: #F9F8F5;      /* card alternada */
  --surface-table:  #FFFFFF;
  --surface-th:     #F0EEE9;      /* header de tabla */
  --surface-header: rgba(245,244,240,0.92);

  /* Texto — modo claro */
  --text-primary:   #1A1A1A;
  --text-secondary: #3D3D3D;
  --text-muted:     #7A7A7A;
  --text-accent:    var(--color-dorado);

  /* Bordes */
  --border-subtle: rgba(26,26,26,0.08);
  --border-mid:    rgba(26,26,26,0.16);
  --border-strong: rgba(26,26,26,0.28);
  --border-dorado: rgba(168,135,31,0.30);

  /* Dimensiones */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Sombras */
  --shadow-card:  0 1px 4px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.05);
  --shadow-rojo:  0 0 16px rgba(196,30,58,0.18);
  --shadow-dorado:0 0 16px rgba(168,135,31,0.15);

  /* Transiciones */
  --transition-fast: 140ms ease;
  --transition-mid:  240ms ease;
  --transition-slow: 380ms ease;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background-color: var(--surface-page);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  color: var(--text-primary);
}

p { color: var(--text-secondary); margin-bottom: 1rem; font-weight: 300; font-size: 0.95rem; }
p:last-child { margin-bottom: 0; }
strong, b { color: var(--text-primary); font-weight: 600; }
a { color: var(--color-rojo); text-decoration: none; }
a:hover { color: var(--color-rojo-dark); }
ul, ol { padding-left: 1.4rem; color: var(--text-secondary); font-size: 0.95rem; }
li { margin-bottom: 0.3rem; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--surface-card-2); }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-rojo); }

/* --- Seleccion --- */
::selection { background: var(--color-rojo); color: #fff; }

/* --- Badge --- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.60rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge--rojo   { background:rgba(196,30,58,0.10); color:var(--color-rojo); border:1px solid rgba(196,30,58,0.25); }
.badge--dorado { background:rgba(168,135,31,0.10); color:var(--color-dorado); border:1px solid var(--border-dorado); }
.badge--gris   { background:rgba(0,0,0,0.05); color:var(--text-muted); border:1px solid var(--border-subtle); }

.section-divider {
  width:100%; height:1px;
  background:linear-gradient(to right, transparent, var(--border-mid) 20%, var(--border-mid) 80%, transparent);
  margin: 1.5rem 0;
}

.text-muted   { color: var(--text-muted); }
.text-dorado  { color: var(--color-dorado); }
.text-rojo    { color: var(--color-rojo); }