/* =====================================================================
   RECAUDAZ - base.css
   Reset + variables de diseño (tokens) + tipografia + utilidades.
   ===================================================================== */

:root {
  /* Paleta - identidad real de Recaudaz: verde lima + negro (ver
     recaudaz.com). --rz-primary es el lima de marca: se usa para fills
     solidos (botones, badges, gradientes) SIEMPRE con texto oscuro encima,
     nunca como color de texto sobre fondo claro (no tiene contraste
     suficiente para eso). --rz-primary-dark es un verde oliva profundo:
     es el que se usa como texto/borde legible (links, estados activos,
     texto sobre fondos claros tipo --rz-primary-light). */
  --rz-primary: #C6F135;
  --rz-primary-hover: #B3DE29; /* fill un poco mas oscuro para :hover, sigue admitiendo texto oscuro encima */
  --rz-primary-dark: #587A16;
  --rz-primary-light: #F3FBDA;
  --rz-ink-on-primary: #14162B; /* texto sobre fills solidos de --rz-primary (nunca blanco: el lima es muy claro) */
  --rz-accent: #16A34A;      /* credito / positivo */
  --rz-accent-light: #E7F7EC;
  --rz-warning: #F59E0B;     /* USD / pendiente */
  --rz-warning-light: #FEF3E2;
  --rz-danger: #DC2626;
  --rz-danger-light: #FDEAEA;

  --rz-bg: #F5F6FB;
  --rz-surface: #FFFFFF;
  --rz-surface-alt: #FAFAFE;
  --rz-border: #E8E9F3;
  --rz-text: #14162B;
  --rz-text-muted: #6B7080;
  --rz-text-faint: #9497A8;

  --rz-radius-lg: 22px;
  --rz-radius-md: 16px;
  --rz-radius-sm: 10px;
  --rz-radius-pill: 999px;

  --rz-shadow-sm: 0 1px 2px rgba(20, 22, 43, 0.06);
  --rz-shadow-md: 0 8px 24px rgba(20, 22, 43, 0.08);
  --rz-shadow-lg: 0 16px 40px rgba(20, 22, 43, 0.12);

  --rz-space-1: 4px;
  --rz-space-2: 8px;
  --rz-space-3: 12px;
  --rz-space-4: 16px;
  --rz-space-5: 24px;
  --rz-space-6: 32px;
  --rz-space-7: 48px;

  --rz-max-width: 480px;      /* ancho "mobile" centrado en desktop */
  --rz-max-width-wide: 1180px; /* paneles admin / responsable */

  --rz-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--rz-font);
  background: var(--rz-bg);
  color: var(--rz-text);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { margin: 0 0 var(--rz-space-2); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p { margin: 0 0 var(--rz-space-3); color: var(--rz-text-muted); }

a { color: var(--rz-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

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

ul { margin: 0; padding: 0; list-style: none; }

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

::selection { background: var(--rz-primary-light); color: var(--rz-primary-dark); }

/* ---------------------------------------------------------------------
   Utilidades
   --------------------------------------------------------------------- */
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-gap-1 { gap: var(--rz-space-1); }
.u-gap-2 { gap: var(--rz-space-2); }
.u-gap-3 { gap: var(--rz-space-3); }
.u-gap-4 { gap: var(--rz-space-4); }
.u-mt-1 { margin-top: var(--rz-space-1); }
.u-mt-2 { margin-top: var(--rz-space-2); }
.u-mt-3 { margin-top: var(--rz-space-3); }
.u-mt-4 { margin-top: var(--rz-space-4); }
.u-mt-5 { margin-top: var(--rz-space-5); }
.u-mt-6 { margin-top: var(--rz-space-6); }
.u-mb-0 { margin-bottom: 0; }
.u-mb-2 { margin-bottom: var(--rz-space-2); }
.u-mb-3 { margin-bottom: var(--rz-space-3); }
.u-mb-4 { margin-bottom: var(--rz-space-4); }
.u-w-full { width: 100%; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-text-muted { color: var(--rz-text-muted); }
.u-text-faint { color: var(--rz-text-faint); }
.u-text-accent { color: var(--rz-accent); }
.u-text-danger { color: var(--rz-danger); }
.u-text-primary { color: var(--rz-primary-dark); }
.u-text-sm { font-size: 13px; }
.u-text-xs { font-size: 11.5px; }
.u-text-lg { font-size: 18px; }
.u-font-bold { font-weight: 700; }
.u-font-semibold { font-weight: 600; }
.u-nowrap { white-space: nowrap; }
.u-hidden { display: none !important; }

@media (min-width: 720px) {
  .u-md-flex { display: flex; }
  .u-md-hidden { display: none !important; }
}
@media (max-width: 719px) {
  .u-desktop-only { display: none !important; }
}