/* ═══════════════════════════════════════════════════════════════
   assets/css/base.css
   Reset, variables CSS globales y tipografía base.
   Importado por TODOS los módulos — cambios aquí afectan toda la app.

   Uso: <link rel="stylesheet" href="/assets/css/base.css">
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables globales ─────────────────────────────────────── */
:root {
  /* Colores principales */
  --color-primary:     #1a1a2e;   /* Fondo oscuro — navbar, headers */
  --color-accent:      #c9a84c;   /* Dorado — botones primarios, highlights */
  --color-accent-dark: #a8863a;   /* Dorado oscuro — hover de botones */
  --color-bg:          #f5f5f5;   /* Fondo general de página */
  --color-surface:     #ffffff;   /* Cards, modales, formularios */
  --color-border:      #e0e0e0;   /* Bordes suaves */

  /* Texto */
  --color-text:        #1a1a1a;   /* Texto principal */
  --color-text-soft:   #666666;   /* Texto secundario, labels */
  --color-text-muted:  #999999;   /* Texto desactivado, placeholders */

  /* Estados */
  --color-success:     #4caf50;
  --color-warning:     #ff9800;
  --color-error:       #f44336;
  --color-info:        #2196f3;

  /* Tipografía */
  --font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;

  /* Espaciado */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

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

  /* 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);

  /* Transiciones */
  --transition: .2s ease;

  /* Layout */
  --max-width:      480px;   /* Ancho máximo mobile-first */
  --navbar-height:  56px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size-md);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

ul, ol { list-style: none; }

/* ── Tipografía ─────────────────────────────────────────────── */
h1 { font-size: var(--font-size-xl); font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--font-size-lg); font-weight: 600; line-height: 1.3; }
h3 { font-size: var(--font-size-md); font-weight: 600; }

p { margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }

small { font-size: var(--font-size-sm); }

/* ── Layout base mobile-first ───────────────────────────────── */
.page-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  padding-bottom: calc(var(--navbar-height) + var(--space-lg));
}

.page-wrapper--full {
  max-width: 100%;
  padding: 0;
}

/* ── Utilidades ─────────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-soft    { color: var(--color-text-soft); }
.text-muted   { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-error   { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-sm      { font-size: var(--font-size-sm); }
.text-xs      { font-size: var(--font-size-xs); }
.text-bold    { font-weight: 700; }

.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }

.hidden  { display: none !important; }
.visible { display: block !important; }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-gap-sm { gap: var(--space-sm); }
.flex-gap-md { gap: var(--space-md); }
.flex-1      { flex: 1; }

/* ── Spinner de carga ───────────────────────────────────────── */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: var(--space-xl) auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Estado vacío ───────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  color: var(--color-text-muted);
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: var(--space-md); }
.empty-state p { font-size: var(--font-size-sm); }