/* ============================================================
   La Calesita — Design Tokens
   Paleta corporativa: Rojo carnaval + Dorado (tomada del logo)
   ============================================================ */

:root {
  /* Marca */
  --color-primary: #C8202B;
  --color-primary-dark: #7A1319;
  --color-primary-light: #FBE2E2;
  --color-secondary: #57534E;
  --color-accent: #F2B705;

  /* Sidebar */
  --color-sidebar-bg: #1C1917;
  --color-sidebar-bg-hover: #292524;
  --color-sidebar-text: #D6D3D1;
  --color-sidebar-text-muted: #78716C;
  --color-sidebar-active: var(--color-primary);

  /* Superficie */
  --color-background: #F9FAFB;
  --color-surface: #FFFFFF;
  --color-text: #292524;
  --color-text-muted: #78716C;
  --color-border: #E7E5E4;

  /* Estados (semánticos — no decorativos) */
  --color-success: #15803D;
  --color-success-bg: #DCFCE7;
  --color-warning: #D97706;
  --color-warning-bg: #FEF3C7;
  --color-danger: #B91C1C;
  --color-danger-bg: #FEE2E2;
  --color-info: #1D4ED8;
  --color-info-bg: #DBEAFE;

  /* Tipografía */
  --font-sans: 'Segoe UI', -apple-system, BlinkMacSystemFont, Inter, Roboto, Arial, sans-serif;

  /* Espaciado / forma */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06);
  --shadow-md: 0 2px 8px rgba(28, 25, 23, 0.08);

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 0px;
  --navbar-height: 60px;
}

/* Sobreescribe las variables propias de Bootstrap 5.3 para que .btn-primary, .bg-primary,
   .text-primary, .border-primary, etc. hereden la identidad corporativa automáticamente,
   sin tener que tocar cada clase Bootstrap usada en el proyecto una por una. */
:root {
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 200, 32, 43;
  --bs-primary-text-emphasis: var(--color-primary-dark);
  --bs-primary-bg-subtle: var(--color-primary-light);
  --bs-primary-border-subtle: var(--color-primary);
  --bs-link-color: var(--color-primary);
  --bs-link-color-rgb: 200, 32, 43;
  --bs-link-hover-color: var(--color-primary-dark);
  --bs-link-hover-color-rgb: 122, 19, 25;

  --bs-success: var(--color-success);
  --bs-success-rgb: 21, 128, 61;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 185, 28, 28;
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: 217, 119, 6;
  --bs-info: var(--color-info);
  --bs-info-rgb: 29, 78, 216;
}
.btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary-dark); --bs-btn-hover-border-color: var(--color-primary-dark); --bs-btn-active-bg: var(--color-primary-dark); --bs-btn-active-border-color: var(--color-primary-dark); --bs-btn-disabled-bg: var(--color-primary); --bs-btn-disabled-border-color: var(--color-primary); }
.btn-outline-primary { --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary); --bs-btn-active-bg: var(--color-primary); --bs-btn-active-border-color: var(--color-primary); }
.spinner-border.text-primary, .spinner-grow.text-primary { color: var(--color-primary) !important; }

/* Preparado para modo oscuro futuro (no activado todavía) */
[data-theme="dark"] {
  --color-background: #1C1917;
  --color-surface: #292524;
  --color-text: #F5F5F4;
  --color-text-muted: #A8A29E;
  --color-border: #44403C;
}