/* ================================================================
   TEMA CENTRALIZADO — Billar los petulantes
   Cambia la identidad visual editando SOLO este archivo.
   Marca actual: azul #0218B3.
   ================================================================ */
:root {
  /* ---------- Azul de marca ---------- */
  --brand-50:  #E8EAFB;  /* fondos suaves, badges, filas resaltadas */
  --brand-100: #BBC1F1;  /* bordes claros */
  --brand-300: #7A85E4;  /* acentos suaves */
  --brand-500: #0218B3;  /* PRINCIPAL: barra superior, botones, enlaces activos */
  --brand-700: #01108A;  /* hover y estado activo */
  --brand-900: #000A52;  /* títulos y texto sobre azul claro */

  /* ---------- Colores de estado (solo para su función) ---------- */
  --success:      #1F9D61;  --success-bg: #D9F0E4;  --success-text: #0F6E42;  /* pagado / ok */
  --warn:         #E6A700;  --warn-bg:    #FBEBC8;  --warn-text:    #8A6400;  /* fiado / alerta */
  --danger:       #D23B3B;  --danger-bg:  #F7DCDC;  --danger-text:  #A02020;  /* urgente / anulado */
  --info:         #3E7BC2;

  /* ---------- Superficie y neutros ---------- */
  --bg:        #f4f6fb;
  --card:      #ffffff;
  --text:      #1a2233;
  --text-soft: #5b6472;
  --border:    #e2e6f0;

  /* ---------- Tokens semánticos (usados por styles.css) ---------- */
  --primary:       var(--brand-500);
  --primary-hover: var(--brand-700);
  --topbar-bg:     var(--brand-500);
  --nav-bg:        var(--brand-900);
  --nav-text:      #cfd4f6;
  --link:          var(--brand-500);

  --radius: 12px;
  --shadow: 0 1px 3px rgba(2, 24, 179, .10), 0 1px 2px rgba(0, 0, 0, .05);
}