/* RUAA - paleta Carnaval. Tokens --cv-*, puente Bootstrap, foco y momentos festivos.
   Regla: el color vive en el cromo (sidebar, header, botones, chips, franja, foco);
   los fondos de lectura y el texto largo se mantienen neutros para cumplir WCAG AA. */

/* ===== Capa 1: tokens ===== */
:root, [data-theme="light"] {
  --cv-bg: #FBF5EA; --cv-surface: #FFFFFF; --cv-surface-2: #F3E7D3;
  --cv-text: #1A1316; --cv-text-2: #54444A; --cv-text-muted: #6B5A62;
  --cv-border: #E2D3C0; --cv-border-strong: #8C6E7E;
  --cv-primary: #A8145E; --cv-primary-strong: #8E0F4F; --cv-on-primary: #FFFFFF;
  --cv-secondary: #1E3EA6; --cv-blue: #1E3EA6;
  --cv-green: #4A6A12; --cv-red: #B72A14; --cv-orange: #B34700; --cv-teal: #0B6E73; --cv-violet: #5B2BA8;
  --cv-gold: #F4B41A; --cv-pink: #F0509A; --cv-cyan: #19B5C9;
  --cv-on-festive: #110C14;
  --cv-success-fill: #8CC63F; --cv-warning-fill: #F4B41A; --cv-danger-fill: #B72A14;
  --cv-alert-success-bg: #E3F1D2; --cv-alert-success-text: #2F4A08;
  --cv-alert-warning-bg: #FDEBC2; --cv-alert-warning-text: #6B3D00;
  --cv-alert-danger-bg: #FADCD6;  --cv-alert-danger-text: #8E1F0D;
  --cv-alert-info-bg: #DCE4FB;    --cv-alert-info-text: #16307F;
  --cv-sidebar-start: #1A0F1C; --cv-sidebar-end: #3A0F2E;
  --cv-sidebar-text: #F2E6EC; --cv-sidebar-section: #D4AEC3;
  --cv-sidebar-active-bg: rgba(255,255,255,0.15); --cv-sidebar-hover-bg: rgba(244,180,26,0.14);
  --cv-header-bg: rgba(255,252,246,0.86); --cv-header-border: rgba(168,20,94,0.14);
  --cv-footer-bg: rgba(255,252,246,0.72);
  --cv-card-bg: rgba(255,255,255,0.90); --cv-card-border: rgba(168,20,94,0.12);
  --cv-card-shadow: 0 2px 16px rgba(58,15,46,0.08);
  --cv-input-bg: #FFFFFF; --cv-input-border: #8C6E7E;
  --cv-focus-ring: #1E3EA6; --cv-focus-halo: rgba(30,62,166,0.25);
  --cv-table-head-bg: #F3E7D3; --cv-table-zebra: rgba(168,20,94,0.04); --cv-table-hover: rgba(244,180,26,0.12);
  --cv-grad-hero: linear-gradient(135deg,#A8145E 0%,#B72A14 55%,#B34700 100%);
  --cv-grad-brand: linear-gradient(135deg,#A8145E,#B34700);
  --cv-grad-progress: linear-gradient(90deg,#A8145E,#F4B41A);
  --cv-strip: linear-gradient(90deg,#1E3EA6 0 33.3%,#B72A14 33.3% 66.6%,#F4B41A 66.6%);
  --cv-on-hero: #FFFFFF; --cv-on-danger: #FFFFFF;
  --cv-primary-rgb: 168,20,94; --cv-red-rgb: 183,42,20; --cv-gold-rgb: 244,180,26;
  --cv-bs-success-rgb: 74,106,18; --cv-bs-warning-rgb: 179,71,0; --cv-bs-info-rgb: 11,110,115;
  --cv-ico-1: #8E0F4F; --cv-ico-2: #1E3EA6; --cv-ico-3: #4A6A12; --cv-ico-4: #B72A14; --cv-ico-fg: #FFFFFF;
}
[data-theme="dark"], html.dark {
  --cv-bg: #110C14; --cv-surface: #1C1522; --cv-surface-2: #2A2032;
  --cv-text: #F7EFE4; --cv-text-2: #CDBFC6; --cv-text-muted: #B3A3AC;
  --cv-border: #3A2D42; --cv-border-strong: #8E7A89;
  --cv-primary: #FF5FA8; --cv-primary-strong: #B5186A; --cv-on-primary: #110C14;
  --cv-secondary: #FFC247; --cv-blue: #8AA4FF;
  --cv-green: #A9D44A; --cv-red: #FF7A59; --cv-orange: #FFC247; --cv-teal: #3DD9C8; --cv-violet: #C79BFF;
  --cv-gold: #FFC247; --cv-pink: #FF5FA8; --cv-cyan: #3DD9C8;
  --cv-on-festive: #110C14;
  --cv-success-fill: #A9D44A; --cv-warning-fill: #FFC247; --cv-danger-fill: #FF7A59;
  --cv-alert-success-bg: #1E2A12; --cv-alert-success-text: #C9E88A;
  --cv-alert-warning-bg: #332306; --cv-alert-warning-text: #FFD27A;
  --cv-alert-danger-bg: #3A1410;  --cv-alert-danger-text: #FFB3A3;
  --cv-alert-info-bg: #16203F;    --cv-alert-info-text: #B7C7FF;
  --cv-sidebar-start: #0B0710; --cv-sidebar-end: #2A0A20;
  --cv-sidebar-text: #EBDCE4; --cv-sidebar-section: #CDA7BE;
  --cv-sidebar-active-bg: rgba(255,194,71,0.18); --cv-sidebar-hover-bg: rgba(255,95,168,0.14);
  --cv-header-bg: rgba(17,12,20,0.88); --cv-header-border: rgba(255,95,168,0.18);
  --cv-footer-bg: rgba(17,12,20,0.75);
  --cv-card-bg: rgba(28,21,34,0.70); --cv-card-border: rgba(255,95,168,0.16);
  --cv-card-shadow: 0 2px 16px rgba(0,0,0,0.35);
  --cv-input-bg: #2A2032; --cv-input-border: #8E7A89;
  --cv-focus-ring: #FFC247; --cv-focus-halo: rgba(255,194,71,0.28);
  --cv-table-head-bg: #2A2032; --cv-table-zebra: rgba(255,95,168,0.05); --cv-table-hover: rgba(255,194,71,0.10);
  --cv-grad-hero: linear-gradient(135deg,#FF5FA8,#FFC247);
  --cv-grad-brand: linear-gradient(135deg,#FF5FA8,#FFC247);
  --cv-grad-progress: linear-gradient(90deg,#FF5FA8,#FFC247);
  --cv-strip: linear-gradient(90deg,#8AA4FF 0 33.3%,#FF7A59 33.3% 66.6%,#FFC247 66.6%);
  --cv-on-hero: #110C14; --cv-on-danger: #110C14;
  --cv-primary-rgb: 255,95,168; --cv-red-rgb: 255,122,89; --cv-gold-rgb: 255,194,71;
  --cv-bs-success-rgb: 169,212,74; --cv-bs-warning-rgb: 255,194,71; --cv-bs-info-rgb: 61,217,200;
  --cv-ico-1: #FF5FA8; --cv-ico-2: #8AA4FF; --cv-ico-3: #A9D44A; --cv-ico-4: #FF7A59; --cv-ico-fg: #110C14;
}

/* ===== Capa 2: puente Bootstrap 5.3 (el proyecto no usa data-bs-theme) ===== */
:root, [data-theme="light"], [data-theme="dark"], html.dark {
  --bs-body-color: var(--cv-text); --bs-body-bg: var(--cv-bg);
  --bs-link-color: var(--cv-primary); --bs-link-hover-color: var(--cv-primary-strong);
  --bs-border-color: var(--cv-border); --bs-secondary-color: var(--cv-text-muted);
  --bs-primary: var(--cv-primary); --bs-primary-rgb: var(--cv-primary-rgb);
  --bs-danger-rgb: var(--cv-red-rgb);
  --bs-success-rgb: var(--cv-bs-success-rgb); --bs-warning-rgb: var(--cv-bs-warning-rgb); --bs-info-rgb: var(--cv-bs-info-rgb);
}
.text-muted { color: var(--cv-text-muted) !important; }
.text-danger { color: var(--cv-red) !important; }
.btn-outline-secondary {
  --bs-btn-color: var(--cv-text-2); --bs-btn-border-color: var(--cv-border-strong);
  --bs-btn-hover-bg: var(--cv-surface-2); --bs-btn-hover-color: var(--cv-text); --bs-btn-hover-border-color: var(--cv-border-strong);
  --bs-btn-active-bg: var(--cv-surface-2); --bs-btn-active-color: var(--cv-text); --bs-btn-active-border-color: var(--cv-border-strong);
}
.btn-outline-primary {
  --bs-btn-color: var(--cv-primary); --bs-btn-border-color: var(--cv-primary);
  --bs-btn-hover-bg: var(--cv-primary-strong); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--cv-primary-strong);
  --bs-btn-active-bg: var(--cv-primary-strong); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--cv-primary-strong);
}
.btn-danger {
  --bs-btn-bg: var(--cv-danger-fill); --bs-btn-border-color: var(--cv-danger-fill); --bs-btn-color: var(--cv-on-danger);
  --bs-btn-hover-bg: var(--cv-danger-fill); --bs-btn-hover-border-color: var(--cv-danger-fill); --bs-btn-hover-color: var(--cv-on-danger);
  --bs-btn-active-bg: var(--cv-danger-fill); --bs-btn-active-border-color: var(--cv-danger-fill); --bs-btn-active-color: var(--cv-on-danger);
}
.btn-primary {
  --bs-btn-bg: var(--cv-primary-strong); --bs-btn-border-color: var(--cv-primary-strong); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--cv-primary-strong); --bs-btn-hover-border-color: var(--cv-primary-strong); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--cv-primary-strong); --bs-btn-active-border-color: var(--cv-primary-strong); --bs-btn-active-color: #fff;
}
.alert-success { --bs-alert-bg: var(--cv-alert-success-bg); --bs-alert-color: var(--cv-alert-success-text); --bs-alert-border-color: transparent; }
.alert-warning { --bs-alert-bg: var(--cv-alert-warning-bg); --bs-alert-color: var(--cv-alert-warning-text); --bs-alert-border-color: transparent; }
.alert-danger  { --bs-alert-bg: var(--cv-alert-danger-bg);  --bs-alert-color: var(--cv-alert-danger-text);  --bs-alert-border-color: transparent; }
.alert-info    { --bs-alert-bg: var(--cv-alert-info-bg);    --bs-alert-color: var(--cv-alert-info-text);    --bs-alert-border-color: transparent; }
.table {
  --bs-table-bg: transparent; --bs-table-color: inherit; --bs-table-border-color: var(--cv-border);
  --bs-table-striped-bg: var(--cv-table-zebra); --bs-table-striped-color: inherit;
  --bs-table-hover-bg: var(--cv-table-hover); --bs-table-hover-color: inherit;
}
.table thead th { background: var(--cv-table-head-bg); color: var(--cv-text); }

/* ===== Capa 3: foco global ===== */
:where(a, button, [role=button], input, select, textarea, .menu-item, .header-btn, .ruaa-tab):focus-visible {
  outline: 2px solid var(--cv-focus-ring); outline-offset: 2px; box-shadow: 0 0 0 4px var(--cv-focus-halo);
}
.form-control:focus, .form-select:focus {
  border-color: var(--cv-focus-ring) !important; box-shadow: 0 0 0 3px var(--cv-focus-halo) !important;
}

/* ===== Capa 4: momentos festivos ===== */
/* 1. Franja bandera de Pasto bajo el borde superior del header / tarjeta de acceso */
#header { position: fixed; }
#header::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--cv-strip); pointer-events: none;
}
.auth-card { position: relative; overflow: hidden; }
.auth-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--cv-strip); pointer-events: none;
}
/* 2. Sidebar con talco */
#sidebar { position: fixed; }
#sidebar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px); background-size: 18px 18px;
}
#sidebar > * { position: relative; z-index: 1; }
/* 4. Botones carroza: brillo de barniz al hover */
.btn-ruaa-primary, .btn-ruaa { position: relative; overflow: hidden; }
.btn-ruaa-primary::after, .btn-ruaa::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transition: transform .4s ease;
}
.btn-ruaa-primary:hover::after, .btn-ruaa:hover::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) {
  .btn-ruaa-primary::after, .btn-ruaa::after { transition: none; }
  .btn-ruaa-primary:hover::after, .btn-ruaa:hover::after { transform: translateX(-120%); }
}
/* 5. Hero de bienvenida */
.cv-hero, .ruaa-card.cv-hero {
  position: relative; overflow: hidden; border-radius: 16px; padding: 1.5rem;
  background: var(--cv-grad-hero); color: var(--cv-on-hero);
}
.cv-hero h1, .cv-hero h2, .cv-hero h3, .cv-hero p, .cv-hero a, .cv-hero small, .cv-hero span { color: inherit; }
.cv-hero::after {
  content: ""; position: absolute; top: -30px; right: -30px; width: 220px; height: 160px; pointer-events: none; opacity: .25;
  background:
    radial-gradient(circle at 30% 40%, #F4B41A 0 22px, transparent 23px),
    radial-gradient(circle at 70% 25%, #19B5C9 0 14px, transparent 15px),
    radial-gradient(circle at 60% 75%, #3DD9C8 0 18px, transparent 19px);
}
[data-theme="light"] .cv-hero .progress-ruaa, :root:not([data-theme]) .cv-hero .progress-ruaa { background: rgba(0,0,0,.28); }
[data-theme="dark"] .cv-hero .progress-ruaa { background: rgba(17,12,20,.28); }
.cv-hero .progress-ruaa-fill { background: var(--cv-on-hero); }
/* 6. Iconos de estadística */
.cv-ico { color: var(--cv-ico-fg) !important; }
.cv-ico-magenta { background: var(--cv-ico-1) !important; }
.cv-ico-ultramar { background: var(--cv-ico-2) !important; }
.cv-ico-mopa { background: var(--cv-ico-3) !important; }
.cv-ico-bermellon { background: var(--cv-ico-4) !important; }
/* 7. Chips festivos (categorías no semánticas) */
.cv-chip { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.cv-chip-gold { background: var(--cv-gold); color: var(--cv-on-festive); }
.cv-chip-pink { background: var(--cv-pink); color: var(--cv-on-festive); }
.cv-chip-cyan { background: var(--cv-cyan); color: var(--cv-on-festive); }
.cv-chip-teal { background: var(--cv-teal); color: #fff; }
.cv-chip-ultramar { background: var(--cv-blue); color: #fff; }
[data-theme="dark"] .cv-chip-teal, [data-theme="dark"] .cv-chip-ultramar, html.dark .cv-chip-teal, html.dark .cv-chip-ultramar { color: var(--cv-on-festive); }
/* 8. Hover con tinte oro */
.table tbody tr:hover > * { background-color: var(--cv-table-hover); }
.menu-item:hover { background: var(--cv-sidebar-hover-bg); }
.ruaa-tab:hover { background: rgba(var(--cv-gold-rgb), .12); }
.ruaa-tab.active { border-bottom-width: 3px; }
/* Botón de éxito (siguiente / confirmar) */
.btn-ruaa-success {
  background: var(--cv-success-fill); color: var(--cv-on-festive); border: none; border-radius: 10px;
  padding: 0.6rem 1.25rem; font-weight: 700; font-size: 0.88rem;
}
.btn-ruaa-success:hover { color: var(--cv-on-festive); filter: brightness(.95); }
/* 12. Footer con eco de la franja */
#footer { border-top: 2px solid transparent; border-image: var(--cv-strip) 1; }