/* ════════════════════════════════════════════════════════════════════════
ALTA SUITE — DESIGN SYSTEM · ALTA ACADEMIA (AA / AAIB)
Personalidad: Playful · Bootstrap 4 + Keen Template Override
────────────────────────────────────────────────────────────────────────
Cargar SIEMPRE después de style.bundle.css y demás estilos del tema.
════════════════════════════════════════════════════════════════════════ */
/* ── 1. TOKENS DS — Variables CSS ───────────────────────────────────── */
/*
Fuente: Alta Suite Design System v1.0 · Figma (node 3:2 Color Tokens)
Personalidad: Playful · Plataforma: Alta Academia (AA / AAIB)
Nomenclatura: cada variable refleja la ruta exacta en Figma con '--aa-' como prefijo.
Ejemplo: Scale/Cyan/60 → --aa-scale-cyan-60 | Pastel/cyan-100 → --aa-pastel-cyan-100
radius/playful/sm → --aa-radius-playful-sm | Background/light → --aa-bg-light
*/
:root {
/* ════════════════════════════════════════════════════════════════════
ESCALAS DE COLOR — Figma: Scale/*
Naming: Scale/[Family]/[Step] → --aa-scale-[family]-[step]
════════════════════════════════════════════════════════════════════ */
/* Scale/Cyan — acento identitario AA */
--aa-scale-cyan-10: #E9F8FF;
--aa-scale-cyan-20: #CBEEFF;
--aa-scale-cyan-30: #ACE3FF;
--aa-scale-cyan-40: #89D7FF;
--aa-scale-cyan-50: #67CCFF;
--aa-scale-cyan-60: #46C1FF;
--aa-scale-cyan-70: #399ED1;
--aa-scale-cyan-80: #2D7CA3;
--aa-scale-cyan-90: #225D7A;
--aa-scale-cyan-100: #184257;
--aa-scale-cyan-110: #0F2A38;
/* Scale/Sky */
--aa-scale-sky-10: #E7F1FF;
--aa-scale-sky-20: #C8DEFF;
--aa-scale-sky-30: #A6CAFF;
--aa-scale-sky-40: #80B4FF;
--aa-scale-sky-50: #5D9FFF;
--aa-scale-sky-60: #398AFF;
--aa-scale-sky-70: #2F71D1;
--aa-scale-sky-80: #2458A3;
--aa-scale-sky-90: #1B427A;
--aa-scale-sky-100: #132F57;
--aa-scale-sky-110: #0D1E38;
/* Scale/Blue */
--aa-scale-blue-10: #E5ECF7;
--aa-scale-blue-20: #C2D4ED;
--aa-scale-blue-30: #9DB9E2;
--aa-scale-blue-40: #739CD6;
--aa-scale-blue-50: #4C80CB;
--aa-scale-blue-60: #2564BF;
--aa-scale-blue-70: #1E529D;
--aa-scale-blue-80: #18407A;
--aa-scale-blue-90: #12305C;
--aa-scale-blue-100: #0D2241;
--aa-scale-blue-110: #08162A;
/* Scale/Purple — acento secundario AA */
--aa-scale-purple-10: #EFEFFC;
--aa-scale-purple-20: #D9DAF7;
--aa-scale-purple-30: #C3C4F2;
--aa-scale-purple-40: #A9ABED;
--aa-scale-purple-50: #9194E8;
--aa-scale-purple-60: #797CE3;
--aa-scale-purple-70: #6366BA;
--aa-scale-purple-80: #4D4F91;
--aa-scale-purple-90: #3A3C6D;
--aa-scale-purple-100: #292A4D;
--aa-scale-purple-110: #1B1B32;
/* Scale/Navy — texto principal, Primary/navy-900 */
--aa-scale-navy-10: #EBF3FF;
--aa-scale-navy-20: #CCE1FF;
--aa-scale-navy-30: #82A6D9;
--aa-scale-navy-40: #426CA6;
--aa-scale-navy-50: #173D73;
--aa-scale-navy-60: #001A3F;
--aa-scale-navy-70: #00142F;
--aa-scale-navy-80: #000E23;
--aa-scale-navy-110: #000308;
/* Scale/Coral */
--aa-scale-coral-10: #FFEFF0;
--aa-scale-coral-20: #FFD9DC;
--aa-scale-coral-30: #FFC2C7;
--aa-scale-coral-40: #FEA9B0;
--aa-scale-coral-50: #FE9099;
--aa-scale-coral-60: #FE7883;
--aa-scale-coral-70: #D0626B;
--aa-scale-coral-80: #A34D54;
--aa-scale-coral-90: #7A3A3F;
--aa-scale-coral-100: #56292D;
--aa-scale-coral-110: #381A1D;
/* Scale/Teal */
--aa-scale-teal-10: #EAF9F7;
--aa-scale-teal-20: #CEF2EC;
--aa-scale-teal-30: #B0E9E1;
--aa-scale-teal-40: #8FE0D4;
--aa-scale-teal-50: #70D8C8;
--aa-scale-teal-60: #50CFBC;
--aa-scale-teal-70: #42AA9A;
--aa-scale-teal-80: #338478;
--aa-scale-teal-90: #26635A;
--aa-scale-teal-100: #1B4640;
--aa-scale-teal-110: #122E29;
/* Scale/Yellow */
--aa-scale-yellow-10: #FFF7EA;
--aa-scale-yellow-20: #FFECCF;
--aa-scale-yellow-30: #FFE1B2;
--aa-scale-yellow-40: #FFD492;
--aa-scale-yellow-50: #FFC873;
--aa-scale-yellow-60: #FFBC54;
--aa-scale-yellow-70: #D19A45;
--aa-scale-yellow-80: #A37836;
--aa-scale-yellow-90: #7A5A28;
--aa-scale-yellow-100: #57401D;
--aa-scale-yellow-110: #382912;
/* ════════════════════════════════════════════════════════════════════
PASTELES — Figma: Pastel/[family]-100
Naming: Pastel/cyan-100 → --aa-pastel-cyan-100
════════════════════════════════════════════════════════════════════ */
--aa-pastel-blue-100: #C2D4ED;
--aa-pastel-sky-100: #C8DEFF;
--aa-pastel-pink-100: #FFD9DC;
--aa-pastel-cyan-100: #CBEEFF;
--aa-pastel-purple-100: #D9DAF7;
--aa-pastel-teal-100: #CEF2EC;
--aa-pastel-yellow-100: #FFECCF;
/* ════════════════════════════════════════════════════════════════════
NEUTRALES — Figma: Neutral/[step]
════════════════════════════════════════════════════════════════════ */
--aa-neutral-300: #C7CDD5;
--aa-neutral-400: #B0B5BE;
--aa-neutral-500: #999999;
--aa-neutral-600: #666666;
--aa-neutral-700: #333333;
/* ════════════════════════════════════════════════════════════════════
BACKGROUND — Figma: Background/[variant]
Naming: Background/light → --aa-bg-light
════════════════════════════════════════════════════════════════════ */
--aa-bg-light: #F8F9FE;
--aa-bg-dark: #000819;
--aa-bg-white: #FFFFFF;
/* ════════════════════════════════════════════════════════════════════
PRIMARY — Figma: Primary/navy-900
════════════════════════════════════════════════════════════════════ */
--aa-primary-navy-900: #001A3F;
/* ════════════════════════════════════════════════════════════════════
GRADIENTES — Figma: Gradient/AA | Gradient/AE | Gradient/AGS
════════════════════════════════════════════════════════════════════ */
--aa-gradient-aa: linear-gradient(90deg, var(--aa-scale-cyan-60) 0%, var(--aa-scale-purple-60) 100%);
--aa-gradient-ae: linear-gradient(90deg, var(--aa-scale-blue-60) 0%, var(--aa-scale-sky-60) 100%);
--aa-gradient-ags: linear-gradient(90deg, var(--aa-scale-navy-60) 0%, var(--aa-scale-blue-60) 100%);
/* ════════════════════════════════════════════════════════════════════
BORDER RADIUS — Figma: radius/[personality]/[size]
Naming: radius/playful/sm → --aa-radius-playful-sm
════════════════════════════════════════════════════════════════════ */
--aa-radius-playful-sm: 8px;
--aa-radius-playful-md: 16px;
--aa-radius-playful-lg: 24px;
--aa-radius-playful-xl: 32px; /* confirmado en Figma node 3:7 */
--aa-radius-playful-full: 40px;
--aa-radius-friendly-sm: 6px;
--aa-radius-friendly-md: 12px;
--aa-radius-friendly-lg: 18px;
--aa-radius-formal-sm: 4px;
--aa-radius-formal-md: 8px;
--aa-radius-formal-lg: 12px;
/* ════════════════════════════════════════════════════════════════════
ESPACIADO — Figma: variables numéricas 1–16 (base 4px)
Naming: Figma "1" → --aa-space-1 = 4px
════════════════════════════════════════════════════════════════════ */
--aa-space-1: 4px;
--aa-space-2: 8px;
--aa-space-3: 12px;
--aa-space-4: 16px;
--aa-space-5: 20px;
--aa-space-6: 24px;
--aa-space-8: 32px;
--aa-space-10: 40px;
--aa-space-12: 48px;
--aa-space-16: 64px;
/* ════════════════════════════════════════════════════════════════════
TIPOGRAFÍA — Figma: Heading/* + Body/* + Label/*
Naming: Heading/H2 → --aa-heading-h2-* | Body/Medium → --aa-body-medium-*
════════════════════════════════════════════════════════════════════ */
--aa-font-heading: 'Poppins', system-ui, sans-serif;
--aa-font-body: 'Public Sans', system-ui, -apple-system, sans-serif;
/* Heading/H1–H6 · Poppins */
--aa-heading-h1-size: 48px;
--aa-heading-h1-lh: 56px;
--aa-heading-h1-weight: 700;
--aa-heading-h2-size: 36px;
--aa-heading-h2-lh: 44px;
--aa-heading-h2-weight: 700;
--aa-heading-h3-size: 28px;
--aa-heading-h3-lh: 36px;
--aa-heading-h3-weight: 700;
--aa-heading-h4-size: 22px;
--aa-heading-h4-lh: 30px;
--aa-heading-h4-weight: 600;
--aa-heading-h5-size: 18px;
--aa-heading-h5-lh: 26px;
--aa-heading-h5-weight: 600;
--aa-heading-h6-size: 14px;
--aa-heading-h6-lh: 22px;
--aa-heading-h6-weight: 600;
/* Body/Medium + Body/Small · Public Sans */
--aa-body-medium-size: 14px;
--aa-body-medium-lh: 22px;
--aa-body-medium-weight: 400;
--aa-body-small-size: 12px;
--aa-body-small-lh: 1;
--aa-body-small-weight: 400;
/* Label/Medium + Small + Mini + CTA md · Public Sans */
--aa-label-medium-size: 14px;
--aa-label-medium-lh: 22px;
--aa-label-medium-weight: 500;
--aa-label-small-size: 12px;
--aa-label-small-lh: 18px;
--aa-label-small-weight: 500;
--aa-label-mini-size: 11px;
--aa-label-mini-lh: 1;
--aa-label-mini-weight: 300;
--aa-label-cta-md-size: 14px;
--aa-label-cta-md-lh: 1;
--aa-label-cta-md-weight: 700;
--aa-label-cta-sm-size: 12px;
--aa-label-cta-sm-lh: 1;
--aa-label-cta-sm-weight: 700;
/* ════════════════════════════════════════════════════════════════════
ALIASES SEMÁNTICOS — referencias a primitivos Figma anteriores
(usados por los overrides de Bootstrap 4 / Keen más abajo)
════════════════════════════════════════════════════════════════════ */
/* Colores de marca AA (Playful · Cyan) */
--aa-primary: var(--aa-scale-cyan-60); /* #46C1FF */
--aa-secondary: var(--aa-scale-purple-60); /* #797CE3 */
--aa-navy: var(--aa-primary-navy-900); /* #001A3F */
--aa-gradient: var(--aa-gradient-aa);
/* Semánticos de estado */
--aa-success-bg: var(--aa-pastel-teal-100); /* #CEF2EC */
--aa-success-accent: var(--aa-scale-teal-60); /* #50CFBC */
--aa-success-text: var(--aa-scale-teal-80); /* #338478 */
--aa-error-bg: var(--aa-pastel-pink-100); /* #FFD9DC */
--aa-error-accent: var(--aa-scale-coral-60); /* #FE7883 */
--aa-error-text: var(--aa-scale-coral-80); /* #A34D54 */
--aa-warning-bg: var(--aa-pastel-yellow-100); /* #FFECCF */
--aa-warning-accent: var(--aa-scale-yellow-60); /* #FFBC54 */
--aa-warning-text: var(--aa-scale-yellow-80); /* #A37836 */
--aa-info-bg: var(--aa-pastel-cyan-100); /* #CBEEFF */
--aa-info-accent: var(--aa-scale-cyan-60); /* #46C1FF */
--aa-info-text: var(--aa-scale-cyan-80); /* #2D7CA3 */
/* Backgrounds de layout */
--aa-body-bg: var(--aa-bg-light); /* #F8F9FE */
--aa-dark-bg: var(--aa-bg-dark); /* #000819 */
--aa-white: var(--aa-bg-white); /* #FFFFFF */
--aa-border-color: var(--aa-neutral-300); /* #C7CDD5 */
/* Radio activo — AA usa personalidad Playful */
--aa-radius-sm: var(--aa-radius-playful-sm); /* 8px */
--aa-radius-md: var(--aa-radius-playful-md); /* 16px */
--aa-radius-lg: var(--aa-radius-playful-lg); /* 24px */
--aa-radius-full: var(--aa-radius-playful-full); /* 40px */
--aa-radius-pill: 9999px;
/* Tipografía — shortcuts del Body/Medium */
--aa-font-size-body: var(--aa-body-medium-size); /* 14px */
--aa-line-height: var(--aa-body-medium-lh); /* 22px */
/* Tipografía legacy (usados en reglas Keen más abajo) */
--aa-text-h1: var(--aa-heading-h1-size);
--aa-lh-h1: var(--aa-heading-h1-lh);
--aa-text-h2: var(--aa-heading-h2-size);
--aa-lh-h2: var(--aa-heading-h2-lh);
--aa-text-h3: var(--aa-heading-h3-size);
--aa-lh-h3: var(--aa-heading-h3-lh);
--aa-text-h4: var(--aa-heading-h4-size);
--aa-lh-h4: var(--aa-heading-h4-lh);
--aa-text-h5: var(--aa-heading-h5-size);
--aa-lh-h5: var(--aa-heading-h5-lh);
--aa-text-h6: var(--aa-heading-h6-size);
--aa-lh-h6: var(--aa-heading-h6-lh);
--aa-text-body-md: var(--aa-body-medium-size);
--aa-lh-body-md: var(--aa-body-medium-lh);
--aa-text-body-sm: var(--aa-body-small-size);
--aa-lh-body-sm: var(--aa-body-small-lh);
--aa-text-label-md: var(--aa-label-medium-size);
--aa-lh-label-md: var(--aa-label-medium-lh);
--aa-text-label-sm: var(--aa-label-small-size);
--aa-lh-label-sm: var(--aa-label-small-lh);
--aa-text-label-min: var(--aa-label-mini-size);
--aa-lh-label-min: var(--aa-label-mini-lh);
--aa-text-cta: var(--aa-label-cta-md-size);
--aa-lh-cta: var(--aa-label-cta-md-lh);
/* Alias cortos de color (retrocompatibilidad con reglas Keen más abajo) */
--aa-cyan-10: var(--aa-scale-cyan-10);
--aa-cyan-20: var(--aa-scale-cyan-20);
--aa-cyan-40: var(--aa-scale-cyan-40);
--aa-cyan-60: var(--aa-scale-cyan-60);
--aa-cyan-70: var(--aa-scale-cyan-70);
--aa-cyan-80: var(--aa-scale-cyan-80);
--aa-sky-60: var(--aa-scale-sky-60);
--aa-blue-60: var(--aa-scale-blue-60);
--aa-blue-80: var(--aa-scale-blue-80);
--aa-purple-60: var(--aa-scale-purple-60);
--aa-purple-70: var(--aa-scale-purple-70);
--aa-navy-60: var(--aa-scale-navy-60);
--aa-navy-80: var(--aa-scale-navy-80);
--aa-teal-20: var(--aa-scale-teal-20);
--aa-teal-60: var(--aa-scale-teal-60);
--aa-teal-80: var(--aa-scale-teal-80);
--aa-coral-20: var(--aa-scale-coral-20);
--aa-coral-60: var(--aa-scale-coral-60);
--aa-coral-80: var(--aa-scale-coral-80);
--aa-yellow-20: var(--aa-scale-yellow-20);
--aa-yellow-60: var(--aa-scale-yellow-60);
--aa-yellow-80: var(--aa-scale-yellow-80);
/* Alias cortos de pasteles sin sufijo -100 (retrocompatibilidad) */
--aa-pastel-blue: var(--aa-pastel-blue-100);
--aa-pastel-sky: var(--aa-pastel-sky-100);
--aa-pastel-pink: var(--aa-pastel-pink-100);
--aa-pastel-cyan: var(--aa-pastel-cyan-100);
--aa-pastel-purple: var(--aa-pastel-purple-100);
--aa-pastel-teal: var(--aa-pastel-teal-100);
--aa-pastel-yellow: var(--aa-pastel-yellow-100);
/* Fondo activo ítem de menú — spec de navegación (no es Scale/Cyan/100 = #184257) */
--aa-cyan-100: #DAF3FF;
/* Custom — no existe en Figma como token primitivo */
--aa-secondary-text: #696B92;
/* Sombras */
--aa-shadow-card: 0 4px 20px rgba(203, 238, 255, 0.6);
--aa-shadow-modal: 0 4px 24px rgba(203, 238, 255, 0.6);
/* Focus ring */
--aa-focus-ring: 0 0 0 3px rgba(70, 193, 255, .25);
/* Variables Diseño-AG (Accordion) */
--ag-hover-bg: #f0fdff;
--ag-border: #dde3ef;
--ag-text-primary: #1a2e4a;
--ag-text-muted: #6b7a99;
}
/* ── 1b. CLASES TIPOGRÁFICAS — Figma: Body/* + Label/* ─────────────── */
.aa-body-md { font-family: var(--aa-font-body); font-size: var(--aa-text-body-md); line-height: var(--aa-lh-body-md); font-weight: 400; }
.aa-body-sm { font-family: var(--aa-font-body); font-size: var(--aa-text-body-sm); line-height: var(--aa-lh-body-sm); font-weight: 400; }
.aa-label-md { font-family: var(--aa-font-body); font-size: var(--aa-text-label-md); line-height: var(--aa-lh-label-md); font-weight: 500; }
.aa-label-sm { font-family: var(--aa-font-body); font-size: var(--aa-text-label-sm); line-height: var(--aa-lh-label-sm); font-weight: 500; }
.aa-label-min{ font-family: var(--aa-font-body); font-size: var(--aa-text-label-min); line-height: var(--aa-lh-label-min); font-weight: 300; }
.aa-cta { font-family: var(--aa-font-body); font-size: var(--aa-text-cta); line-height: var(--aa-lh-cta); font-weight: 700; }
/* ── 2. BODY & TIPOGRAFÍA ───────────────────────────────────────────── */
body {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-font-size-body) !important;
background-color: var(--aa-body-bg) !important;
color: var(--aa-navy) !important;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--aa-font-heading) !important;
color: var(--aa-navy) !important;
}
h1 {
font-size: 48px;
line-height: 56px;
font-weight: 700;
}
h2 {
font-size: 36px;
line-height: 44px;
font-weight: 700;
}
h3 {
font-size: 28px;
line-height: 36px;
font-weight: 600;
}
h4 {
font-size: 22px;
line-height: 30px;
font-weight: 600;
}
h5 {
font-size: 18px;
line-height: 26px;
font-weight: 500;
}
h6 {
font-size: 14px;
line-height: 22px;
font-weight: 500;
}
a {
color: var(--aa-cyan-60);
}
a:hover {
color: var(--aa-cyan-70);
}
.TModulo {
color: #001A3F !important;
font-family: Poppins !important;
font-size: 20px !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: 36px !important;
margin-bottom: 20px;
}
/* ── 3. BOTONES — Bootstrap 4 overrides + DS hover system ──────────── */
/*
ESTRATEGIA: usamos los MISMOS selectores específicos de style.bundle.css
(.btn.btn-X:hover:not(.btn-text):not(:disabled):not(.disabled)) para
garantizar que el DS gane. Cargamos DESPUÉS del bundle (línea 84 del layout).
Valores hex hardcodeados como fallback de las vars() para mayor robustez.
*/
/* BASE — transición suave en todos los botones */
.btn {
transition: background-color 0.18s ease, border-color 0.18s ease,
box-shadow 0.18s ease, transform 0.12s ease,
color 0.18s ease !important;
cursor: pointer !important;
border-radius: 8px !important;
}
/* Elevación leve al hacer hover */
.btn:hover:not(:disabled):not(.disabled) {
transform: translateY(-1px) !important;
}
.btn:active:not(:disabled):not(.disabled) {
transform: translateY(0px) !important;
}
/* ── Primary (#46C1FF cyan-60) ──────────────────────────────────────── */
.btn.btn-primary,
.btn-primary {
background-color: #46c1ff !important;
border-color: #46c1ff !important;
color: #fff !important;
font-weight: 700 !important;
margin: 0.25rem !important
}
.btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-primary:focus:not(.btn-text),
.btn.btn-primary.focus:not(.btn-text),
.btn-primary:hover,
.btn-primary:focus {
background-color: #399ed1 !important;
border-color: #399ed1 !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(70, 193, 255, 0.50) !important;
}
.btn.btn-primary:not(:disabled):not(.disabled):active:not(.btn-text),
.btn.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:active,
.btn-primary.active {
background-color: #2a8ab5 !important;
border-color: #2a8ab5 !important;
box-shadow: none !important;
}
/* ── Outline Primary ────────────────────────────────────────────────── */
.btn.btn-outline-primary,
.btn-outline-primary {
color: #46c1ff !important;
border-color: #46c1ff !important;
background-color: transparent !important;
font-weight: 700 !important;
margin: 0.25rem !important
}
.btn.btn-outline-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-outline-primary:focus:not(.btn-text),
.btn-outline-primary:hover,
.btn-outline-primary:focus {
background-color: #e9f8ff !important;
color: #399ed1 !important;
border-color: #399ed1 !important;
box-shadow: 0 4px 12px rgba(70, 193, 255, 0.25) !important;
}
.btn-outline-primary:active,
.btn-outline-primary.active {
background-color: #46c1ff !important;
color: #fff !important;
box-shadow: none !important;
}
/* ── Secondary (purple) ─────────────────────────────────────────────── */
.btn.btn-secondary,
.btn-secondary {
background-color: var(--aa-purple-60, #8250C8) !important;
border-color: var(--aa-purple-60, #8250C8) !important;
color: #fff !important;
font-weight: 700 !important;
margin: 0.25rem !important
}
.btn.btn-secondary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-secondary:focus:not(.btn-text),
.btn.btn-secondary.focus:not(.btn-text),
.btn-secondary:hover,
.btn-secondary:focus {
background-color: var(--aa-purple-70, #6a3faa) !important;
border-color: var(--aa-purple-70, #6a3faa) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(130, 80, 200, 0.40) !important;
}
.btn.btn-secondary:not(:disabled):not(.disabled):active:not(.btn-text),
.btn-secondary:active,
.btn-secondary.active {
background-color: var(--aa-purple-80, #5a2fa0) !important;
border-color: var(--aa-purple-80, #5a2fa0) !important;
box-shadow: none !important;
}
/* ── Outline Secondary ──────────────────────────────────────────────── */
.btn.btn-outline-secondary,
.btn-outline-secondary {
color: #001a3f !important;
border-color: #c7cdd5 !important;
background-color: transparent !important;
font-weight: 600 !important;
margin: 0.25rem !important
}
/* ── Success ────────────────────────────────────────────────────────── */
.btn.btn-success,
.btn-success {
background-color: var(--aa-success-accent, #28a745) !important;
border-color: var(--aa-success-accent, #28a745) !important;
color: #fff !important;
font-weight: 700 !important;
margin: 0.25rem !important
}
.btn.btn-success:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-success:focus:not(.btn-text),
.btn-success:hover,
.btn-success:focus {
background-color: var(--aa-success-text, #1e7e34) !important;
border-color: var(--aa-success-text, #1e7e34) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.40) !important;
}
/* Outline Success */
.btn.btn-outline-success,
.btn-outline-success {
color: var(--aa-success-accent, #28a745) !important;
border-color: var(--aa-success-accent, #28a745) !important;
background-color: transparent !important;
font-weight: 600 !important;
}
.btn.btn-outline-success:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn-outline-success:hover,
.btn-outline-success:focus {
background-color: rgba(40, 167, 69, 0.09) !important;
color: var(--aa-success-text, #1e7e34) !important;
border-color: var(--aa-success-text, #1e7e34) !important;
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2) !important;
}
/* ── Danger ─────────────────────────────────────────────────────────── */
.btn.btn-danger,
.btn-danger {
background-color: var(--aa-error-accent, #dc3545) !important;
border-color: var(--aa-error-accent, #dc3545) !important;
color: #fff !important;
font-weight: 700 !important;
margin: 0.25rem !important
}
.btn.btn-danger:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-danger:focus:not(.btn-text),
.btn-danger:hover,
.btn-danger:focus {
background-color: var(--aa-error-text, #bd2130) !important;
border-color: var(--aa-error-text, #bd2130) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.40) !important;
}
/* Outline Danger */
.btn.btn-outline-danger,
.btn-outline-danger {
color: var(--aa-error-accent, #dc3545) !important;
border-color: var(--aa-error-accent, #dc3545) !important;
background-color: transparent !important;
font-weight: 600 !important;
margin: 0.25rem !important
}
.btn.btn-outline-danger:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn-outline-danger:hover,
.btn-outline-danger:focus {
background-color: rgba(220, 53, 69, 0.09) !important;
color: var(--aa-error-text, #bd2130) !important;
border-color: var(--aa-error-text, #bd2130) !important;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2) !important;
}
/* ── Warning ────────────────────────────────────────────────────────── */
.btn.btn-warning,
.btn-warning {
background-color: var(--aa-warning-accent, #ffc107) !important;
border-color: var(--aa-warning-accent, #ffc107) !important;
color: #fff !important;
font-weight: 700 !important;
}
.btn.btn-warning:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-warning:focus:not(.btn-text),
.btn-warning:hover,
.btn-warning:focus {
background-color: var(--aa-warning-text, #d39e00) !important;
border-color: var(--aa-warning-text, #d39e00) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.40) !important;
}
/* Outline Warning */
.btn.btn-outline-warning,
.btn-outline-warning {
color: var(--aa-warning-accent, #ffc107) !important;
border-color: var(--aa-warning-accent, #ffc107) !important;
background-color: transparent !important;
font-weight: 600 !important;
margin: 0.25rem !important
}
.btn.btn-outline-warning:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn-outline-warning:hover,
.btn-outline-warning:focus {
background-color: rgba(255, 193, 7, 0.10) !important;
color: var(--aa-warning-text, #d39e00) !important;
border-color: var(--aa-warning-text, #d39e00) !important;
box-shadow: 0 2px 8px rgba(255, 193, 7, 0.25) !important;
}
/* ── Info ───────────────────────────────────────────────────────────── */
.btn.btn-info,
.btn-info {
background-color: var(--aa-info-accent, #17a2b8) !important;
border-color: var(--aa-info-accent, #17a2b8) !important;
color: #fff !important;
font-weight: 700 !important;
margin: 0.25rem !important
}
.btn.btn-info:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-info:focus:not(.btn-text),
.btn-info:hover,
.btn-info:focus {
background-color: var(--aa-info-text, #117a8b) !important;
border-color: var(--aa-info-text, #117a8b) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(23, 162, 184, 0.40) !important;
}
/* ── Light / Default ────────────────────────────────────────────────── */
.btn.btn-light,
.btn.btn-default,
.btn-light,
.btn-default {
background-color: #ffffff !important;
border-color: #c7cdd5 !important;
color: #001a3f !important;
font-weight: 600 !important;
margin: 0.25rem !important
}
.btn.btn-light:hover:not(:disabled):not(.disabled),
.btn.btn-light:focus:not(.btn-text),
.btn.btn-default:hover:not(:disabled):not(.disabled),
.btn-light:hover,
.btn-light:focus,
.btn-default:hover,
.btn-default:focus {
background-color: #f5f8fa !important;
border-color: #46c1ff !important;
color: #399ed1 !important;
box-shadow: 0 2px 8px rgba(70, 193, 255, 0.22) !important;
}
/* ── Light Primary (Keen) ───────────────────────────────────────────── */
.btn-light-primary {
background-color: var(--aa-cyan-10) !important;
border-color: transparent !important;
color: var(--aa-cyan-70) !important;
font-weight: 700 !important;
margin: 0.25rem !important
}
.btn-light-primary:hover,
.btn-light-primary:focus {
background-color: var(--aa-cyan-20) !important;
color: var(--aa-cyan-70) !important;
box-shadow: 0 2px 8px rgba(70, 193, 255, 0.25) !important;
}
/* ── Light Danger / Success / Warning (Keen) ────────────────────────── */
.btn-light-danger {
background-color: rgba(220, 53, 69, 0.1) !important;
border-color: transparent !important;
color: var(--aa-error-accent) !important;
font-weight: 700 !important;
margin: 0.25rem !important
}
.btn-light-danger:hover,
.btn-light-danger:focus {
background-color: rgba(220, 53, 69, 0.18) !important;
color: var(--aa-error-text) !important;
}
.btn-light-success {
background-color: rgba(40, 167, 69, 0.1) !important;
border-color: transparent !important;
color: var(--aa-success-accent) !important;
font-weight: 700 !important;
margin: 0.25rem !important
}
.btn-light-success:hover,
.btn-light-success:focus {
background-color: rgba(40, 167, 69, 0.18) !important;
color: var(--aa-success-text) !important;
}
.btn-light-warning {
background-color: rgba(255, 193, 7, 0.12) !important;
border-color: transparent !important;
color: var(--aa-warning-text) !important;
font-weight: 700 !important;
}
.btn-light-warning:hover,
.btn-light-warning:focus {
background-color: rgba(255, 193, 7, 0.22) !important;
color: var(--aa-warning-text) !important;
}
/* ── Outline Light (usado en cards feature) ─────────────────────────── */
.btn-outline-light {
color: #fff !important;
border-color: rgba(255, 255, 255, 0.7) !important;
background-color: transparent !important;
font-weight: 600 !important;
margin: 0.25rem !important
}
.btn-outline-light:hover,
.btn-outline-light:focus {
background-color: rgba(255, 255, 255, 0.15) !important;
border-color: #fff !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2) !important;
}
/* ── Ghost Primary ──────────────────────────────────────────────────── */
.btn-ghost-primary {
color: var(--aa-cyan-60) !important;
background-color: transparent !important;
border-color: transparent !important;
font-weight: 700 !important;
margin: 0.25rem !important
}
.btn-ghost-primary:hover,
.btn-ghost-primary:focus {
background-color: var(--aa-cyan-10) !important;
color: var(--aa-cyan-70) !important;
box-shadow: none !important;
}
/* ── Tamaños ─────────────────────────────────────────────────────────── */
.btn-lg {
border-radius: var(--aa-radius-md) !important;
font-size: 16px !important;
}
.btn-sm {
border-radius: 6px !important;
font-size: 12px !important;
}
/* ── Disabled — sin elevación ni sombra ─────────────────────────────── */
.btn:disabled,
.btn.disabled {
transform: none !important;
box-shadow: none !important;
cursor: not-allowed !important;
opacity: 0.6 !important;
}
/* ── Tamaños ─────────────────────────────────────────────────────────── */
.btn-lg {
border-radius: var(--aa-radius-md) !important;
font-size: 16px !important;
}
.btn-sm {
border-radius: 6px !important;
font-size: 12px !important;
}
/* ── Disabled — sin elevación ni sombra ─────────────────────────────── */
.btn:disabled,
.btn.disabled {
transform: none !important;
box-shadow: none !important;
cursor: not-allowed !important;
opacity: 0.6 !important;
}
/* ── 4. CARDS ────────────────────────────────────────────────────────── */
/*
Ref Figma: 🃏 Cards (node 3:7) · Alta Academia · Playful
6 tipos: 1.Stats 2.Content 3.Institution 4.Administrative
5.Feature (gradient) 6.Navigation Tab Bar
*/
/* ════ BASE — todos los cards comparten esta base ═══════════════════════ */
.card,
.kt-portlet {
border-radius: var(--aa-radius-md) !important; /* radius/playful/md = 16px */
background-color: var(--aa-bg-white) !important;
box-shadow: var(--aa-shadow-card) !important; /* 0 4px 20px rgba(cyan,0.6) */
transition: box-shadow 0.2s ease, transform 0.2s ease;
overflow: hidden;
}
.card:hover,
.kt-portlet:hover {
box-shadow: 0 8px 32px rgba(70, 193, 255, 0.2) !important;
transform: translateY(-2px);
}
/* Mientras hay un .dropdown-menu abierto dentro de la card (ej. opciones de
Roles en el card-footer), se libera el overflow para que no lo recorte.
La clase la agrega/quita el JS de _Layout.cshtml en show/hidden.bs.dropdown. */
.card.dropdown-open-overflow,
.kt-portlet.dropdown-open-overflow {
overflow: visible !important;
position: relative !important;
z-index: 10 !important;
}
/* Header */
.card-header,
.kt-portlet__head {
background-color: var(--aa-bg-white) !important;
border-bottom: 1px solid var(--aa-neutral-300) !important;
padding: var(--aa-space-4) var(--aa-space-6) !important;
font-family: var(--aa-font-heading) !important;
font-size: var(--aa-heading-h6-size) !important; /* 14px */
font-weight: var(--aa-heading-h6-weight) !important; /* 600 */
line-height: var(--aa-heading-h6-lh) !important; /* 22px */
color: var(--aa-navy) !important;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 56px;
}
.kt-portlet__head-label .kt-portlet__head-title {
font-family: var(--aa-font-heading) !important;
font-size: var(--aa-heading-h6-size) !important;
font-weight: var(--aa-heading-h6-weight) !important;
color: var(--aa-navy) !important;
}
.kt-portlet__head-label .kt-portlet__head-desc {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-small-size) !important;
color: var(--aa-neutral-500) !important;
font-weight: 400 !important;
}
/* Body */
.card-body,
.kt-portlet__body {
padding: var(--aa-space-6) !important; /* 24px */
background-color: transparent !important;
font-family: var(--aa-font-body) !important;
font-size: var(--aa-body-medium-size) !important; /* 14px */
line-height: var(--aa-body-medium-lh) !important; /* 22px */
color: var(--aa-neutral-600) !important;
}
/* Footer */
.card-footer,
.kt-portlet__foot {
background-color: var(--aa-bg-white) !important;
border-top: 1px solid var(--aa-neutral-300) !important;
padding: var(--aa-space-3) var(--aa-space-6) !important;
}
/* Título y subtítulo */
.card-title {
font-family: var(--aa-font-heading) !important;
font-size: var(--aa-heading-h5-size) !important; /* 18px */
font-weight: var(--aa-heading-h5-weight) !important; /* 600 */
line-height: var(--aa-heading-h5-lh) !important; /* 26px */
color: var(--aa-navy) !important;
margin-bottom: var(--aa-space-2) !important;
}
.card-subtitle {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-small-size) !important; /* 12px */
color: var(--aa-secondary-text) !important;
font-weight: 400 !important;
margin-top: 0 !important;
}
/* Imagen superior */
.card-img-top {
border-radius: 0 !important;
object-fit: cover;
width: 100%;
}
/* ════ 1. STATS CARD — métricas / KPI ══════════════════════════════════ */
/*
Figma: icon-circle izquierda + valor H3 + label + badge tendencia
bg: white · radius: playful/md · shadow: cyan
*/
.card-stats,
.kt-widget.kt-widget--stats {
border-radius: var(--aa-radius-md) !important;
/* border: 1px solid var(--aa-neutral-300) !important;*/
background-color: var(--aa-bg-white) !important;
box-shadow: var(--aa-shadow-card) !important;
padding: clamp(0.875rem, 2vw, var(--aa-space-5)) !important;
display: flex;
flex-direction: column;
gap: var(--aa-space-2);
transition: box-shadow 0.2s ease, transform 0.2s ease;
overflow: hidden;
min-width: 0;
}
.card-stats:hover {
box-shadow: 0 8px 32px rgba(70, 193, 255, 0.2) !important;
transform: translateY(-2px);
}
/* Ícono del stats card — círculo/cuadrado con pastel */
.card-stats__icon {
width: clamp(2.125rem, 3vw + 0.875rem, 3rem); /* 34px → 48px */
height: clamp(2.125rem, 3vw + 0.875rem, 3rem);
border-radius: var(--aa-radius-md); /* 8px */
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--aa-pastel-cyan-100); /* #CBEEFF */
flex-shrink: 0;
margin: 8px;
font-size: clamp(0.875rem, 1.5vw + 0.375rem, 1.25rem); /* 14px → 20px */
}
.card-stats__icon img,
.card-stats__icon svg { width: 22px; height: 22px; }
.card-stats__icon--primary { background-color: var(--aa-pastel-cyan-100) !important; }
.card-stats__icon--success { background-color: var(--aa-pastel-teal-100) !important; }
.card-stats__icon--danger { background-color: var(--aa-pastel-pink-100) !important; }
.card-stats__icon--warning { background-color: var(--aa-pastel-yellow-100) !important; }
.card-stats__icon--info { background-color: var(--aa-pastel-sky-100) !important; }
.card-stats__icon--secondary { background-color: var(--aa-pastel-purple-100) !important; }
/* Valor numérico grande — Heading/H3 */
.card-stats__value {
font-family: var(--aa-font-heading) !important;
font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem) !important; /* 20px → 28px */
font-weight: var(--aa-heading-h3-weight) !important; /* 700 */
line-height: 1.2 !important;
color: var(--aa-navy) !important;
letter-spacing: -0.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Etiqueta debajo del valor — Label/Small */
.card-stats__label {
font-family: var(--aa-font-body) !important;
font-size: clamp(0.875rem, 0.5vw + 0.625rem, 1rem) !important; /* 14px → 16px */
font-weight: var(--aa-label-small-weight) !important;/* 500 */
line-height: 1.4 !important;
color: var(--aa-neutral-600) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
max-width: 100%;
}
/* Badge tendencia (+10% vs mes anterior) */
.card-stats__trend {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-mini-size) !important; /* 11px */
font-weight: 600 !important;
padding: 2px 8px;
border-radius: var(--aa-radius-pill);
background-color: var(--aa-pastel-teal-100); /* verde por defecto */
color: var(--aa-scale-teal-60);
}
.card-stats__trend--down {
background-color: var(--aa-pastel-pink-100) !important;
color: var(--aa-scale-coral-60) !important;
}
/* ── Card Stats Grid — contenedor 3 columnas auto-responsive ── */
.card-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
gap: clamp(0.75rem, 2vw, 1.25rem);
align-items: stretch;
}
/* ── Card Stats Body — flex: icono izquierda + texto derecha ── */
.card-stats__body {
display: flex;
align-items: center;
gap: clamp(0.5rem, 1.5vw, 0.875rem);
min-width: 0;
}
.card-stats__body .card-stats__icon {
margin: 0; /* anula el margin:8px global */
}
/* ── Card Stats Text — wrapper con min-width:0 para ellipsis ── */
.card-stats__text {
min-width: 0;
flex: 1;
}
/* Keen widget__stats compat */
.kt-widget--stats .kt-widget__value {
font-family: var(--aa-font-heading) !important;
font-size: var(--aa-heading-h3-size) !important;
font-weight: var(--aa-heading-h3-weight) !important;
color: var(--aa-navy) !important;
}
/* ════ 2. CONTENT CARD — imagen + título + descripción + acciones ══════ */
/*
Figma: image-top, date chip, H6 title, Body/Small desc, ghost+primary btns
*/
.card-content .card-img-top {
height: 160px;
object-fit: cover;
width: 100%;
}
.card-content .card-body {
padding: var(--aa-space-4) !important; /* 16px */
}
/* Chip de fecha */
.card-date-chip,
.card-content .card-date {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-mini-size) !important; /* 11px */
font-weight: 300 !important;
color: var(--aa-neutral-500) !important;
margin-bottom: var(--aa-space-2);
}
.card-content .card-title {
font-size: var(--aa-heading-h6-size) !important; /* 14px Poppins 600 */
font-weight: var(--aa-heading-h6-weight) !important;
line-height: var(--aa-heading-h6-lh) !important;
color: var(--aa-navy) !important;
margin-bottom: var(--aa-space-2) !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-content .card-text {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-body-small-size) !important; /* 12px */
line-height: 1.6 !important;
color: var(--aa-neutral-600) !important;
/* 4 líneas máx — funciona aunque el HTML tenga varios */
max-height: calc(0.75rem * 1.6 * 4);
overflow: hidden;
display: block !important;
}
/* Párrafos internos: no clamp individual, el contenedor ya limita */
.card-content .card-text p,
.card-content .card-text * {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-body-small-size) !important;
line-height: 1.6 !important;
color: var(--aa-neutral-600) !important;
display: block !important;
overflow: visible !important;
margin-bottom: 0 !important;
}
.card-content .card-footer {
display: flex;
gap: var(--aa-space-2);
align-items: center;
justify-content: space-between;
padding: var(--aa-space-3) var(--aa-space-4) !important;
border-top: 0 !important;
background: transparent !important;
}
/* Pill de fecha — fondo lavanda, pill shape */
.card-date-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background-color: var(--aa-pastel-purple-100);
color: var(--aa-purple-60) !important;
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-mini-size) !important;
font-weight: 400 !important;
padding: 3px 10px;
border-radius: var(--aa-radius-pill);
margin-bottom: var(--aa-space-3);
white-space: nowrap;
}
/* Placeholder cuando la noticia no tiene imagen */
.card-content__img-placeholder {
height: 160px;
background: linear-gradient(135deg, var(--aa-pastel-cyan-100) 0%, var(--aa-pastel-sky-100) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--aa-primary);
font-size: 2rem;
}
/* Grid responsive de Content Cards */
.content-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: var(--aa-space-6);
align-items: stretch;
justify-content: center;
}
/* 1 fila visible — fila explícita en auto-height, filas implícitas en 0 + overflow hidden */
.content-cards-grid--single-row {
grid-template-rows: auto;
grid-auto-rows: 0px;
overflow: hidden;
}
/* La tarjeta ocupa toda la celda del grid en columna */
.content-cards-grid .card-content {
height: 100%;
display: flex !important;
flex-direction: column !important;
}
/* El cuerpo crece para empujar el footer al fondo */
.content-cards-grid .card-content .card-body {
flex: 1 !important;
}
/* Estado vacío reutilizable */
.aa-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--aa-space-8) var(--aa-space-6);
gap: var(--aa-space-3);
}
.aa-empty-state__icon {
font-size: 3rem;
color: var(--aa-neutral-400);
}
.aa-empty-state__text {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-body-medium-size) !important;
color: var(--aa-neutral-500) !important;
margin: 0;
}
/* ================================================================
Noticia Ver — página de detalle de artículo
================================================================ */
.noticia-ver__hero {
width: 100%;
border-radius: var(--aa-radius-lg) var(--aa-radius-lg) 0 0;
background-color: var(--aa-neutral-100);
display: flex;
align-items: center;
justify-content: center;
}
.noticia-ver__hero-img {
width: 100%;
height: auto;
max-height: 600px;
object-fit: contain;
display: block;
border-radius: var(--aa-radius-lg) var(--aa-radius-lg) 0 0;
}
.noticia-ver__placeholder {
height: 260px;
border-radius: var(--aa-radius-lg) var(--aa-radius-lg) 0 0;
font-size: 3rem;
}
.noticia-ver__body {
font-size: 1rem;
line-height: 1.7;
color: var(--aa-neutral-700);
}
.noticia-ver__body img {
max-width: 100%;
height: auto;
border-radius: var(--aa-radius-md);
margin: 1rem 0;
}
/* ================================================================
Institution Card — Figma spec exacto
Layout: [avatar 48px] | [info-col: [name+chevron] | [line] | [stats]]
================================================================ */
.card-institution {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
padding: 12px 16px;
background: #ffffff;
border-radius: 24px;
/* box-shadow: 0px 4px 10px #CBEEFF;*/
border: none !important;
position: relative;
}
.card-institution--clickable {
transition: box-shadow 0.2s ease;
}
.card-institution--clickable:hover {
box-shadow: 0 4px 16px rgba(70, 193, 255, 0.15);
}
/* Avatar circular — fondo #CBEEFF */
.card-institution__avatar {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 24px;
background-color: #CBEEFF;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
align-self: flex-start;
flex-shrink: 0;
}
.card-institution__avatar img {
width: 24px;
height: 24px;
object-fit: contain;
border-radius: 3.2px;
}
.card-institution__avatar-placeholder {
color: var(--aa-primary);
font-size: 1.1rem;
}
/* Columna de info — ocupa el resto */
.card-institution__info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex: 1;
min-width: 0;
}
/* Fila: nombre+subtítulo | chevron */
.card-institution__header {
display: flex;
flex-direction: row;
align-items: center;
gap: 40px;
width: 100%;
}
.card-institution__name-col {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.card-institution__name {
font-family: var(--aa-font-heading) !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 26px !important;
color: #001A3F !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-institution__subtitle {
font-family: var(--aa-font-body) !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 14px !important;
color: #666666 !important;
opacity: 0.7;
}
/* Chevron — círculo 32px fondo #CBEEFF */
.card-institution__chevron {
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 40px;
background-color: #CBEEFF;
display: flex;
align-items: center;
justify-content: center;
color: #46C1FF;
text-decoration: none;
font-size: 0.85rem;
flex-shrink: 0;
}
.card-institution__chevron:hover {
background-color: #b0e4ff;
color: #46C1FF;
text-decoration: none;
}
/* Línea separadora — entre header y stats */
.card-institution__divider {
width: 100%;
height: 0;
border: none;
border-top: 1px solid #CBEEFF;
margin: 0;
}
/* Fila de stats — alineadas a la izquierda, gap 32px */
.card-institution__stats {
display: flex;
flex-direction: row;
align-items: center;
gap: 32px;
}
.card-institution__stat {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.card-institution__stat-value {
font-family: var(--aa-font-heading) !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 26px !important;
color: #46C1FF !important;
text-align: center;
}
.card-institution__stat-label {
font-family: var(--aa-font-body) !important;
font-size: 11px !important;
font-weight: 300 !important;
line-height: 13px !important;
color: #666666 !important;
opacity: 0.7;
}
/* Contacto (teléfono / correo) — solo en variante lg */
.card-institution__contact {
display: flex;
flex-direction: column;
gap: 6px;
}
.card-institution__contact-item {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--aa-font-body) !important;
font-size: 13px !important;
color: #444444 !important;
}
.card-institution__contact-icon {
color: #46C1FF;
font-size: 13px;
width: 14px;
flex-shrink: 0;
}
/* Variante grande — avatar 80px, nombre más grande, sin white-space nowrap */
.card-institution--lg {
padding: 24px 32px !important;
gap: 28px;
}
.card-institution--lg .card-institution__avatar {
width: 100px;
height: 100px;
min-width: 100px;
border-radius: 50px;
}
.card-institution--lg .card-institution__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
.card-institution--lg .card-institution__name {
font-size: 28px !important;
line-height: 1.2 !important;
white-space: normal;
}
.card-institution--lg .card-institution__subtitle {
font-size: 14px !important;
opacity: 1;
}
.card-institution--lg .card-institution__header {
gap: 16px;
}
.card-institution--lg .card-institution__contact {
gap: 10px;
margin-top: 4px;
}
.card-institution--lg .card-institution__contact-item {
font-size: 15px !important;
gap: 10px;
}
.card-institution--lg .card-institution__contact-icon {
font-size: 15px;
width: 16px;
}
/* ════ 4. ADMINISTRATIVE CARD — Figma exacto ════════════════════════════ */
/* Grid contenedor */
.admin-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
justify-content: center;
}
/* Card */
.card-admin {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px 20px;
gap: 16px;
background: #FFFFFF;
box-shadow: 0px 4px 10px #CBEEFF;
border-radius: 28px;
border: none !important;
text-align: center;
text-decoration: none;
transition: box-shadow 0.2s ease, transform 0.2s ease;
position: relative;
}
.card-admin:hover {
box-shadow: 0 8px 28px #CBEEFF !important;
transform: translateY(-2px);
text-decoration: none;
}
/* Marco exterior del ícono: 68x68, fondo #CBEEFF, radio 24px */
.card-admin__icon {
width: 92px;
height: 92px;
min-width: 92px;
border-radius: 28px;
background-color: #CBEEFF;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
/* Imagen de curso dentro del marco */
.card-admin__icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Marco interior (cuando no hay imagen): 32x32, fondo #67CCFF, radio 8px */
.card-admin__icon-inner {
width: 44px;
height: 44px;
border-radius: 10px;
/*background-color: #67CCFF;*/
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 16px;
}
.card-admin__icon-inner img {
width: 56px;
height: 56px;
object-fit: contain;
/* filter: brightness(0) invert(1);*/
}
/* Área de texto: título + descripción */
.card-admin__body {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
}
/* Título — Poppins 600, 14px, #001A3F */
.card-admin__title {
font-family: var(--aa-font-heading) !important;
font-size: 20px !important;
font-weight: 600 !important;
line-height: 26px !important;
color: #001A3F !important;
margin: 0 !important;
width: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Descripción — Public Sans 400, 12px, #666666 */
.card-admin__desc {
font-family: var(--aa-font-body) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 18px !important;
color: #666666 !important;
margin: 0 !important;
width: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Botón "Entrar" más grande dentro de la card-admin (el botón real usa las
clases .btn.btnMenuModulos.roundeNew, no .card-admin__btn) */
.card-admin .btnMenuModulos {
width: 170px !important;
padding: 12px 20px !important;
font-size: 15px !important;
}
/* Botón "Entrar" — #46C1FF, radio 24px, Public Sans 700, 16px */
.card-admin__btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px 32px;
gap: 8px;
width: 100%;
background: #46C1FF !important;
border-radius: 24px !important;
border: none !important;
font-family: var(--aa-font-body) !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 19px !important;
color: #FFFFFF !important;
text-decoration: none;
transition: background 0.15s ease;
cursor: pointer;
}
.card-admin__btn:hover {
background: #2ab4f7 !important;
color: #FFFFFF !important;
text-decoration: none;
}
/* ════ 5. FEATURE CARD — fondo gradiente, todo blanco ══════════════════ */
/*
Figma: bg = Gradient/AA (Cyan-60→Purple-60), texto blanco, botón outline blanco
*/
.card-feature {
border-radius: var(--aa-radius-md) !important;
border: none !important;
background: var(--aa-gradient-aa) !important;
box-shadow: var(--aa-shadow-card) !important;
padding: var(--aa-space-6) !important;
display: flex;
flex-direction: column;
gap: var(--aa-space-3);
position: relative;
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-feature:hover {
box-shadow: 0 8px 32px rgba(70, 193, 255, 0.35) !important;
transform: translateY(-2px);
}
/* Decoración de fondo */
.card-feature::after {
content: "";
position: absolute;
top: -32px;
right: -32px;
width: 120px;
height: 120px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
pointer-events: none;
}
/* Badge de categoría */
.card-feature__badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: var(--aa-radius-pill);
background-color: rgba(255,255,255,0.2);
color: #fff !important;
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-mini-size) !important; /* 11px */
font-weight: 600 !important;
width: fit-content;
backdrop-filter: blur(4px);
}
.card-feature .card-title,
.card-feature__title {
font-family: var(--aa-font-heading) !important;
font-size: var(--aa-heading-h5-size) !important; /* 18px */
font-weight: var(--aa-heading-h5-weight) !important; /* 600 */
color: #fff !important;
margin-bottom: 0 !important;
}
.card-feature .card-text,
.card-feature__desc {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-body-small-size) !important; /* 12px */
color: rgba(255,255,255,0.8) !important;
line-height: 1.6 !important;
}
/* Botón dentro de Feature Card — outline blanco */
.card-feature .btn-outline-light,
.card-feature .btn-feature {
background-color: transparent !important;
border: 1.5px solid rgba(255,255,255,0.7) !important;
color: #fff !important;
border-radius: var(--aa-radius-sm) !important;
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-cta-md-size) !important;
font-weight: var(--aa-label-cta-md-weight) !important;
padding: var(--aa-space-2) var(--aa-space-4) !important;
width: fit-content;
transition: background-color 0.15s ease;
}
.card-feature .btn-outline-light:hover,
.card-feature .btn-feature:hover {
background-color: rgba(255,255,255,0.15) !important;
border-color: #fff !important;
}
/* ════ 6. NAVIGATION TAB BAR — tabs con icono + label ══════════════════ */
/*
Figma: fondo bg-light, icono + label, activo con circle cyan bg
*/
.aa-tab-bar {
display: flex;
align-items: center;
background-color: var(--aa-bg-white);
border: 1px solid var(--aa-neutral-300);
border-radius: var(--aa-radius-md);
padding: var(--aa-space-1) var(--aa-space-2);
gap: var(--aa-space-1);
box-shadow: var(--aa-shadow-card);
}
.aa-tab-bar__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: var(--aa-space-2) var(--aa-space-3);
border-radius: var(--aa-radius-sm);
cursor: pointer;
transition: background-color 0.15s ease;
text-decoration: none !important;
min-width: 56px;
}
.aa-tab-bar__item img,
.aa-tab-bar__item svg {
width: 20px;
height: 20px;
opacity: 0.4;
}
.aa-tab-bar__item span {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-mini-size) !important; /* 11px */
color: var(--aa-neutral-500) !important;
font-weight: 300 !important;
}
/* Tab activo — ícono en cyan, bg circle */
.aa-tab-bar__item.active {
background-color: var(--aa-pastel-cyan-100);
}
.aa-tab-bar__item.active img,
.aa-tab-bar__item.active svg { opacity: 1; }
.aa-tab-bar__item.active span {
color: var(--aa-scale-navy-60) !important;
font-weight: 600 !important;
}
/* ════ VARIANTES COMUNES ════════════════════════════════════════════════ */
/* Borde izquierdo de acento (para cards en listados) */
.card-accent-primary { border-left: 4px solid var(--aa-scale-cyan-60) !important; }
.card-accent-success { border-left: 4px solid var(--aa-scale-teal-60) !important; }
.card-accent-danger { border-left: 4px solid var(--aa-scale-coral-60) !important; }
.card-accent-warning { border-left: 4px solid var(--aa-scale-yellow-60) !important; }
.card-accent-info { border-left: 4px solid var(--aa-scale-sky-60) !important; }
.card-accent-secondary { border-left: 4px solid var(--aa-scale-purple-60) !important; }
/* Header con gradiente */
.card-header-gradient {
background: var(--aa-gradient-aa) !important;
color: #fff !important;
border-bottom: none !important;
}
.card-header-gradient .card-title { color: #fff !important; }
/* ── 5. BADGES ───────────────────────────────────────────────────────── */
/* Base: DS shape — radius 12 (--aa-radius-friendly-md) + typography */
.badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: var(--aa-radius-friendly-md) !important; /* 12px — Figma DataTable */
font-size: var(--aa-label-small-size) !important; /* 12px */
font-weight: var(--aa-label-small-weight) !important; /* 500 */
line-height: var(--aa-label-small-lh) !important; /* 18px */
font-family: var(--aa-font-body) !important;
padding: var(--aa-space-1) var(--aa-space-3) !important; /* 4px 12px */
white-space: nowrap !important;
vertical-align: middle !important;
letter-spacing: 0 !important;
}
/* Variantes semánticas — bg: pastel, texto: scale/60 (DataTable DS) */
.badge-primary {
background-color: var(--aa-cyan-100) !important; /* pastel/cyan-100 */
color: var(--aa-info-accent) !important; /* scale/cyan-60 */
}
.badge-success {
background-color: var(--aa-success-bg) !important; /* pastel/teal-100 */
color: var(--aa-success-accent) !important; /* scale/teal-60 */
}
.badge-danger {
background-color: var(--aa-error-bg) !important; /* pastel/pink-100 */
color: var(--aa-error-accent) !important; /* scale/coral-60 */
}
.badge-warning {
background-color: var(--aa-warning-bg) !important; /* pastel/yellow-100 */
color: var(--aa-warning-accent) !important; /* scale/yellow-60 */
}
.badge-info {
background-color: var(--aa-info-bg) !important; /* pastel/cyan-100 */
color: var(--aa-info-accent) !important; /* scale/cyan-60 */
}
.badge-secondary {
background-color: var(--aa-neutral-300) !important; /* #C7CDD5 */
color: var(--aa-neutral-700) !important; /* #333333 */
}
/* Mantener soft como aliases explícitos */
.badge-success-soft {
background-color: var(--aa-success-bg) !important;
color: var(--aa-success-text) !important;
}
.badge-danger-soft {
background-color: var(--aa-error-bg) !important;
color: var(--aa-error-text) !important;
}
.badge-warning-soft {
background-color: var(--aa-warning-bg) !important;
color: var(--aa-warning-text) !important;
}
.badge-info-soft {
background-color: var(--aa-info-bg) !important;
color: var(--aa-info-text) !important;
}
/* ── 6. LABELS / LABEL KEEN ─────────────────────────────────────────── */
/* Sólidos — usados en contextos no-estado (botones, encabezados, etc.) */
.label.label-primary {
background-color: var(--aa-cyan-60) !important;
color: #fff !important;
}
.label.label-success {
background-color: var(--aa-success-accent) !important;
color: #fff !important;
}
.label.label-danger {
background-color: var(--aa-error-accent) !important;
color: #fff !important;
}
.label.label-warning {
background-color: var(--aa-warning-accent) !important;
color: #fff !important;
}
.label.label-info {
background-color: var(--aa-info-accent) !important;
color: #fff !important;
}
/* ── Forma DS: radius 12 (Figma DataTable) — aplica a light, outline, focus ── */
.label.label-light-primary,
.label.label-light-success,
.label.label-light-danger,
.label.label-light-warning,
.label.label-light-info,
.label.label-light-focus,
.label.label-outline-info,
.label.label-outline-danger,
.label.label-outline-success,
.label.label-outline-warning {
display: inline-flex !important;
align-items: center !important;
border-radius: var(--aa-radius-friendly-md) !important; /* 12px — Figma DataTable */
padding: var(--aa-space-1) var(--aa-space-3) !important; /* 4px 12px */
font-size: var(--aa-label-small-size) !important; /* 12px */
font-weight: var(--aa-label-small-weight) !important; /* 500 */
line-height: var(--aa-label-small-lh) !important; /* 18px */
font-family: var(--aa-font-body) !important;
white-space: nowrap !important;
vertical-align: middle !important;
border: none !important;
}
/* Colores — bg: pastel, texto: scale/60 */
.label.label-light-primary {
background-color: var(--aa-pastel-cyan-100) !important; /* pastel/cyan-100 */
color: var(--aa-scale-cyan-60) !important; /* scale/cyan-60 */
}
.label.label-light-success {
background-color: var( --aa-pastel-teal-100) !important; /* pastel/teal-100 */
color: var(--aa-scale-teal-60) !important; /* scale/teal-60 */
}
.label.label-light-danger {
background-color: var(--aa-pastel-pink-100) !important; /* pastel/pink-100 */
color: var(--aa-scale-coral-60) !important; /* scale/coral-60 */
}
.label.label-light-warning {
background-color: var(--aa-pastel-yellow-100) !important; /* pastel/yellow-100 */
color: var(--aa-scale-yellow-60) !important; /* scale/yellow-60 */
}
.label.label-light-info {
background-color: var( --aa-pastel-teal-100) !important; /* pastel/cyan-100 */
color: var(--aa-scale-teal-60) !important; /* scale/cyan-60 */
}
/* Neutral — "Sin iniciar", estados desconocidos */
.label.label-light-focus {
background-color: var(--aa-neutral-300) !important; /* #C7CDD5 */
color: var(--aa-neutral-700) !important; /* #333333 */
}
/* Outline → convertidos a soft (DS no usa outline en DataTable) */
.label.label-outline-info {
background-color: var(--aa-pastel-yellow-100) !important; /* pastel/yellow-100 */
color: var(--aa-scale-yellow-60) !important; /* scale/yellow-60 */ /* scale/cyan-60 */
}
.label.label-outline-danger {
background-color: var(--aa-pastel-pink-100) !important; /* pastel/pink-100 */
color: var(--aa-scale-coral-60) !important; /* scale/coral-60 */
}
.label.label-outline-success {
background-color: var( --aa-pastel-teal-100) !important; /* pastel/teal-100 */
color: var(--aa-scale-teal-60) !important; /* scale/teal-60 */
}
.label.label-outline-warning {
background-color: var(--aa-pastel-yellow-100) !important; /* pastel/yellow-100 */
color: var(--aa-scale-yellow-60) !important; /* scale/yellow-60 */
}
/* ── 7. ALERTAS ──────────────────────────────────────────────────────── */
.alert {
border-radius: var(--aa-radius-sm) !important;
border-width: 1px !important;
border-style: solid !important;
font-family: var(--aa-font-body) !important;
}
.alert-success {
background-color: var(--aa-success-bg) !important;
border-color: var(--aa-success-accent) !important;
color: var(--aa-success-text) !important;
}
.alert-danger {
background-color: var(--aa-error-bg) !important;
border-color: var(--aa-error-accent) !important;
color: var(--aa-error-text) !important;
}
.alert-warning {
background-color: var(--aa-warning-bg) !important;
border-color: var(--aa-warning-accent) !important;
color: var(--aa-warning-text) !important;
}
.alert-info {
background-color: var(--aa-info-bg) !important;
border-color: var(--aa-info-accent) !important;
color: var(--aa-info-text) !important;
}
.alert-primary {
background-color: var(--aa-cyan-100) !important;
border-color: var(--aa-cyan-60) !important;
color: var(--aa-navy) !important;
}
/* ── 8. FORMS ─── DS: Forms & Inputs (node 119:2) ───────────────────── */
/*
Figma spec (nodo 119:143):
- bg: white border: 1px solid #c7cdd5 radius: 16px padding: 12px
- font: Public Sans Medium 12px / line-height 18px color: #001a3f
- placeholder color: #c7cdd5
- focus: border #46c1ff + ring rgba(70,193,255,.20)
*/
.form-control,
.custom-select,
.form-select,
select.form-control,
.Input-Profile {
border-radius: 16px !important; /* radius/playful/md */
border: 1px solid #c7cdd5 !important;
color: #001a3f !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 18px !important;
min-height: 42px !important;
padding: 10px 12px !important;
background-color: #ffffff !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.form-control::placeholder,
.custom-select::placeholder,
.Input-Profile::placeholder {
color: #c7cdd5 !important;
font-weight: 400 !important;
}
.form-control:focus,
.custom-select:focus,
.form-select:focus,
select.form-control:focus,
.Input-Profile:focus {
border-color: #46c1ff !important;
box-shadow: 0 0 0 3px rgba(70,193,255,.20) !important;
outline: none !important;
}
/* Select nativo — chevron igual al del DS */
select.form-control,
.custom-select,
.form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23c7cdd5' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
appearance: none !important;
-webkit-appearance: none !important;
padding-right: 32px !important;
}
/* Select nativo — chevron cyan al recibir foco */
select.form-control:focus,
.custom-select:focus,
.form-select:focus {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2346C1FF' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
}
/* ── VALIDACIÓN — estados error / válido (Figma nodes 119:78 / 119:114) ──
Error : border 1.5px #fe7883 (Scale/Coral/60) · bg blanco · glow coral
Válido: border 1.5px #50cfbc (Scale/Teal/60) · bg blanco · glow teal
Clases generadas:
Bootstrap 4 → .is-invalid / .is-valid / .was-validated :invalid/:valid
ASP.NET MVC → .input-validation-error / .field-validation-error
*/
/* ── ERROR ── */
.form-control.is-invalid,
.form-control.input-validation-error,
.was-validated .form-control:invalid,
.custom-select.is-invalid,
select.form-control.is-invalid,
select.form-control.input-validation-error,
textarea.form-control.is-invalid,
textarea.form-control.input-validation-error,
.Input-Profile.input-validation-error {
border-color: #fe7883 !important;
border-width: 1.5px !important;
background-color: #ffffff !important;
background-image: none !important;
box-shadow: none !important;
color: #001a3f !important;
}
.form-control.is-invalid:focus,
.form-control.input-validation-error:focus,
.was-validated .form-control:invalid:focus {
border-color: #fe7883 !important;
box-shadow: 0 0 0 3px rgba(254, 120, 131, 0.20) !important;
background-image: none !important;
}
/* Mensaje de error — jQuery Validate + Bootstrap */
.field-validation-error,
span.field-validation-error,
.invalid-feedback,
span.text-danger.field-validation-error {
color: #fe7883 !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 400 !important;
display: block !important;
margin-top: 4px !important;
}
/* ── VÁLIDO ── */
.form-control.is-valid,
.form-control.valid,
.was-validated .form-control:valid,
.custom-select.is-valid,
select.form-control.is-valid {
border-color: #50cfbc !important;
border-width: 1.5px !important;
background-color: #ffffff !important;
background-image: none !important;
box-shadow: none !important;
color: #001a3f !important;
}
.form-control.is-valid:focus,
.form-control.valid:focus,
.was-validated .form-control:valid:focus {
border-color: #50cfbc !important;
box-shadow: 0 0 0 3px rgba(80, 207, 188, 0.20) !important;
background-image: none !important;
}
.valid-feedback {
color: #50cfbc !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 400 !important;
display: block !important;
margin-top: 4px !important;
}
.form-label,
label.form-label {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--aa-navy) !important;
font-family: var(--aa-font-body) !important;
}
.input-group-text {
background-color: #fff !important;
border-color: var(--aa-border-color) !important;
color: var(--aa-secondary-text) !important;
border-radius: var(--aa-radius-sm) !important;
}
/* ── CHECKBOX — DS node 119:226 ──────────────────────────────────────
Figma: 18×18px · radius 4px · borde #b0b5be (neutral/400)
Checked: bg #46c1ff · ✓ blanco bold · overflow clip
Bootstrap 4: .custom-checkbox / Bootstrap 5: input[type=checkbox]
*/
/* BASE — box unchecked */
.custom-control-input ~ .custom-control-label::before {
width: 18px !important;
height: 18px !important;
border: 1.5px solid #b0b5be !important;
background-color: #ffffff !important;
transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.custom-checkbox .custom-control-input ~ .custom-control-label::before {
border-radius: 4px !important;
top: 2px !important;
}
/* Checked */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color: #46c1ff !important;
border-color: #46c1ff !important;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath fill='white' d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-size: 10px 8px !important;
background-repeat: no-repeat !important;
background-position: center !important;
width: 18px !important;
height: 18px !important;
top: 2px !important;
}
/* Indeterminate */
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
background-color: #46c1ff !important;
border-color: #46c1ff !important;
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='2' viewBox='0 0 10 2'%3E%3Crect fill='white' x='0' y='0' width='10' height='2' rx='1'/%3E%3C/svg%3E") !important;
background-size: 10px 2px !important;
background-repeat: no-repeat !important;
background-position: center !important;
width: 18px !important;
height: 18px !important;
top: 2px !important;
}
/* Focus */
.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 3px rgba(70,193,255,.20) !important;
border-color: #46c1ff !important;
}
/* Bootstrap 5 / form-check */
input[type="checkbox"].form-check-input {
width: 18px !important;
height: 18px !important;
border-radius: 4px !important;
border: 1.5px solid #b0b5be !important;
background-color: #ffffff !important;
cursor: pointer !important;
transition: background-color 0.15s, border-color 0.15s !important;
}
input[type="checkbox"].form-check-input:checked {
background-color: #46c1ff !important;
border-color: #46c1ff !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 4l3 3 5-6'/%3E%3C/svg%3E") !important;
background-size: 10px 8px !important;
}
input[type="checkbox"].form-check-input:focus {
border-color: #46c1ff !important;
box-shadow: 0 0 0 3px rgba(70,193,255,.20) !important;
}
/* ── RADIO — DS node 119:270 ─────────────────────────────────────────
Figma: 18×18px · círculo · borde #b0b5be
Selected: borde #46c1ff (2px) · punto central #46c1ff (8px)
*/
.custom-radio .custom-control-input ~ .custom-control-label::before {
border-radius: 50% !important;
width: 18px !important;
height: 18px !important;
border: 1.5px solid #b0b5be !important;
background-color: #ffffff !important;
top: 2px !important;
transition: border-color 0.15s, box-shadow 0.15s !important;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
background-color: #ffffff !important;
border: 2px solid #46c1ff !important;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
background-image: none !important;
background-color: #46c1ff !important;
border-radius: 50% !important;
width: 8px !important;
height: 8px !important;
top: 7px !important;
left: -18px !important;
}
.custom-radio .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 3px rgba(70,193,255,.20) !important;
border-color: #46c1ff !important;
}
/* Bootstrap 5 radio */
input[type="radio"].form-check-input {
width: 18px !important;
height: 18px !important;
border: 1.5px solid #b0b5be !important;
background-color: #ffffff !important;
cursor: pointer !important;
transition: border-color 0.15s !important;
}
input[type="radio"].form-check-input:checked {
background-color: #ffffff !important;
border: 2px solid #46c1ff !important;
background-image: radial-gradient(circle, #46c1ff 40%, transparent 40%) !important;
}
input[type="radio"].form-check-input:focus {
border-color: #46c1ff !important;
box-shadow: 0 0 0 3px rgba(70,193,255,.20) !important;
}
/* ── TOGGLE / SWITCH — DS node 119:305 ──────────────────────────────
Figma: track 40×22px · radius 11px
Off: track #c7cdd5 · thumb white 18px circle
On (Activado): track #46c1ff · thumb white derecha
*/
.custom-switch .custom-control-label::before {
width: 40px !important;
height: 22px !important;
border-radius: 11px !important;
background-color: #c7cdd5 !important;
border: none !important;
top: 0 !important;
left: -2.5rem !important;
transition: background-color 0.18s ease !important;
}
.custom-switch .custom-control-label::after {
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
background-color: #ffffff !important;
top: 3px !important;
left: calc(-2.5rem + 3px) !important;
transition: transform 0.18s ease, background-color 0.18s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,.15) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
background-color: #46c1ff !important;
border-color: transparent !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(18px) !important;
background-color: #ffffff !important;
}
.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 3px rgba(70,193,255,.20) !important;
}
/* Label texto — DS: Public Sans Regular 14px/22px navy */
.custom-control-label,
.form-check-label {
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 22px !important;
color: #001a3f !important;
cursor: pointer !important;
}
/* ── 9. TABLAS & DATATABLES ──────────────────────────────────────────── */
/*
Ref Figma: 📊 Data Table (node 48:2) · Alta Academia · Playful · Cyan
HTML real generado por DataTables + Bootstrap 4 (dt-bootstrap4):
div.dataTables_wrapper.dt-bootstrap4
div.row > div.col-sm-12 > table.table.table-hover.dataTable
div.row > div.dataTables_pager
div.dataTables_length > label > select
div.dataTables_paginate > ul.pagination > li.paginate_button.page-item > a.page-link
Nota: el dom no incluye 'f', el buscador es #inputSearch manual (fuera del wrapper)
*/
/* ══ CONTENEDOR ═══════════════════════════════════════════════════════ */
/* Solo cuando NO está dentro de una card — el wrapper actúa como card */
.dataTables_wrapper.dt-bootstrap4 {
background-color: #ffffff;
border-radius: var(--aa-radius-md); /* radius/playful/md */
/* border: 1px solid #c7cdd5;*/ /* Neutral/300 */
box-shadow: 0 4px 20px rgba(203,238,255,0.6);
overflow: visible; /* no clip — permite que la paginación sea visible */
padding: 0;
}
/* Cuando está dentro de card/card-custom: sin doble borde */
/* NOTA: se incluye .card-custom porque se quitó la clase .card de los wrappers */
.card .dataTables_wrapper.dt-bootstrap4,
.card-custom .dataTables_wrapper.dt-bootstrap4,
.card-body .dataTables_wrapper.dt-bootstrap4 {
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
overflow: visible !important;
}
/* ══ THEAD — Figma: Scale/Cyan/10 fondo + Navy/60 texto ══════════════ */
/* Selectores múltiples con alta especificidad para ganar al bundle */
.table > thead > tr > th,
table.dataTable > thead > tr > th,
div.dataTables_wrapper table > thead > tr > th,
.dataTables_scrollHead table > thead > tr > th {
background-color: #e9f8ff !important; /* Scale/Cyan/10 */
color: #001a3f !important; /* Scale/Navy/60 */
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 12px !important; /* Label/Small */
font-weight: 500 !important;
line-height: 18px !important;
padding: 12px 16px !important;
border-top: none !important;
border-bottom: 2px solid #cbeeff !important; /* Scale/Cyan/20 */
white-space: nowrap;
vertical-align: middle !important;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Anular el border del tr que pone style.bundle (#80A5DA) */
.table > thead > tr,
table.dataTable > thead > tr {
border-bottom: none !important;
}
/* ══ SORTING — anular ::before y ::after del bundle ═════════════════ */
/*
datatables.bundle.css usa:
::before { right:1em; content:"\2191" (↑); bottom:0.9em }
::after { right:0.5em; content:"\2193" (↓); bottom:0.9em }
Además inyecta dentro del
.
Ocultamos AMBOS y el span; usamos un único ::after centrado verticalmente.
*/
/* Ocultar ::before completamente */
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::before,
table.dataTable thead th.sorting_asc_disabled::before,
table.dataTable thead th.sorting_desc_disabled::before,
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before {
content: "" !important;
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
position: absolute !important;
opacity: 0 !important;
}
/* Ocultar el span DataTables_sort_icon que el JS inyecta */
table.dataTable thead th span.DataTables_sort_icon,
table.dataTable thead .DataTables_sort_icon {
display: none !important;
}
/* ::after — icono único, centrado verticalmente */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after,
table.dataTable thead th.sorting_asc_disabled::after,
table.dataTable thead th.sorting_desc_disabled::after,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
display: inline-block !important;
position: absolute !important;
right: 10px !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
font-size: 13px !important;
line-height: 1 !important;
color: #001a3f !important;
opacity: 0.35 !important;
color: #001a3f !important;
opacity: 0.35 !important;
}
table.dataTable thead th.sorting::after,
table.dataTable thead .sorting::after { content: "\21C5" !important; } /* ⇅ */
table.dataTable thead th.sorting_asc::after,
table.dataTable thead .sorting_asc::after { content: "\2191" !important; opacity: 1 !important; color: #46c1ff !important; }
table.dataTable thead th.sorting_desc::after,
table.dataTable thead .sorting_desc::after { content: "\2193" !important; opacity: 1 !important; color: #46c1ff !important; }
table.dataTable thead th.sorting_asc_disabled::after { content: "\2191" !important; opacity: 0.15 !important; }
table.dataTable thead th.sorting_desc_disabled::after { content: "\2193" !important; opacity: 0.15 !important; }
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
padding-right: 28px !important;
}
table.dataTable thead th.sorting:hover,
table.dataTable thead th.sorting_asc:hover,
table.dataTable thead th.sorting_desc:hover {
background-color: #cbeeff !important;
}
/* ══ CUERPO ══════════════════════════════════════════════════════════ */
.table > tbody > tr,
table.dataTable > tbody > tr {
background-color: #ffffff !important;
transition: background-color 0.12s ease;
}
.table > tbody > tr > td,
table.dataTable > tbody > tr > td {
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 14px !important; /* Body/Medium */
line-height: 22px !important;
color: #333333 !important; /* Neutral/700 */
vertical-align: middle !important;
padding: 12px 16px !important;
border-top: 1px solid #c7cdd5 !important;
border-bottom: none !important;
}
/* Anular border-bottom del tr del bundle */
.table > tbody > tr,
table.dataTable > tbody > tr {
border-bottom: none !important;
}
/* ══ HOVER FILA ══════════════════════════════════════════════════════ */
.table.table-hover > tbody > tr:hover > td,
table.dataTable > tbody > tr:hover > td {
background-color: #e9f8ff !important; /* Scale/Cyan/10 */
}
/* ══ FILA SELECCIONADA — Pastel/cyan-100 + borde izq Cyan/60 ════════ */
table.dataTable > tbody > tr.selected > td {
background-color: #cbeeff !important; /* Pastel/cyan-100 */
}
table.dataTable > tbody > tr.selected > td:first-child {
border-left: 3px solid #46c1ff !important; /* Scale/Cyan/60 */
}
/* ══ STRIPED ═════════════════════════════════════════════════════════ */
table.dataTable.stripe > tbody > tr:nth-child(even) > td,
table.dataTable.display > tbody > tr:nth-child(even) > td {
background-color: #f8f9fe !important; /* Background/light */
}
/* ══ BARRA SUPERIOR — aa-dt-topbar (Mostrar N registros) ════════════ */
/* Este row es el PRIMER hijo del dataTables_wrapper, antes de la tabla */
div.dataTables_wrapper > .row.aa-dt-topbar {
background-color: #ffffff !important;
padding: 8px 16px !important;
align-items: center !important;
margin: 0 !important;
}
/* Cuando hay una barra de controles arriba (:has), el topbar se fusiona con ella
sin bordes extra — la barra ya provee el borde superior y el radio */
.card-body .d-flex.justify-content-between + .dataTables_wrapper > .row.aa-dt-topbar {
border-top: none !important;
}
/* ══ BARRA INFERIOR — fila info | length + paginación ════════════════ */
/* Estructura del DOM: row:last-child contiene col-md-5 (info) y .dataTables_pager (length+pag) */
div.dataTables_wrapper > .row:last-child {
border-top: 1px solid #c7cdd5 !important;
background-color: #ffffff !important;
padding: 8px 0 !important;
align-items: center !important;
border-radius: 0 0 var(--aa-radius-md) var(--aa-radius-md) !important;
margin: 0 !important;
flex-wrap: nowrap !important; /* FIX: nowrap evita que info y paginación se apilen verticalmente */
}
/* En móvil (< 576 px) sí se permite el apilamiento */
@media (max-width: 575.98px) {
div.dataTables_wrapper > .row:last-child {
flex-wrap: wrap !important;
}
}
/* FIX: añadir .dt-bootstrap4 aumenta la especificidad a 0,5,1,
superando la regla de style.bundle.css (~0,4,0) que fuerza flex: 0 0 100%
en col-sm-12 y provocaba que las columnas ocuparan el 100% del ancho
aunque el contenedor fuera suficientemente ancho para tenerlas en línea. */
div.dataTables_wrapper.dt-bootstrap4 > .row:last-child > [class*="col-"] {
flex: 1 1 0 !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* Info "Mostrando 1 a N de X registros" */
div.dataTables_wrapper .dataTables_info {
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
color: #999999 !important;
padding: 6px 16px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* La columna que contiene length + pagination */
div.dataTables_wrapper .dataTables_pager {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 12px !important;
flex-wrap: nowrap !important;
padding: 6px 16px !important;
}
/* dataTables_paginate: no expandir */
div.dataTables_wrapper .dataTables_paginate {
flex: none !important;
display: inline-flex !important;
align-items: center !important;
}
/* Length "Mostrar N registros" */
div.dataTables_wrapper .dataTables_length {
display: flex !important;
align-items: center !important;
flex: none !important;
}
div.dataTables_wrapper .dataTables_length label {
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 12px !important;
color: #666666 !important;
font-weight: 400 !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
margin-bottom: 0 !important;
white-space: nowrap;
}
div.dataTables_wrapper .dataTables_length select {
height: 42px !important;
width: 80px !important;
border: 1px solid #c7cdd5 !important;
border-radius: 16px !important; /* radius/playful/md del DS */
padding: 0 32px 0 12px !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important; /* Medium */
line-height: 18px !important;
color: #001a3f !important;
background-color: #ffffff !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23c7cdd5' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
outline: none !important;
cursor: pointer !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
div.dataTables_wrapper .dataTables_length select:hover {
border-color: #46c1ff !important;
}
div.dataTables_wrapper .dataTables_length select:focus {
border-color: #46c1ff !important;
box-shadow: 0 0 0 3px rgba(70,193,255,.20) !important;
}
/* ══ PAGINACIÓN Bootstrap 4 ══════════════════════════════════════════════
Figma: botones 32×32, radius 8px, borde #c7cdd5, separados 4px
Activo: bg #46c1ff (Scale/Cyan/60), texto blanco
Bootstrap 4 usa margin-left:-1px para "conectar" botones — se anula aquí
CRÍTICO: style.bundle.css línea 56997 tiene:
.page-item:not(.previous):not(.next) { display: none }
— se sobreescribe aquí con !important
═══════════════════════════════════════════════════════════════════════════ */
/* Anular el display:none del Keen template que oculta los números */
.dataTables_wrapper .dataTables_paginate .pagination .page-item:not(.previous):not(.next) {
display: list-item !important;
}
/* ul wrapper — separar con gap, no expandir al ancho de la tabla */
div.dataTables_wrapper .dataTables_paginate ul.pagination,
div.dataTables_wrapper .dataTables_paginate .pagination {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
width: auto !important;
gap: 4px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* li — quitar el margin negativo de Bootstrap */
div.dataTables_wrapper .dataTables_paginate .pagination .page-item,
div.dataTables_wrapper .dataTables_paginate .pagination li {
margin: 0 !important;
list-style: none !important;
}
/* a.page-link — resetear margin negativo de Bootstrap 4 */
div.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link,
div.dataTables_wrapper .dataTables_paginate .pagination .page-item:not(:first-child) .page-link {
margin-left: 0 !important;
}
/* a.page-link — sobreescribe style.bundle: bg #0959B3, border-radius:2.42rem, border:2px solid #0D51D9 */
/* Figma: cuadrado 32px, radius 8px, borde #c7cdd5, texto navy */
div.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 8px !important;
border: 1px solid #c7cdd5 !important; /* borde visible en todos */
background-color: #ffffff !important;
color: #001a3f !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1 !important;
text-decoration: none !important;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
position: static !important; /* anula z-index de Bootstrap */
z-index: auto !important;
box-shadow: none !important;
}
/* hover */
div.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link:hover,
div.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link:focus {
background-color: #e9f8ff !important;
border-color: #46c1ff !important;
color: #001a3f !important;
box-shadow: none !important;
outline: none !important;
z-index: auto !important;
}
/* ── ACTIVO — Scale/Cyan/60 ── */
div.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link,
div.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link:hover,
div.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link:focus {
background-color: #46c1ff !important;
border-color: #46c1ff !important;
color: #ffffff !important;
font-weight: 700 !important;
z-index: auto !important;
box-shadow: none !important;
}
/* ── PREVIOUS / NEXT — solo icono, sin texto ── */
div.dataTables_wrapper .dataTables_paginate .pagination .page-item.previous .page-link,
div.dataTables_wrapper .dataTables_paginate .pagination .page-item.next .page-link {
font-size: 16px !important;
font-weight: 600 !important;
color: #46c1ff !important;
}
div.dataTables_wrapper .dataTables_paginate .pagination .page-item.previous .page-link:hover,
div.dataTables_wrapper .dataTables_paginate .pagination .page-item.next .page-link:hover {
background-color: #e9f8ff !important;
border-color: #46c1ff !important;
}
/* ── ELLIPSIS ── */
div.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled:not(.previous):not(.next) .page-link {
border: none !important;
background-color: transparent !important;
color: #b0b5be !important;
cursor: default !important;
pointer-events: none !important;
}
/* ── DESHABILITADO (prev/next al inicio/fin) ── */
div.dataTables_wrapper .dataTables_paginate .pagination .page-item.previous.disabled .page-link,
div.dataTables_wrapper .dataTables_paginate .pagination .page-item.next.disabled .page-link {
background-color: #ffffff !important;
border-color: #e9ecef !important;
color: #c7cdd5 !important;
cursor: not-allowed !important;
pointer-events: none !important;
z-index: auto !important;
}
/* ══ ESTADO PROCESANDO ═══════════════════════════════════════════════ */
div.dataTables_wrapper .dataTables_processing {
background-color: rgba(248,249,254,0.94) !important;
border: 1px solid #c7cdd5 !important;
border-radius: 8px !important;
color: #001a3f !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 12px !important;
box-shadow: 0 4px 20px rgba(203,238,255,0.6) !important;
}
/* ══ SIN RESULTADOS ══════════════════════════════════════════════════ */
table.dataTable > tbody > tr > td.dataTables_empty {
color: #b0b5be !important; /* Neutral/400 */
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 14px !important;
text-align: center !important;
padding: 48px 16px !important;
}
/* ══ BARRA DE CONTROLES — Exportar + Buscar (encima de la tabla) ════ */
/*
Estructura real en las vistas:
.card-body > .d-flex.justify-content-between > [export-btn] + [input-icon]
> .dataTables_wrapper (DataTables envuelve la )
Estrategia: la barra de controles y el wrapper comparten la misma card.
La barra toma el borde superior y radio top; el wrapper toma el borde inferior
con radio bottom. Sin overflow:hidden para no cortar dropdowns.
*/
.card-body .d-flex.justify-content-between:has(+ .dataTables_wrapper),
.card-body .d-flex.justify-content-between:has(+ table) {
background-color: #ffffff;
border-radius: var(--aa-radius-md) var(--aa-radius-md) 0 0;
padding: 12px 16px !important;
margin-bottom: 0 !important;
box-shadow: 0 4px 20px rgba(203,238,255,0.6);
}
/* Wrapper que sigue: radio bottom + borde laterales + fondo */
.card-body .d-flex.justify-content-between + .dataTables_wrapper.dt-bootstrap4 {
border-radius: 0 0 var(--aa-radius-md) var(--aa-radius-md) !important;
border-top: none !important;
box-shadow: 0 4px 20px rgba(203,238,255,0.4) !important;
overflow: visible !important;
}
/* ══ BUSCADOR MANUAL #inputSearch (fuera del wrapper) ═══════════════ */
#inputSearch,
.datatable-search {
border: 1px solid #c7cdd5 !important;
border-radius: 100px !important; /* pill shape como en el DS */
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 14px !important;
color: #001a3f !important;
background-color: #ffffff !important;
padding-left: 16px !important;
padding-right: 40px !important;
height: 40px !important;
min-width: 180px !important;
transition: border-color 0.15s, box-shadow 0.15s !important;
}
#inputSearch::placeholder,
.datatable-search::placeholder {
color: #b0b5be !important;
}
#inputSearch:focus,
.datatable-search:focus {
border-color: #46c1ff !important;
box-shadow: 0 0 0 3px rgba(70,193,255,.20) !important;
outline: none !important;
}
/* Icono de búsqueda dentro del input-icon-right */
.input-icon.input-icon-right > span {
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: #b0b5be !important;
pointer-events: none !important;
}
/* ══ BADGES DE ESTADO — DataTable Design System (tokens únicamente) ══ */
/*
Forma base compartida — aplica a todos los selectores de estado.
Los colores se definen por grupo semántico debajo.
*/
/* Forma base — radius 12 (Figma: radius/friendly/md) */
.badge-activo, .badge-active, .badge.activo, span.label-activo, td .activo,
.badge-inactivo, .badge-inactive, .badge.inactivo, span.label-inactivo, td .inactivo,
.badge-pendiente, .badge-pending, .badge.pendiente, span.label-pendiente, td .pendiente,
.badge-aprobado, .badge-approved, .badge.aprobado,
.badge-rechazado, .badge-rejected, .badge.rechazado,
.badge-cancelado, .badge-cancelled, .badge.cancelado,
.badge-encurso, .badge-en-curso, .badge.encurso,
.badge-completado, .badge-completed, .badge.completado,
.badge-habilitado, .badge.habilitado,
.badge-deshabilitado, .badge.deshabilitado,
.badge-disponible, .badge.disponible,
.badge-ppendiente, .badge-otro,
.estado-aprobado, .estado-pendiente, .estado-rechazado {
display: inline-flex !important;
align-items: center !important;
border-radius: var(--aa-radius-friendly-md) !important; /* 12px — Figma DataTable */
font-size: var(--aa-label-small-size) !important; /* 12px */
font-weight: var(--aa-label-small-weight) !important; /* 500 */
line-height: var(--aa-label-small-lh) !important; /* 18px */
font-family: var(--aa-font-body) !important;
padding: var(--aa-space-1) var(--aa-space-3) !important; /* 4px 12px */
white-space: nowrap !important;
vertical-align: middle !important;
border: none !important;
}
/* ── Activo / Aprobado / Completado / Habilitado / Disponible ─── teal */
/* bg: pastel/teal-100 · letra: scale/teal-60 */
.badge-activo, .badge-active, .badge.activo, span.label-activo, td .activo,
.badge-aprobado, .badge-approved, .badge.aprobado,
.badge-completado, .badge-completed, .badge.completado,
.badge-habilitado, .badge.habilitado,
.badge-disponible, .badge.disponible,
.estado-aprobado {
background-color: var(--aa-success-bg) !important; /* pastel/teal-100 #CEF2EC */
color: var(--aa-success-accent) !important; /* scale/teal-60 #50CFBC */
}
/* ── Inactivo / Rechazado / Deshabilitado ────── coral */
/* bg: pastel/pink-100 · letra: scale/coral-60 */
.badge-inactivo, .badge-inactive, .badge.inactivo, span.label-inactivo, td .inactivo,
.badge-rechazado, .badge-rejected, .badge.rechazado,
.badge-deshabilitado, .badge.deshabilitado,
.estado-rechazado {
background-color: var(--aa-error-bg) !important; /* pastel/pink-100 #FFD9DC */
color: var(--aa-error-accent) !important; /* scale/coral-60 #FE7883 */
}
/* ── Pendiente / Terminado / Por revisar ────── amarillo */
/* bg: pastel/yellow-100 · letra: scale/yellow-60 */
.badge-pendiente, .badge-pending, .badge.pendiente, span.label-pendiente, td .pendiente,
.badge-ppendiente,
.estado-pendiente {
background-color: var(--aa-warning-bg) !important; /* pastel/yellow-100 #FFECCF */
color: var(--aa-warning-accent) !important; /* scale/yellow-60 #FFBC54 */
}
/* ── En Curso / En Progreso ────────────────── cyan */
/* bg: pastel/cyan-100 · letra: scale/cyan-60 */
.badge-encurso, .badge-en-curso, .badge.encurso {
background-color: var(--aa-info-bg) !important; /* pastel/cyan-100 #CBEEFF */
color: var(--aa-info-accent) !important; /* scale/cyan-60 #46C1FF */
}
/* ── Cancelado / Otro / Estado neutral ───────────────────────── gris */
.badge-cancelado, .badge-cancelled, .badge.cancelado,
.badge-otro {
background-color: var(--aa-neutral-300) !important; /* #C7CDD5 */
color: var(--aa-neutral-700) !important; /* #333333 */
}
/* ══ BOTONES ACCIÓN INLINE (edit/delete en cada fila) ════════════════ */
.btn-action-edit, .dt-btn-edit {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
background-color: #cbeeff !important; /* Pastel/cyan-100 */
color: #46c1ff !important;
border: none !important;
cursor: pointer;
transition: background-color 0.15s;
font-size: 14px;
padding: 0 !important;
}
.btn-action-edit:hover, .dt-btn-edit:hover {
background-color: #ace3ff !important; /* Scale/Cyan/30 */
color: #2d7ca3 !important;
}
.btn-action-delete, .dt-btn-delete {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
background-color: #ffd9dc !important; /* Pastel/pink-100 */
color: #fe7883 !important; /* Scale/Coral/60 */
border: none !important;
cursor: pointer;
transition: background-color 0.15s;
font-size: 14px;
padding: 0 !important;
}
.btn-action-delete:hover, .dt-btn-delete:hover {
background-color: #ffc2c7 !important; /* Scale/Coral/30 */
color: #a34d54 !important;
}
/* ══ FILAS CON FONDO SEMÁNTICO ═══════════════════════════════════════ */
.table > tbody > tr.tr-success > td { background-color: #cef2ec !important; }
.table > tbody > tr.tr-danger > td { background-color: #ffd9dc !important; }
.table > tbody > tr.tr-warning > td { background-color: #ffeccf !important; }
.table > tbody > tr.tr-info > td { background-color: #cbeeff !important; }
/* ══ INPUT NATIVO — Radio button custom DS (appearance: none) ════════
Para inputs sin wrapper Keen/Bootstrap.
Figma: 18×18px · borde #b0b5be unchecked · borde #46c1ff 2px + punto 8px checked
*/
input[type="radio"]:not(.form-check-input) {
appearance: none !important;
-webkit-appearance: none !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
border: 1.5px solid #b0b5be !important;
border-radius: 50% !important;
background-color: #ffffff !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
margin-right: 6px !important;
position: relative !important;
transition: border-color 0.15s ease !important;
flex-shrink: 0 !important;
}
input[type="radio"]:not(.form-check-input):checked {
border: 2px solid #46c1ff !important;
background-color: #ffffff !important;
}
input[type="radio"]:not(.form-check-input):checked::before {
content: '' !important;
display: block !important;
width: 8px !important;
height: 8px !important;
background-color: #46c1ff !important;
border-radius: 50% !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
input[type="radio"]:not(.form-check-input):focus {
outline: none !important;
box-shadow: 0 0 0 3px rgba(70, 193, 255, 0.20) !important;
}
input[type="radio"]:not(.form-check-input):hover:not(:disabled) {
border-color: #46c1ff !important;
}
/* ══ INPUT NATIVO — Checkbox accent (para los que no tienen wrapper) ══ */
input[type="checkbox"]:not(.custom-control-input):not([class*="form-check"]) {
accent-color: #46c1ff !important;
cursor: pointer !important;
}
/* ══ KEEN .checkbox component — sobrescribe #009175 → DS cyan ════════
Estructura:
IMPORTANTE: usar siempre ~ span:first-of-type (no ~ span) para que
los estados solo afecten la caja visual, nunca el span de texto.
*/
/* ── Checked — solo la caja visual ─────────────────────── */
.checkbox > input:checked ~ span:first-of-type,
.checkbox.checkbox-primary > input:checked ~ span:first-of-type,
.checkbox.checkbox-success > input:checked ~ span:first-of-type,
.checkbox.checkbox-info > input:checked ~ span:first-of-type {
background-color: #46c1ff !important;
border-color: #46c1ff !important;
}
.checkbox > input:checked ~ span:first-of-type::after,
.checkbox.checkbox-primary > input:checked ~ span:first-of-type::after {
border-color: #ffffff !important;
}
/* ── Hover / Focus border ──────────────────────────────── */
.checkbox:hover > input:not([disabled]) ~ span:first-of-type,
.checkbox > input:focus ~ span:first-of-type {
border-color: #46c1ff !important;
transition: border-color 0.15s ease !important;
}
/* ── Focus ring ────────────────────────────────────────── */
.checkbox > input:focus ~ span:first-of-type {
box-shadow: 0 0 0 3px rgba(70, 193, 255, 0.20) !important;
}
/* ── Disabled ──────────────────────────────────────────── */
.checkbox > input[disabled] ~ span:first-of-type,
.checkbox > input:disabled ~ span:first-of-type {
border-color: #d5dae3 !important;
background-color: #f5f7fa !important;
opacity: 0.65 !important;
cursor: not-allowed !important;
}
.checkbox > input[disabled]:checked ~ span:first-of-type,
.checkbox > input:disabled:checked ~ span:first-of-type {
background-color: rgba(70, 193, 255, 0.35) !important;
border-color: rgba(70, 193, 255, 0.35) !important;
}
/* ── Label y span de texto: siempre transparentes ─────── */
label.checkbox,
label.aa-grupo-select-row {
background-color: transparent !important;
color: inherit !important;
}
label.checkbox:hover,
label.checkbox:focus,
label.checkbox:active,
label.aa-grupo-select-row:hover,
label.aa-grupo-select-row:focus,
label.aa-grupo-select-row:active {
background-color: transparent !important;
}
.checkbox > span + span {
background-color: transparent !important;
color: var(--aa-navy, #001A3F) !important;
border: none !important;
box-shadow: none !important;
}
/* Cursor pointer en el label */
label.checkbox { cursor: pointer !important; }
/* Base span — el span debe ser flex para que ::after quede centrado */
.checkbox > span:first-of-type {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
width: 18px !important;
height: 18px !important;
border-radius: 4px !important;
border: 1.5px solid #b0b5be !important;
background-color: #ffffff !important;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.checkbox.checkbox-lg > span:first-of-type {
width: 20px !important;
height: 20px !important;
}
/* Keen aplica .checkbox > span a TODOS los hijos span (visual-box styles).
Este reset neutraliza esos estilos para el segundo span (texto),
sin afectar el primer span (caja visual). */
.checkbox > span.aa-checkbox-box {
flex-shrink: 0 !important;
}
.checkbox > span + span,
.checkbox > span.aa-grupo-label-text {
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
border: none !important;
background-color: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
flex: 1 1 auto !important;
flex-shrink: 1 !important;
min-width: 0 !important;
align-items: unset !important;
justify-content: unset !important;
}
/* Fila bloqueada en tablas del wizard */
tr.aa-row-blocked {
opacity: 0.45 !important;
pointer-events: none !important;
}
/* Tabla del wizard de matrícula */
.aa-wizard-table > tbody > tr > td,
.aa-wizard-table > thead > tr > th {
border-bottom: 1.5px solid var(--aa-border-color) !important;
height: 48px !important;
vertical-align: middle !important;
font-family: var(--aa-font-body), Helvetica, sans-serif !important;
}
/* ══ KEEN .radio component — sobrescribe #009175 → DS cyan ══════════ */
.radio > input:checked ~ span,
.radio.radio-primary > input:checked ~ span {
background-color: #46c1ff !important;
border-color: #46c1ff !important;
}
.radio > input:checked ~ span:after,
.radio.radio-primary > input:checked ~ span:after {
background-color: #ffffff !important;
}
.radio:hover > input:not([disabled]) ~ span,
.radio > input:focus ~ span {
border-color: #46c1ff !important;
}
/* ── 10. PAGINACIÓN GENÉRICA (fuera de DataTables) ───────────────────── */
/* Aplica a .pagination de Bootstrap en el resto de vistas */
.pagination .page-item .page-link {
color: #001a3f !important;
border-color: #c7cdd5 !important;
border-radius: 8px !important;
background-color: #ffffff !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
margin-left: 0 !important;
}
.pagination .page-item .page-link:hover {
background-color: #e9f8ff !important;
border-color: #46c1ff !important;
color: #001a3f !important;
}
.pagination .page-item.active .page-link {
background-color: #46c1ff !important;
border-color: #46c1ff !important;
color: #ffffff !important;
font-weight: 700 !important;
}
.pagination .page-item.disabled .page-link {
color: #c7cdd5 !important;
border-color: #e9ecef !important;
background-color: #ffffff !important;
}
/* ── 11. NAV TABS & PILLS ────────────────────────────────────────────── */
.nav-tabs .nav-link {
color: var(--aa-secondary-text) !important;
font-family: var(--aa-font-body) !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
color: var(--aa-cyan-60) !important;
border-bottom-color: var(--aa-cyan-60) !important;
font-weight: 600 !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
background-color: var(--aa-cyan-60) !important;
color: #fff !important;
}
/* ── 12. MODAL ───────────────────────────────────────────────────────── */
.modal-content {
border-radius: var(--aa-radius-md) !important;
box-shadow: var(--aa-shadow-modal) !important;
border: none !important;
}
.modal-header {
border-bottom-color: var(--aa-border-color) !important;
align-items: center !important;
}
.modal-footer {
border-top-color: var(--aa-border-color) !important;
}
.modal-title {
font-family: var(--aa-font-heading) !important;
font-weight: 600 !important;
color: var(--aa-navy) !important;
}
/* Botón × close — DS: círculo lleno ámbar #FFBC54 (Scale/Yellow/60)
El bundle pone border: 2px solid #F9BB5F + bg transparent + padding enorme.
Se reemplaza por círculo sólido 32px con ícono blanco.
*/
.modal-header .close,
button.close {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
border-radius: 50% !important;
background-color: #f3f5f7 !important;
border: 1px solid #c7cdd5 !important;
opacity: 1 !important;
text-shadow: none !important;
padding: 0 !important;
margin: 0 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #5e6278 !important;
flex-shrink: 0 !important;
transition: background-color 0.15s ease, transform 0.15s ease !important;
cursor: pointer !important;
line-height: 1 !important;
box-shadow: none !important;
}
.modal-header .close:hover:not(:disabled),
button.close:hover:not(:disabled) {
background-color: #e4e6ef !important;
color: #3f4254 !important;
opacity: 1 !important;
transform: scale(1.08) !important;
}
/* Icono y texto interno */
.modal-header .close .ki,
.modal-header .close span,
.modal-header .close i,
button.close .ki,
button.close span,
button.close i {
color: inherit !important;
font-size: 13px !important;
line-height: 1 !important;
}
/* ── 13. DROPDOWN ────────────────────────────────────────────────────── */
.dropdown-menu {
border-radius: var(--aa-radius-md) !important;
border-color: var(--aa-border-color) !important;
box-shadow: var(--aa-shadow-card) !important;
font-family: var(--aa-font-body) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--aa-cyan-100) !important;
color: var(--aa-navy) !important;
}
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--aa-cyan-60) !important;
color: #fff !important;
}
/* ── 14. TOASTR override ─────────────────────────────────────────────── */
/*
Fuente: Figma DS → Feedback / Toast Notifications
Librería: Toastr v2.1.4 (jQuery)
CSS de origen: assets/plugins/global/plugins.bundle.css
Sobrescribe las clases oficiales #toast-container / .toast-* usando
exclusivamente tokens del DS. La lógica toastr.success/error/warning/info
permanece intacta.
*/
/* ── Container ─────────────────────────────────────────────────────────── */
#toast-container {
pointer-events: none !important;
z-index: 999999 !important;
}
#toast-container > div {
pointer-events: auto !important;
}
/* ── Base toast ─────────────────────────────────────────────────────────── */
#toast-container > .toast,
.toast {
position: relative !important;
background-color: var(--aa-white) !important;
color: var(--aa-navy) !important;
border-radius: var(--aa-radius-friendly-md) !important; /* 12px */
box-shadow: var(--aa-shadow-card) !important;
padding: var(--aa-space-3) var(--aa-space-4) var(--aa-space-3) 52px !important;
width: 340px !important;
margin: 0 0 var(--aa-space-2) 0 !important; /* 8px gap */
opacity: 1 !important;
background-position: 16px center !important;
background-repeat: no-repeat !important;
background-size: 20px 20px !important;
border-left: 3px solid transparent !important;
overflow: hidden !important;
transition: box-shadow 0.18s ease !important;
}
#toast-container > .toast:hover,
.toast:hover {
box-shadow: 0 6px 24px rgba(203, 238, 255, 0.85) !important;
cursor: pointer !important;
}
/* ── Success — pastel/teal-100 · teal-60 ────────────────────────────── */
#toast-container > .toast-success,
.toast-success {
background-color: var(--aa-success-bg) !important; /* #CEF2EC */
border-left-color: var(--aa-success-accent) !important; /* #50CFBC */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='%2350CFBC' stroke-width='1.5'/%3E%3Cpath d='M6.5 10l2.5 2.5 4.5-4.5' fill='none' stroke='%2350CFBC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* ── Error — pastel/pink-100 · coral-60 ─────────────────────────────── */
#toast-container > .toast-error,
.toast-error {
background-color: var(--aa-error-bg) !important; /* #FFD9DC */
border-left-color: var(--aa-error-accent) !important; /* #FE7883 */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='%23FE7883' stroke-width='1.5'/%3E%3Cpath d='M7 7l6 6M13 7l-6 6' fill='none' stroke='%23FE7883' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
/* ── Warning — pastel/yellow-100 · yellow-60 ────────────────────────── */
#toast-container > .toast-warning,
.toast-warning {
background-color: var(--aa-warning-bg) !important; /* #FFECCF */
border-left-color: var(--aa-warning-accent) !important; /* #FFBC54 */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='%23FFBC54' stroke-width='1.5'/%3E%3Cpath d='M10 6.5v4.5' stroke='%23FFBC54' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='13.5' r='1' fill='%23FFBC54'/%3E%3C/svg%3E") !important;
}
/* ── Info — pastel/cyan-100 · cyan-60 ───────────────────────────────── */
#toast-container > .toast-info,
.toast-info {
background-color: var(--aa-info-bg) !important; /* #CBEEFF */
border-left-color: var(--aa-info-accent) !important; /* #46C1FF */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='%2346C1FF' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='7' r='1' fill='%2346C1FF'/%3E%3Cpath d='M10 10v4' stroke='%2346C1FF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
/* ── Title (Label/Medium — Public Sans 14/500) ─────────────────────── */
.toast-title {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-medium-size) !important; /* 14px */
font-weight: var(--aa-label-medium-weight) !important; /* 500 */
line-height: var(--aa-label-medium-lh) !important; /* 22px */
color: var(--aa-navy) !important;
margin-bottom: var(--aa-space-1) !important; /* 4px */
}
/* ── Message (Body/Small — Public Sans 12/400) ─────────────────────── */
.toast-message {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-body-small-size) !important; /* 12px */
font-weight: var(--aa-body-medium-weight) !important; /* 400 */
line-height: var(--aa-body-medium-lh) !important; /* 22px */
color: var(--aa-secondary-text) !important; /* #696B92 */
word-wrap: break-word !important;
}
.toast-message a,
.toast-message label {
color: var(--aa-navy) !important;
text-decoration: underline !important;
}
.toast-message a:hover {
color: var(--aa-cyan-60) !important;
}
/* ── Close button (×) ─────────────────────────────────────────────────── */
.toast-close-button {
position: absolute !important;
right: var(--aa-space-2) !important; /* 8px */
top: var(--aa-space-2) !important; /* 8px */
float: none !important;
font-size: 1.125rem !important;
font-weight: 400 !important;
line-height: 1 !important;
color: var(--aa-neutral-400) !important;
text-shadow: none !important;
opacity: 1 !important;
background: transparent !important;
border: none !important;
border-radius: var(--aa-radius-friendly-sm) !important; /* 6px */
padding: 2px 5px !important;
cursor: pointer !important;
transition: color 0.15s ease, background-color 0.15s ease !important;
}
.toast-close-button:hover,
.toast-close-button:focus {
color: var(--aa-navy) !important;
background-color: rgba(0, 26, 63, 0.08) !important;
opacity: 1 !important;
}
/* ── Progress bar ─────────────────────────────────────────────────────── */
.toast-progress {
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
height: 3px !important;
border-radius: 0 0 var(--aa-radius-friendly-md) 0 !important;
opacity: 0.65 !important;
}
.toast-success .toast-progress { background-color: var(--aa-success-accent) !important; }
.toast-error .toast-progress { background-color: var(--aa-error-accent) !important; }
.toast-warning .toast-progress { background-color: var(--aa-warning-accent) !important; }
.toast-info .toast-progress { background-color: var(--aa-info-accent) !important; }
/* ── Position helpers — offsets from viewport edges ──────────────────── */
.toast-top-right { top: var(--aa-space-4) !important; right: var(--aa-space-4) !important; }
.toast-top-left { top: var(--aa-space-4) !important; left: var(--aa-space-4) !important; }
.toast-bottom-right { bottom: var(--aa-space-4) !important; right: var(--aa-space-4) !important; }
.toast-bottom-left { bottom: var(--aa-space-4) !important; left: var(--aa-space-4) !important; }
.toast-top-center { top: var(--aa-space-4) !important; }
.toast-bottom-center{ bottom: var(--aa-space-4) !important; }
.toast-top-full-width,
.toast-bottom-full-width {
width: 100% !important;
left: 0 !important;
right: 0 !important;
}
.toast-top-full-width > .toast,
.toast-bottom-full-width > .toast {
width: calc(100% - var(--aa-space-8)) !important;
max-width: 600px !important;
margin-inline: auto !important;
}
/* ── 15. MODAL FOOTER — Botón Cancelar (texto link cyan) ─────────────── */
/*
Figma node 119:371: "Cancelar" es solo texto #46c1ff, sin fondo ni borde.
HTML: .modal-footer > .btn.btn-secondary
Sobreescribe el .btn-secondary global (purple) solo en modal-footer.
*/
.modal-footer .btn.btn-secondary,
.modal-footer .btn.btn-secondary:not(:disabled):not(.disabled),
.modal-footer .btn.btn-secondary.btn-lg,
.modal-footer .btn.btn-secondary.btn-sm {
background-color: transparent !important;
border-color: transparent !important;
color: #46c1ff !important;
box-shadow: none !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.modal-footer .btn.btn-secondary:hover:not(:disabled):not(.disabled),
.modal-footer .btn.btn-secondary:focus:not(.btn-text) {
background-color: rgba(70, 193, 255, 0.08) !important;
border-color: transparent !important;
color: #399ed1 !important;
box-shadow: none !important;
}
/* ── 16. BOOTSTRAP DATEPICKER (bootstrap-datepicker v1.9) ────────────── */
/*
Figma node 119:351: input de fecha + ícono calendario.
El popup es .datepicker.dropdown-menu con tabla de días.
*/
.datepicker.dropdown-menu {
border-radius: var(--aa-radius-md) !important;
border: 1px solid #c7cdd5 !important;
box-shadow: 0 4px 20px rgba(203, 238, 255, 0.6) !important;
padding: 12px !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
}
.datepicker-dropdown:before {
border-bottom-color: #c7cdd5 !important;
}
.datepicker-dropdown:after {
border-bottom-color: #ffffff !important;
}
.datepicker-dropdown.datepicker-orient-top:before {
border-top-color: #c7cdd5 !important;
border-bottom: 0 !important;
}
.datepicker-dropdown.datepicker-orient-top:after {
border-top-color: #ffffff !important;
border-bottom: 0 !important;
}
.datepicker table tr td,
.datepicker table tr th {
border-radius: 8px !important;
width: 34px !important;
height: 34px !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 13px !important;
color: #001a3f !important;
}
.datepicker table tr th {
color: #b0b5be !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
.datepicker table tr th.prev,
.datepicker table tr th.next {
color: #46c1ff !important;
font-size: 16px !important;
font-weight: 700 !important;
}
.datepicker table tr th.prev:hover,
.datepicker table tr th.next:hover {
background-color: #e9f8ff !important;
color: #399ed1 !important;
}
.datepicker table tr th.datepicker-switch {
color: #001a3f !important;
font-weight: 700 !important;
font-size: 14px !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.datepicker table tr th.datepicker-switch:hover {
background-color: #e9f8ff !important;
color: #46c1ff !important;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
background-color: #e9f8ff !important;
color: #001a3f !important;
cursor: pointer !important;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
color: #c7cdd5 !important;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
color: #b0b5be !important;
background: none !important;
}
.datepicker table tr td.today,
.datepicker table tr td.today:focus,
.datepicker table tr td.today:hover {
background-color: #cbeeff !important;
border-color: transparent !important;
color: #001a3f !important;
font-weight: 700 !important;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.highlighted,
.datepicker table tr td.active:focus {
background-color: #46c1ff !important;
border-color: #46c1ff !important;
color: #ffffff !important;
font-weight: 700 !important;
text-shadow: none !important;
background-image: none !important;
}
.datepicker table tr td span {
border-radius: 8px !important;
height: 36px !important;
line-height: 36px !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 13px !important;
color: #001a3f !important;
}
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
background-color: #e9f8ff !important;
color: #001a3f !important;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
background-color: #46c1ff !important;
border-color: transparent !important;
color: #ffffff !important;
text-shadow: none !important;
background-image: none !important;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
color: #c7cdd5 !important;
}
/* Input de fecha — ícono calendario en input-group-append */
.input-daterange .form-control {
border-radius: 16px !important;
}
.input-daterange .input-group-append .input-group-text,
.input-daterange .input-group-prepend .input-group-text {
border-radius: 0 16px 16px 0 !important;
background-color: #e9f8ff !important;
border-color: #c7cdd5 !important;
color: #46c1ff !important;
}
/* ── 17. CHECKBOX/RADIO — refuerzo de especificidad para contextos modal ─ */
/*
Refuerzo: doble contexto para ganar sobre cualquier regla del bundle
que pueda activarse dentro de modales u otros contenedores.
*/
.modal .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.card .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.form-group .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color: #46c1ff !important;
border-color: #46c1ff !important;
}
.modal .custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.card .custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.form-group .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
background-color: #ffffff !important;
border: 2px solid #46c1ff !important;
}
.modal .custom-radio .custom-control-input:checked ~ .custom-control-label::after,
.card .custom-radio .custom-control-input:checked ~ .custom-control-label::after,
.form-group .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
background-image: none !important;
background-color: #46c1ff !important;
border-radius: 50% !important;
width: 8px !important;
height: 8px !important;
top: 7px !important;
left: -18px !important;
}
.modal .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.card .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.form-group .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
background-color: #46c1ff !important;
border-color: transparent !important;
}
/* ── 15. PROGRESS BAR ────────────────────────────────────────────────── */
.progress {
border-radius: var(--aa-radius-pill) !important;
background-color: var(--aa-neutral-300) !important;
height: 6px;
}
.progress-bar {
background-color: var(--aa-cyan-60) !important;
border-radius: var(--aa-radius-pill) !important;
}
.progress-bar.bg-success {
background-color: var(--aa-success-accent) !important;
}
.progress-bar.bg-danger {
background-color: var(--aa-error-accent) !important;
}
.progress-bar.bg-warning {
background-color: var(--aa-warning-accent) !important;
}
/* ── 16. COLORES SEMÁNTICOS — texto y bg Bootstrap 4 ──────────────── */
.text-primary {
color: var(--aa-cyan-60) !important;
}
.text-success {
color: var(--aa-success-text) !important;
}
/* Figma: mensajes de error usan Scale/Coral/60 = #fe7883, no el /80 más oscuro */
.text-danger {
color: #fe7883 !important;
}
.text-warning {
color: var(--aa-warning-text) !important;
}
.text-info {
color: var(--aa-info-text) !important;
}
.text-secondary {
color: var(--aa-purple-60) !important;
}
.text-muted {
color: var(--aa-secondary-text) !important;
}
.text-dark {
color: var(--aa-navy) !important;
}
.bg-primary {
background-color: var(--aa-cyan-60) !important;
}
.bg-success {
background-color: var(--aa-success-accent) !important;
}
.bg-danger {
background-color: var(--aa-error-accent) !important;
}
.bg-warning {
background-color: var(--aa-warning-accent) !important;
}
.bg-info {
background-color: var(--aa-info-accent) !important;
}
.bg-secondary {
background-color: var(--aa-purple-60) !important;
}
.bg-light {
background-color: var(--aa-body-bg) !important;
}
.border {
border-color: var(--aa-border-color) !important;
}
.border-primary {
border-color: var(--aa-cyan-60) !important;
}
/* ── 17. SVG ICONS — Keen (colores primarios) ───────────────────────── */
.svg-icon-primary svg g [fill] {
fill: var(--aa-cyan-60) !important;
}
.svg-icon-success svg g [fill] {
fill: var(--aa-success-accent) !important;
}
.svg-icon-danger svg g [fill] {
fill: var(--aa-error-accent) !important;
}
.svg-icon-warning svg g [fill] {
fill: var(--aa-warning-accent) !important;
}
.svg-icon-info svg g [fill] {
fill: var(--aa-info-accent) !important;
}
/* ── 18. PULSE (notificaciones) ─────────────────────────────────────── */
.pulse-primary > .pulse-ring {
border-color: var(--aa-cyan-60) !important;
}
/* ── 19. SPINNER / LOADER ────────────────────────────────────────────── */
.spinner-border.text-primary,
.spinner-grow.text-primary {
color: var(--aa-cyan-60) !important;
}
/* ── 20. WRAPPER & LAYOUT PRINCIPAL ─────────────────────────────────── */
#kt_wrapper,
.wrapper {
background-color: var(--aa-body-bg) !important;
}
/* ── 20b. KEEN ASIDE / SIDEBAR ───────────────────────────────────────── */
/* Fondo sidebar */
.aside,
#kt_aside,
.aside-menu-wrapper,
#kt_aside_menu_wrapper,
#kt_aside_menu,
.menu-nav,
.aside-menu {
background-color: var(--aa-white) !important;
}
/* Brand/logo area — solo aplica al aside (en header lo sobreescribe .header-brand) */
.aside .brand {
background-color: var(--aa-white) !important;
border-bottom: 1px solid var(--aa-border-color) !important;
}
/* Logo siempre visible — independiente del estado collapsed/minimized del aside */
.brand-logo,
.brand-logo img,
#kt_brand .brand-logo,
#kt_brand .brand-logo img,
.aside-minimize .brand-logo,
.aside-minimize .brand-logo img,
.aside-minimize-hover .brand-logo,
.aside-minimize-hover .brand-logo img {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
max-width: 100% !important;
}
/* Enlace de menú base */
.menu-link {
color: var(--aa-navy) !important;
font-family: var(--aa-font-body) !important;
font-size: 13px !important;
border-radius: var(--aa-radius-sm) !important;
}
.menu-link:hover {
background-color: var(--aa-cyan-10) !important;
color: var(--aa-navy) !important;
}
.menu-text {
color: var(--aa-navy) !important;
font-family: var(--aa-font-body) !important;
}
/* Estado activo del ítem de menú — Design System AA */
.menu-item.active {
padding: var(--aa-space-2) !important; /* 8px */
}
.menu-item.active > .menu-link {
background: var(--aa-cyan-100) !important; /* #DAF3FF — pastel activo */
border-left: 4px solid var(--aa-cyan-60) !important; /* #46C1FF */
border-radius: var(--aa-radius-sm) !important; /* 8px — Playful/sm */
padding: var(--aa-space-2) var(--aa-space-3) !important; /* 8px 12px */
}
.menu-item.active img {
filter: brightness(0) saturate(100%) invert(69%) sepia(98%) saturate(1724%) hue-rotate(171deg) brightness(103%) contrast(101%) !important;
}
.menu-item.active .menu-text {
color: var(--aa-cyan-60) !important; /* #46C1FF */
font-weight: 600 !important;
}
/* Sección del menú — etiqueta */
.menu-section .menu-text,
.menu-section > .menu-text {
color: var(--aa-secondary-text) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
/* kt- prefix (Keen v1 classes que aún pueden estar presentes) */
.kt-aside__menu .kt-menu__item--active > .kt-menu__link {
background-color: var(--aa-cyan-100) !important;
border-left: 4px solid var(--aa-cyan-60) !important;
border-radius: var(--aa-radius-sm) !important;
}
.kt-aside__menu .kt-menu__item--active > .kt-menu__link .kt-menu__link-text {
color: var(--aa-cyan-60) !important;
font-weight: 600 !important;
}
.kt-aside__menu .kt-menu__item > .kt-menu__link:hover {
background-color: var(--aa-cyan-10) !important;
}
/* ── 20c. SIDEBAR USER ───────────────────────────────────────────────── */
/* Corrige flex-column-fluid (flex: 1 0 auto) que impide encoger el menú,
dejando al sidebar-user fuera del viewport en aside-fixed */
#kt_aside_menu_wrapper {
flex: 1 1 0 !important;
min-height: 0 !important;
overflow: hidden !important;
padding-top: 70px !important;
}
#kt_aside_menu {
height: 100% !important;
}
.sidebar-user {
margin-top: auto !important;
padding: 1rem !important;
border-top: 1px solid var(--aa-border-color) !important;
display: flex !important;
align-items: center !important;
gap: .75rem !important;
background-color: var(--aa-white) !important;
}
.sidebar-user img {
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
object-fit: cover !important;
flex-shrink: 0 !important;
background-color: var(--aa-cyan-40) !important;
}
.sidebar-user-info span {
display: block !important;
}
.sidebar-user-info .name {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--aa-navy) !important;
font-family: var(--aa-font-body) !important;
}
.sidebar-user-info .role {
font-size: 11px !important;
color: var(--aa-secondary-text) !important;
font-family: var(--aa-font-body) !important;
}
/* Minimized aside — ocultar texto, solo avatar */
.aside-minimize:not(.aside-minimize-hover) .sidebar-user {
justify-content: center !important;
padding: .75rem !important;
}
.aside-minimize:not(.aside-minimize-hover) .sidebar-user-info {
display: none !important;
}
/* ── 21. HEADER / TOPBAR ─────────────────────────────────────────────── */
/* Header: fijo en la parte superior, una sola línea, z-index > aside */
#kt_header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 90px !important;
z-index: 1001 !important;
background-color: var(--aa-white) !important;
border-bottom: 1px solid var(--aa-border-color) !important;
display: flex !important;
align-items: center !important;
padding: 0 !important;
overflow: visible !important;
}
#kt_header > nav {
flex: 1 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
min-width: 0 !important;
}
#kt_header > nav > .container-fluid {
height: 100% !important;
align-items: center !important;
}
/* Grupo izquierdo: hamburger + logo como flex row */
.header-brand {
flex-shrink: 0 !important;
gap: 8px !important;
align-items: center !important;
}
/* #kt_brand en header — sin estilos de sidebar */
.header-brand #kt_brand,
.header-brand .brand {
background: transparent !important;
border: none !important;
padding: 0 8px !important;
display: flex !important;
align-items: center !important;
flex-shrink: 0 !important;
height: auto !important;
min-height: 0 !important;
}
.header-logo-link {
display: flex !important;
align-items: center !important;
text-decoration: none !important;
}
/* Logo horizontal — flex item normal, sin position absolute */
.LogoNabAA {
position: static !important;
width: auto !important;
height: 60px !important;
cursor: pointer !important;
flex-shrink: 0 !important;
z-index: auto !important;
display: block !important;
}
/* Ul derecha: sin mb-7 ni posición incorrecta */
.Ul_R {
flex-shrink: 0 !important;
margin-bottom: 0 !important;
align-items: center !important;
}
/* btnMobile: solo visible en móvil (<992px) */
/* StyleDuplicado.css:755 le pone "position:relative; right:55px" sin !important,
pensado para compensar el ancho de #kt_brand cuando ese botón era visible en
mobile. Ahora que #kt_brand se oculta en mobile, ese right:55px ya no debe
aplicar o empuja el logo/burger fuera de la pantalla por la izquierda. */
.btnMobile {
display: none !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
position: static !important;
right: auto !important;
}
@media (max-width: 991px) {
.btnMobile {
display: flex !important;
opacity: 1 !important;
}
.header-brand .LogoNabAA {
display: none !important;
}
/* #kt_aside_toggle es el toggle de minimizado del aside (solo desktop);
en mobile el toggle real es #kt_aside_mobile_toggle dentro de .btnMobile.
Sin esto, los dos botones de menú se renderizan pegados uno al otro. */
.header-brand #kt_brand {
display: none !important;
}
}
/* ── Aside: desde top-0, detrás del header ────────────────────────── */
#kt_aside,
.aside.aside-left.aside-fixed {
top: 0 !important;
height: 100vh !important;
}
/* Desktop: aside detrás del header fijo */
@media (min-width: 992px) {
#kt_aside,
.aside.aside-left.aside-fixed {
z-index: 1000 !important;
}
}
/* Mobile: el aside offcanvas debe quedar por encima de su overlay (z-index 1000) */
@media (max-width: 991px) {
#kt_aside,
.aside.aside-left.aside-fixed {
z-index: 1002 !important;
}
}
/* Empujar contenido del aside por debajo del header */
#kt_aside_menu_wrapper {
padding-top: 70px !important;
}
/* Contenido principal: padding-top = altura del header */
.page {
margin-top: 0 !important;
padding-top: 70px !important;
}
/* El theme (header-mobile-fixed .wrapper) suma 55px extra pensados para un
header mobile de 55px que ya no existe; .page ya empuja todo 70px, así que
se anula para que el aside y el contenido queden alineados en mobile */
@media (max-width: 991px) {
.header-mobile-fixed .wrapper {
padding-top: 0 !important;
}
}
/* Anula el hack position:relative/bottom negativo de StyleDuplicado.css
que subía el contenido y lo ocultaba detrás del header fijo */
.ContenedorBody,
#kt_content.ContenedorBody {
position: static !important;
bottom: auto !important;
top: auto !important;
}
/* ── Botones circulares del header (campana e idioma) — mismo tamaño ── */
.btn-notificaciones,
.btn.btn-icon.btn-notificaciones,
.btn.btn-icon.btn-notificaciones.btn-lg,
.DivIdiomas {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
background-color: #cdf1ff !important; /* aa-cyan-20 hardcoded */
border-radius: 50% !important;
border: none !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
transition: background-color 0.18s ease, transform 0.12s ease !important;
}
/* Alta especificidad para ganarle al bundle en la campana */
.btn.btn-icon.btn-notificaciones.btn-lg:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-icon.btn-notificaciones:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn-notificaciones:hover {
background-color: #9de6f8 !important; /* aa-cyan-30 hardcoded */
box-shadow: 0 2px 10px rgba(70, 193, 255, 0.35) !important;
transform: translateY(-1px) !important;
}
.DivIdiomas:hover {
background-color: #9de6f8 !important;
box-shadow: 0 2px 10px rgba(70, 193, 255, 0.35) !important;
transform: translateY(-1px) !important;
}
.DivIdiomas img {
width: 20px !important;
height: 20px !important;
display: block !important;
}
/* ── Perfil de usuario ───────────────────────────────────────────────── */
.InformacionPerfil {
padding: 5px 80px 10px 18px;
border-radius: 100px;
background-color: #cdf1ff !important;
width: 308px !important;
height: 50px !important;
transition: background-color 0.18s ease !important;
}
.InformacionPerfil span {
display: block;
color: black;
text-align: left;
width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Hover en el botón padre (#kt_quick_user_toggle) afecta al InformacionPerfil hijo */
#kt_quick_user_toggle:hover .InformacionPerfil,
#kt_quick_user_toggle:focus .InformacionPerfil {
background-color: #9de6f8 !important;
}
/* El botón wrapper del perfil también necesita transición */
#kt_quick_user_toggle {
transition: background-color 0.18s ease !important;
border-radius: 100px !important;
}
#kt_quick_user_toggle:hover {
background-color: transparent !important;
}
/* StyleDuplicado.css tiene reglas legacy por rango de ancho que pisan a esta
clase (ej. display:none !important entre 700-1000px, position:absolute con
width/height:200px entre 320-450px). Se fuerzan aquí todas las propiedades
con !important para que ningún breakpoint viejo pueda volver a romperla. */
.UserAZulAA {
display: block !important;
background-color: var(--aa-cyan-40) !important;
border-radius: 100% !important;
width: 40px !important;
height: 40px !important;
position: relative !important;
top: auto !important;
bottom: auto !important;
overflow: hidden !important;
}
/* Desktop: el avatar se monta sobre la píldora .InformacionPerfil (visible desde 1121px) */
@media (min-width: 1121px) {
.UserAZulAA {
left: 45px !important;
right: auto !important;
}
}
/* Mobile/tablet: .InformacionPerfil está oculta (display:none <=1120px),
así que el avatar no debe desplazarse o se sale del header */
@media (max-width: 1120px) {
.UserAZulAA {
left: 0 !important;
right: 0 !important;
}
}
/* ── Panel de perfil de usuario (#kt_quick_user) navi-items ──────────── */
#kt_quick_user .navi-item {
display: block !important;
margin-bottom: 6px !important;
text-decoration: none !important;
}
/* Mismos tokens que .form-control y .select2-selection--single */
#kt_quick_user .navi-item .navi-link,
#kt_quick_user .navi .navi-item .navi-link {
display: flex !important;
align-items: center !important;
border-radius: var(--aa-radius-playful-md) !important; /* 16px */
border: 1px solid var(--aa-border-color) !important; /* #C7CDD5 */
background-color: #ffffff !important;
padding: 8px 12px !important;
padding-left: 12px !important;
padding-right: 12px !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
min-height: 42px !important;
color: var(--aa-navy) !important;
}
#kt_quick_user .navi-item .navi-link:hover,
#kt_quick_user .navi .navi-item .navi-link:hover {
border-color: #46c1ff !important;
box-shadow: 0 0 0 3px rgba(70, 193, 255, 0.15) !important;
background-color: #ffffff !important;
color: var(--aa-navy) !important;
}
/* Eliminar fondo del contenedor icono (.bg-light bootstrap usa !important) */
#kt_quick_user .navi-item .navi-link .symbol,
#kt_quick_user .navi-item .navi-link .symbol.bg-light {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
flex-shrink: 0 !important;
}
#kt_quick_user .navi-item .navi-link .symbol .symbol-label {
background-color: transparent !important;
border-radius: 6px !important;
width: 26px !important;
height: 26px !important;
}
#kt_quick_user .navi-item .navi-link .navi-text .font-weight-bold {
color: var(--aa-navy) !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 18px !important;
}
#kt_quick_user .navi-item .navi-link .navi-text .text-muted {
color: #8c96a3 !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 400 !important;
line-height: 16px !important;
}
/* ── 22. SWEETALERT2 override ────────────────────────────────────────── */
/*
Fuente: Figma DS → Feedback / 6. Alerts / 6. Modal
Sobrescribe clases oficiales de SweetAlert2 v11 usando exclusivamente
tokens del DS. La lógica de Swal.fire() permanece intacta.
Cargado DESPUÉS de style.bundle.css → las reglas con !important ganan
sobre los inline-styles que SweetAlert2 inyecta via confirmButtonColor.
*/
/* ── Backdrop ─────────────────────────────────────────────────────────── */
/* Keen usa .swal2-shown; SweetAlert2 puro usa .swal2-backdrop-show */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation,
.swal2-container.swal2-shown {
background: rgba(0, 26, 63, 0.40) !important;
}
/* ── Popup (contenedor del modal) ─────────────────────────────────────── */
.swal2-popup {
padding: var(--aa-space-8) var(--aa-space-8) 0 !important; /* 0 bottom → actions lo controla */
border-radius: var(--aa-radius-md) !important; /* 16px */
box-shadow: var(--aa-shadow-modal) !important;
font-family: var(--aa-font-body) !important;
color: var(--aa-navy) !important;
background-color: var(--aa-white) !important;
max-width: 380px !important;
width: 100% !important;
}
/* ── Variables por tipo de alerta ─────────────────────────────────────── */
/* --swal-separator: bg pastel del icono (coincide con el tipo de alerta) */
.swal2-popup {
--swal-btn: var(--aa-primary);
--swal-btn-hover: var(--aa-cyan-70);
--swal-btn-active: #2a8ab5;
--swal-btn-shadow: rgba(70, 193, 255, 0.45);
--swal-btn-color: #ffffff;
--swal-cancel-border: var(--aa-border-color);
--swal-cancel-color: var(--aa-navy);
--swal-cancel-bg: transparent;
--swal-cancel-hover-bg: #f5f8fa;
--swal-cancel-hover-bdr: var(--aa-navy);
--swal-separator: var(--aa-border-color);
}
.swal2-popup.swal2-icon-error {
--swal-btn: var(--aa-error-accent); /* #FE7883 */
--swal-btn-hover: var(--aa-scale-coral-70);
--swal-btn-active: var(--aa-error-text);
--swal-btn-shadow: rgba(254, 120, 131, 0.45);
--swal-separator: var(--aa-error-bg); /* #FFD9DC */
}
.swal2-popup.swal2-icon-success {
--swal-btn: var(--aa-success-accent); /* #50CFBC */
--swal-btn-hover: var(--aa-scale-teal-70);
--swal-btn-active: var(--aa-success-text);
--swal-btn-shadow: rgba(80, 207, 188, 0.45);
--swal-separator: var(--aa-success-bg); /* #CEF2EC */
}
.swal2-popup.swal2-icon-warning {
--swal-btn: var(--aa-warning-accent); /* #FFBC54 */
--swal-btn-hover: var(--aa-scale-yellow-70); /* #D19A45 */
--swal-btn-active: var(--aa-warning-text);
--swal-btn-shadow: rgba(255, 188, 84, 0.45);
--swal-cancel-bg: #FFE9C7;
--swal-cancel-border: #FFE9C7;
--swal-cancel-color: var(--aa-scale-yellow-70); /* #D19A45 */
--swal-cancel-hover-bg: #FFD4A0;
--swal-cancel-hover-bdr: #FFD4A0;
--swal-separator: var(--aa-warning-bg); /* #FFECCF */
}
.swal2-popup.swal2-icon-info {
--swal-separator: var(--aa-info-bg); /* #CBEEFF */
}
.swal2-popup.swal2-icon-question {
--swal-btn: var(--aa-scale-purple-70); /* #6366BA */
--swal-btn-hover: var(--aa-scale-purple-80); /* #4D4F91 */
--swal-btn-active: var(--aa-scale-purple-90); /* #3A3C6D */
--swal-btn-shadow: rgba(99, 102, 186, 0.45);
--swal-cancel-bg: var(--aa-pastel-purple-100); /* #D9DAF7 */
--swal-cancel-border: var(--aa-pastel-purple-100);
--swal-cancel-color: var(--aa-scale-purple-70); /* #6366BA */
--swal-cancel-hover-bg: var(--aa-scale-purple-30); /* #C3C4F2 */
--swal-cancel-hover-bdr: var(--aa-scale-purple-70);
--swal-separator: var(--aa-pastel-purple-100); /* #D9DAF7 */
}
/* ── Header ───────────────────────────────────────────────────────────── */
.swal2-header {
padding: 0 !important;
}
/* ── Title (Heading/H5 — Poppins 18/600) ──────────────────────────────── */
.swal2-title {
font-family: var(--aa-font-heading) !important;
font-size: var(--aa-heading-h5-size) !important; /* 18px */
font-weight: var(--aa-heading-h5-weight) !important; /* 600 */
line-height: var(--aa-heading-h5-lh) !important; /* 26px */
color: var(--aa-navy) !important;
padding: 0 !important;
margin: var(--aa-space-3) 0 0 0 !important;
}
/* ── HTML / Body text (Body/Medium — Public Sans 14/400) ─────────────── */
.swal2-html-container,
.swal2-content {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-body-medium-size) !important; /* 14px */
font-weight: var(--aa-body-medium-weight) !important; /* 400 */
line-height: var(--aa-body-medium-lh) !important; /* 22px */
color: var(--aa-secondary-text) !important; /* #696B92 */
padding: 0 !important;
margin: var(--aa-space-2) 0 0 0 !important;
}
/* ── Icono — base ─────────────────────────────────────────────────────── */
.swal2-icon {
border-width: 3px !important;
width: 64px !important;
height: 64px !important;
margin: 0 auto var(--aa-space-3) auto !important;
font-size: 12.8px !important; /* 64 ÷ 5 — escala todos los em internos de SweetAlert2 proporcionalmente */
}
/* ── Icono — Success (pastel/teal-100 · teal-60) ─────────────────────── */
.swal2-icon.swal2-success {
background-color: var(--aa-success-bg) !important; /* #CEF2EC */
border-color: var(--aa-success-accent) !important; /* #50CFBC */
color: var(--aa-success-accent) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
border-color: rgba(80, 207, 188, 0.25) !important;
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
background-color: var(--aa-success-accent) !important;
}
.swal2-icon.swal2-success .swal2-success-fix {
background-color: var(--aa-white) !important;
}
/* ── Icono — Error (pastel/pink-100 · coral-60) ──────────────────────── */
.swal2-icon.swal2-error {
background-color: var(--aa-error-bg) !important; /* #FFD9DC */
border-color: var(--aa-error-accent) !important; /* #FE7883 */
color: var(--aa-error-accent) !important;
}
.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
background-color: var(--aa-error-accent) !important;
}
/* ── Icono — Warning (pastel/yellow-100 · yellow-60) ─────────────────── */
.swal2-icon.swal2-warning {
background-color: var(--aa-warning-bg) !important; /* #FFECCF */
border-color: var(--aa-warning-accent) !important; /* #FFBC54 */
color: var(--aa-warning-accent) !important;
}
/* ── Icono — Info (pastel/cyan-100 · cyan-60) ────────────────────────── */
.swal2-icon.swal2-info {
background-color: var(--aa-info-bg) !important; /* #CBEEFF */
border-color: var(--aa-info-accent) !important; /* #46C1FF */
color: var(--aa-info-accent) !important;
}
/* ── Icono — Question (pastel/purple-100 · purple-60) ────────────────── */
.swal2-icon.swal2-question {
background-color: var(--aa-pastel-purple-100) !important; /* #D9DAF7 */
border-color: var(--aa-secondary) !important; /* #797CE3 */
color: var(--aa-secondary) !important;
}
/* ── Actions — separador con espacio lateral (dentro del padding del popup) */
.swal2-actions {
display: flex !important;
gap: var(--aa-space-3) !important; /* 12px entre botones */
margin-top: var(--aa-space-6) !important; /* descripción → separador: 24px */
width: 100% !important;
padding: var(--aa-space-5) 0 var(--aa-space-6) !important;
/* 20px separador→botón | sin padding lateral (popup lo gestiona) | 24px debajo */
border-top: 1px solid var(--swal-separator) !important; /* color = bg pastel del tipo */
flex-wrap: wrap !important;
justify-content: center !important;
}
/* ── Styled — base de todos los botones SweetAlert2 ──────────────────── */
.swal2-styled {
border-radius: var(--aa-radius-pill) !important;
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-cta-md-size) !important; /* 14px */
font-weight: var(--aa-label-cta-md-weight) !important; /* 700 */
line-height: var(--aa-label-cta-md-lh) !important;
padding: 13px var(--aa-space-6) !important; /* ~48px altura */
min-width: 120px !important;
flex: 1 1 0 !important;
margin: 0 !important; /* anula Keen: .swal2-popup .btn { margin: 15px 5px 0 } */
border-width: 2px !important;
border-style: solid !important;
transition: background-color 0.18s ease, border-color 0.18s ease,
box-shadow 0.18s ease, transform 0.12s ease !important;
cursor: pointer !important;
}
/* Override Bootstrap btn/btn-light que algunas vistas añaden via customClass.
IMPORTANTE: también incluimos :focus y :hover porque la DS tiene
.btn.btn-light:focus:not(.btn-text) (esp. 0,4,0) que supera al selector base
(0,3,0) cuando el navegador auto-focaliza el botón al abrir el modal. */
.swal2-popup .swal2-confirm.btn,
.swal2-popup .swal2-confirm.btn-light,
.swal2-popup .swal2-confirm.btn:focus,
.swal2-popup .swal2-confirm.btn:focus:not(.btn-text),
.swal2-popup .swal2-confirm.btn-light:focus,
.swal2-popup .swal2-confirm.btn-light:focus:not(.btn-text) {
background-color: var(--swal-btn) !important;
border-color: var(--swal-btn) !important;
color: var(--swal-btn-color, #ffffff) !important;
border-radius: var(--aa-radius-pill) !important;
flex: 1 1 0 !important;
margin: 0 !important;
outline: none !important;
}
.swal2-popup .swal2-confirm.btn:hover:not(:disabled):not(.disabled),
.swal2-popup .swal2-confirm.btn-light:hover:not(:disabled):not(.disabled) {
background-color: var(--swal-btn-hover) !important;
border-color: var(--swal-btn-hover) !important;
color: var(--swal-btn-color, #ffffff) !important;
box-shadow: 0 4px 14px var(--swal-btn-shadow) !important;
transform: translateY(-1px) !important;
}
.swal2-popup .swal2-cancel.btn,
.swal2-popup .swal2-cancel.btn-light,
.swal2-popup .swal2-cancel.btn:focus,
.swal2-popup .swal2-cancel.btn:focus:not(.btn-text),
.swal2-popup .swal2-cancel.btn-light:focus,
.swal2-popup .swal2-cancel.btn-light:focus:not(.btn-text) {
background-color: var(--swal-cancel-bg, transparent) !important;
border-color: var(--swal-cancel-border, var(--aa-border-color)) !important;
color: var(--swal-cancel-color, var(--aa-navy)) !important;
border-radius: var(--aa-radius-pill) !important;
flex: 1 1 0 !important;
margin: 0 !important;
outline: none !important;
}
.swal2-popup .swal2-cancel.btn:hover:not(:disabled):not(.disabled),
.swal2-popup .swal2-cancel.btn-light:hover:not(:disabled):not(.disabled) {
background-color: var(--swal-cancel-hover-bg, #f5f8fa) !important;
border-color: var(--swal-cancel-hover-bdr, var(--aa-navy)) !important;
color: var(--swal-cancel-color, var(--aa-navy)) !important;
box-shadow: 0 2px 8px rgba(0, 26, 63, 0.12) !important;
transform: translateY(-1px) !important;
}
.swal2-styled:not(:disabled):hover {
transform: translateY(-1px) !important;
}
.swal2-styled:not(:disabled):active {
transform: translateY(0) !important;
}
.swal2-styled:focus {
outline: none !important;
box-shadow: var(--aa-focus-ring) !important;
}
.swal2-styled:disabled {
opacity: 0.55 !important;
cursor: not-allowed !important;
}
/* ── Confirm — color por tipo vía CSS variables (ver bloque :has() arriba) */
.swal2-confirm.swal2-styled,
.swal2-popup .swal2-confirm {
background-color: var(--swal-btn) !important;
border-color: var(--swal-btn) !important;
color: var(--swal-btn-color, #ffffff) !important;
}
.swal2-confirm.swal2-styled:not(:disabled):hover,
.swal2-popup .swal2-confirm:not(:disabled):hover {
background-color: var(--swal-btn-hover) !important;
border-color: var(--swal-btn-hover) !important;
box-shadow: 0 4px 14px var(--swal-btn-shadow) !important;
transform: translateY(-1px) !important;
}
.swal2-confirm.swal2-styled:not(:disabled):active {
background-color: var(--swal-btn-active) !important;
border-color: var(--swal-btn-active) !important;
box-shadow: none !important;
transform: translateY(0) !important;
}
/* ── Cancel — Ghost outlined; color por tipo (question = purple outline) */
.swal2-cancel.swal2-styled,
.swal2-popup .swal2-cancel {
background-color: var(--swal-cancel-bg, transparent) !important;
border-color: var(--swal-cancel-border, var(--aa-border-color)) !important;
color: var(--swal-cancel-color, var(--aa-navy)) !important;
}
.swal2-cancel.swal2-styled:not(:disabled):hover,
.swal2-popup .swal2-cancel:not(:disabled):hover {
background-color: var(--swal-cancel-hover-bg, #f5f8fa) !important;
border-color: var(--swal-cancel-hover-bdr, var(--aa-navy)) !important;
box-shadow: 0 2px 8px rgba(0, 26, 63, 0.12) !important;
transform: translateY(-1px) !important;
}
.swal2-cancel.swal2-styled:not(:disabled):active {
background-color: var(--aa-scale-cyan-10) !important;
box-shadow: none !important;
transform: translateY(0) !important;
}
/* ── Deny — Danger coral-60 (eliminaciones / acciones destructivas) ──── */
.swal2-deny.swal2-styled,
.swal2-popup .swal2-deny {
background-color: var(--aa-error-accent) !important; /* #FE7883 */
border-color: var(--aa-error-accent) !important;
color: #ffffff !important;
}
.swal2-deny.swal2-styled:not(:disabled):hover,
.swal2-popup .swal2-deny:not(:disabled):hover {
background-color: var(--aa-error-text) !important; /* #A34D54 */
border-color: var(--aa-error-text) !important;
box-shadow: 0 4px 12px rgba(254, 120, 131, 0.45) !important;
transform: translateY(-1px) !important;
}
/* ── Close button (×) ─────────────────────────────────────────────────── */
.swal2-close {
color: var(--aa-neutral-400) !important;
font-size: 1.5rem !important;
width: 36px !important;
height: 36px !important;
border-radius: var(--aa-radius-sm) !important;
transition: color 0.15s ease, background-color 0.15s ease !important;
}
.swal2-close:hover {
color: var(--aa-navy) !important;
background-color: var(--aa-scale-cyan-10) !important;
}
.swal2-close:focus {
outline: none !important;
box-shadow: var(--aa-focus-ring) !important;
}
/* ── Footer ───────────────────────────────────────────────────────────── */
.swal2-footer {
border-top: 1px solid var(--aa-border-color) !important;
margin-top: var(--aa-space-4) !important;
padding-top: var(--aa-space-4) !important;
font-size: var(--aa-body-small-size) !important; /* 12px */
color: var(--aa-secondary-text) !important;
}
/* ── Loader / Spinner ─────────────────────────────────────────────────── */
.swal2-loader {
border-color: var(--aa-cyan-60) transparent var(--aa-cyan-60) transparent !important;
}
/* ── Timer progress bar ───────────────────────────────────────────────── */
.swal2-timer-progress-bar {
background-color: var(--aa-cyan-60) !important;
}
/* ── Validation message ───────────────────────────────────────────────── */
.swal2-validation-message {
background-color: var(--aa-error-bg) !important;
color: var(--aa-error-accent) !important;
border-radius: var(--aa-radius-friendly-md) !important;
font-family: var(--aa-font-body) !important;
font-size: var(--aa-body-small-size) !important;
margin-top: var(--aa-space-2) !important;
border: none !important;
}
.swal2-validation-message::before {
background-color: var(--aa-error-accent) !important;
}
/* ── Inputs dentro de SweetAlert2 ────────────────────────────────────── */
.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
border: 1px solid var(--aa-border-color) !important;
border-radius: var(--aa-radius-playful-md) !important;
font-family: var(--aa-font-body) !important;
font-size: var(--aa-body-medium-size) !important;
color: var(--aa-navy) !important;
padding: 10px 12px !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
border-color: var(--aa-cyan-60) !important;
box-shadow: var(--aa-focus-ring) !important;
outline: none !important;
}
/* ── Toast (position: top-right, timer, sin botón) ───────────────────── */
.swal2-popup.swal2-toast {
padding: var(--aa-space-3) var(--aa-space-4) !important; /* 12px 16px */
border-radius: var(--aa-radius-friendly-md) !important; /* 12px */
box-shadow: var(--aa-shadow-card) !important;
gap: var(--aa-space-3) !important;
max-width: 380px !important;
width: auto !important;
}
.swal2-popup.swal2-toast .swal2-title {
font-size: var(--aa-label-medium-size) !important; /* 14px */
font-weight: var(--aa-label-medium-weight) !important; /* 500 */
margin: 0 !important;
line-height: var(--aa-label-medium-lh) !important;
}
.swal2-popup.swal2-toast .swal2-html-container {
font-size: var(--aa-body-small-size) !important;
margin: 0 !important;
}
.swal2-popup.swal2-toast .swal2-icon {
width: 28px !important;
height: 28px !important;
margin: 0 !important;
font-size: 1rem !important;
border-width: 2px !important;
}
/* ── Progress steps ───────────────────────────────────────────────────── */
.swal2-progress-steps .swal2-progress-step {
background-color: var(--aa-cyan-60) !important;
}
.swal2-progress-steps .swal2-progress-step-line {
background-color: var(--aa-cyan-60) !important;
}
.swal2-progress-steps .swal2-active-progress-step {
background-color: var(--aa-navy) !important;
}
/* ── Select2 z-index sobre modal SweetAlert2 ─────────────────────────── */
.swal2-popup .select2-dropdown,
.swal2-container .select2-dropdown {
z-index: 99999 !important;
}
/* ── 23. DATERANGEPICKER override ────────────────────────────────────── */
.daterangepicker {
font-family: var(--aa-font-body) !important;
border: 1px solid var(--aa-border-color) !important;
border-radius: var(--aa-radius-sm) !important;
box-shadow: var(--aa-shadow-card) !important;
color: var(--aa-navy) !important;
}
/* start-date / end-date: gestionados por las reglas del Design System más abajo */
.daterangepicker td {
padding: 0 !important;
}
.daterangepicker td.in-range {
background-color: var(--aa-cyan-100) !important;
color: var(--aa-navy) !important;
}
.daterangepicker td.available:hover {
background-color: var(--aa-cyan-100) !important;
border-radius: 50% !important;
}
.daterangepicker .drp-buttons .btn.applyBtn {
background-color: var(--aa-cyan-60) !important;
border-color: var(--aa-cyan-60) !important;
}
/* ── 24. SELECT2 override ────────────────────────────────────────────── */
/*
* NOTA: El tema Keen (style.bundle.css) tiene estas particularidades que
* deben ser anuladas:
* 1. border: 2px solid #FEC670 en el control (naranja — override sin !important)
* 2. Flecha via ::after con font-family:Ki (NO el elemento b — Keen oculta b)
* 3. .select2-search__field { display:none !important } — oculta búsqueda
* Este bloque, al cargarse ÚLTIMO, anula todo con !important.
*/
/* === Contenedor === */
.select2-container {
width: 100% !important;
font-family: var(--aa-font-body) !important;
}
/* === Single — control principal (override border naranja de Keen) === */
.select2-container--default .select2-selection--single {
height: auto !important;
min-height: 42px !important;
background-color: #ffffff !important;
border: 1px solid var(--aa-border-color) !important;
border-radius: var(--aa-radius-playful-md) !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
line-height: normal !important;
}
/* === Single — valor renderizado (Keen: padding 0.65rem 3rem) === */
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--aa-navy) !important;
font-family: var(--aa-font-body) !important;
font-size: 12px !important;
font-weight: 500 !important;
padding: 10px 4px 10px 12px !important;
line-height: 1.5 !important;
}
/* === Single — placeholder === */
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
color: #c7cdd5 !important;
font-weight: 400 !important;
}
/* === Single — contenedor de la flecha (Keen: position:static en flex) === */
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--multiple .select2-selection__arrow {
position: static !important;
width: 32px !important;
height: 20px !important;
top: auto !important;
right: auto !important;
margin: 0 8px 0 0 !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* b: Keen ya lo oculta, lo reforzamos */
.select2-container--default .select2-selection--single .select2-selection__arrow b,
.select2-container--default .select2-selection--multiple .select2-selection__arrow b {
display: none !important;
}
/* === FLECHA CERRADO: override del icono Ki de Keen con SVG gris === */
.select2-container--default .select2-selection--single .select2-selection__arrow::after,
.select2-container--default .select2-selection--multiple .select2-selection__arrow::after {
content: '' !important;
font-family: inherit !important;
font-size: 0 !important;
color: transparent !important;
display: block !important;
width: 10px !important;
height: 6px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23c7cdd5' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}
/* === FLECHA ABIERTO: SVG cyan hacia arriba === */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after,
.select2-container--default.select2-container--open .select2-selection--multiple .select2-selection__arrow::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2346C1FF' d='M0 6l5-6 5 6z'/%3E%3C/svg%3E") !important;
}
/* === Focus === */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: var(--aa-cyan-60) !important;
box-shadow: 0 0 0 3px rgba(70,193,255,.20) !important;
outline: none !important;
}
/* === Abierto — borde cyan (override border gris de Keen: #69b3ff) === */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
border-color: var(--aa-cyan-60) !important;
box-shadow: 0 0 0 3px rgba(70,193,255,.20) !important;
outline: none !important;
}
/* === Dropdown container (override border/shadow de Keen) === */
.select2-dropdown {
background-color: #ffffff !important;
border: 1px solid var(--aa-cyan-60) !important;
border-radius: var(--aa-radius-playful-md) !important;
box-shadow: var(--aa-shadow-card) !important;
overflow: hidden !important;
z-index: 9999 !important;
}
/* === Contenedor búsqueda: MOSTRAR
plugins.bundle.css (CSS base de Select2 modificado por Keen) fuerza display:none en el
CONTENEDOR .select2-search--dropdown (sin !important). Al cargar después con !important
este rule gana y el contenedor es visible. === */
.select2-search--dropdown {
display: block !important;
}
/* Respetar el mecanismo de ocultación propio de Select2 (cuando minimumResultsForSearch
> número de opciones, Select2 agrega la clase .select2-search--hide al contenedor) */
.select2-search--dropdown.select2-search--hide {
display: none !important;
}
/* === Campo búsqueda: MOSTRAR
Keen (style.bundle.css:59130) tiene display:none !important con especificidad (0,3,0).
Prefijando "html" subimos a (0,3,1): mayor especificidad → gana en TODOS los navegadores
sin depender del orden de carga. === */
html .select2-container--default .select2-search--dropdown .select2-search__field {
display: block !important;
border: none !important;
border-bottom: 1px solid var(--aa-border-color) !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--aa-navy) !important;
font-family: var(--aa-font-body) !important;
font-size: 12px !important;
padding: 8px 12px !important;
outline: none !important;
}
html .select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-bottom-color: var(--aa-cyan-60) !important;
box-shadow: none !important;
}
/* === Lista de resultados === */
.select2-results__options {
padding: 4px 0 !important;
max-height: 240px !important;
overflow-y: auto !important;
}
/* === Opción base (override color #3F4254 y padding de Keen) === */
.select2-container--default .select2-results__option {
padding: 8px 12px !important;
color: var(--aa-navy) !important;
font-family: var(--aa-font-body) !important;
font-size: 12px !important;
font-weight: 500 !important;
background-color: #ffffff !important;
transition: background-color 0.15s ease !important;
}
/* === Hover (Keen: background:#F3F6F9 — override con DS token) === */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option.select2-results__option--highlighted {
background-color: var(--aa-scale-cyan-10) !important;
color: var(--aa-navy) !important;
}
/* === Seleccionada (Keen: background:#EBEDF3 — override con DS token) === */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: var(--aa-scale-cyan-10) !important;
color: var(--aa-navy) !important;
font-weight: 600 !important;
}
/* === Deshabilitada === */
.select2-container--default .select2-results__option[aria-disabled=true] {
color: #c7cdd5 !important;
opacity: 0.6 !important;
cursor: not-allowed !important;
}
/* === Multiple — control principal === */
.select2-container--default .select2-selection--multiple {
min-height: 42px !important;
padding: 4px 8px !important;
background-color: #ffffff !important;
border: 1px solid var(--aa-border-color) !important;
border-radius: var(--aa-radius-playful-md) !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
cursor: pointer !important;
}
/* === Multiple — tags (Keen: background:#F3F6F9, border:0, radius:0.42rem) === */
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
background-color: var(--aa-scale-cyan-10) !important;
border: 1px solid var(--aa-cyan-60) !important;
border-radius: 8px !important;
color: var(--aa-navy) !important;
font-size: 11px !important;
font-weight: 500 !important;
padding: 2px 8px !important;
margin: 2px 4px 2px 0 !important;
float: none !important;
display: inline-flex !important;
align-items: center !important;
}
/* === Multiple — botón ×: Keen usa ::before con fuente Ki === */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
color: var(--aa-cyan-60) !important;
background-color: transparent !important;
border: none !important;
font-size: 0 !important;
order: -1 !important;
margin-right: 4px !important;
margin-left: 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove::before,
.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove::before {
content: '×' !important;
font-family: inherit !important;
font-size: 12px !important;
color: var(--aa-cyan-60) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover::before {
color: var(--aa-navy) !important;
}
/* Multiple — campo de búsqueda inline */
.select2-container--default .select2-selection--multiple .select2-search__field,
.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-search__field {
color: var(--aa-navy) !important;
font-family: var(--aa-font-body) !important;
font-size: 12px !important;
}
/* === Disabled === */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
background-color: #f5f7fa !important;
border-color: var(--aa-border-color) !important;
cursor: not-allowed !important;
opacity: 0.65 !important;
}
/* ── 25. GRADIENTE AA — utilitaria ──────────────────────────────────── */
.bg-gradient-aa {
background: var(--aa-gradient) !important;
color: #fff !important;
}
.text-gradient-aa {
background: var(--aa-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── 26. SCROLLBAR ───────────────────────────────────────────────────── */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--aa-body-bg);
}
::-webkit-scrollbar-thumb {
background: var(--aa-neutral-300);
border-radius: var(--aa-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
background: var(--aa-neutral-400);
}
/* ── 27. INVOICE / VOUCHER ───────────────────────────────────────────── */
.alta-invoice.card {
max-width: 600px;
margin-inline: auto;
}
.alta-invoice .invoice-header {
background: var(--aa-cyan-60);
color: #fff;
padding: 2rem 2.5rem;
text-align: center;
border-top-left-radius: calc(var(--aa-radius-md) - 1px);
border-top-right-radius: calc(var(--aa-radius-md) - 1px);
}
.alta-invoice .invoice-number {
font-size: 28px;
font-weight: 700;
font-family: var(--aa-font-heading);
margin: 0;
}
.alta-invoice .invoice-row {
display: flex;
justify-content: space-between;
padding: .5rem 0;
border-bottom: 1px solid var(--aa-border-color);
font-size: 13px;
}
.alta-invoice .invoice-total {
text-align: center;
padding: 1.5rem 0;
border-top: 1px solid var(--aa-border-color);
margin-top: .5rem;
}
.alta-invoice .invoice-total .amount {
font-size: 32px;
font-weight: 700;
font-family: var(--aa-font-heading);
color: var(--aa-navy);
}
/* ── 28. FOOTER ALTA ─────────────────────────────────────────────────── */
.alta-footer {
background: var(--aa-cyan-60);
color: #fff;
padding: 3rem 2.5rem 0;
position: relative;
overflow: hidden;
}
.alta-footer h5 {
color: #fff;
font-size: 14px;
font-weight: 700;
padding-bottom: .5rem;
border-bottom: 1px solid rgba(255,255,255,.3);
margin-bottom: .75rem;
}
.alta-footer a {
color: rgba(255,255,255,.9);
text-decoration: none;
font-size: 12px;
}
.alta-footer a:hover {
color: #fff;
text-decoration: underline;
}
.alta-footer__bottom {
text-align: center;
padding: 1rem;
margin-top: 2rem;
background: rgba(0,0,0,.10);
font-size: 11px;
}
/* ── 28b. FOOTER DS ──────────────────────────────────────────────────── */
.aa-footer {
overflow: hidden;
font-family: var(--aa-font-body) !important;
}
/* Cuerpo principal del footer — fondo cyan-60 */
.aa-footer-body {
position: relative;
background-color: var(--aa-cyan-60);
padding: 32px 40px 24px 40px;
overflow: hidden;
}
/* Círculos decorativos */
.aa-footer-circle {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.aa-footer-circle--tr {
width: 300px;
height: 300px;
top: -120px;
right: -60px;
background-color: rgba(255, 255, 255, 0.12);
}
.aa-footer-circle--bl {
width: 160px;
height: 160px;
bottom: -40px;
left: -60px;
background-color: rgba(255, 255, 255, 0.12);
}
/* Columna izquierda */
.aa-footer-left {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 4px;
}
/* Logo — filtro blanco */
.aa-footer-logo {
height: 90px;
width: auto;
max-width: 240px;
filter: brightness(0) invert(1);
display: block;
}
/* Tagline */
.aa-footer-tagline {
color: #ffffff !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 26px !important;
margin: 0 !important;
}
/* Botones de redes sociales */
.aa-footer-social {
display: flex;
gap: 12px;
margin-top: 4px;
}
.aa-footer-social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 24px;
background-color: var(--aa-cyan-20);
color: var(--aa-cyan-60) !important;
font-size: 14px;
text-decoration: none !important;
transition: background-color 0.2s;
flex-shrink: 0;
}
.aa-footer-social-btn:hover {
background-color: #ffffff;
color: var(--aa-cyan-60) !important;
text-decoration: none !important;
}
/* Info de contacto */
.aa-footer-contact {
color: #ffffff !important;
font-size: 11px !important;
font-weight: 300 !important;
line-height: 1.8 !important;
margin: 0 !important;
}
.aa-footer-contact a {
color: #ffffff !important;
text-decoration: none !important;
}
.aa-footer-contact a:hover {
text-decoration: underline !important;
}
/* Columna de links */
.aa-footer-links {
padding-top: 4px;
}
.aa-footer-col {
padding-top: 4px;
}
.aa-footer-col-title {
color: #E9F8FF !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 22px !important;
margin-bottom: 4px !important;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.aa-footer-divider {
border-color: #E9F8FF !important;
margin: 4px 0 12px 0 !important;
}
.aa-footer-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 10px;
}
.aa-footer-list li a {
color: #ffffff !important;
font-size: 12px !important;
font-weight: 400 !important;
text-decoration: none !important;
line-height: 1.4;
}
.aa-footer-list li a:hover {
text-decoration: underline !important;
opacity: 0.85;
}
/* Contacto y Soporte — filas con ícono */
.aa-footer-contact-list {
gap: 14px !important;
}
.aa-footer-contact-row {
display: flex;
align-items: flex-start;
gap: 8px;
}
.aa-footer-contact-icon {
color: var(--aa-cyan-10) !important;
font-size: 12px !important;
margin-top: 2px;
flex-shrink: 0;
}
.aa-footer-contact-list li span,
.aa-footer-contact-list li a {
color: #ffffff !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
text-decoration: none !important;
}
.aa-footer-contact-list li a:hover {
text-decoration: underline !important;
}
/* Desarrollado por — fila completa al pie del footer body */
.aa-footer-devby-row {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
margin-top: 32px;
padding-top: 20px;
padding-left: 15px;
padding-right: 15px;
flex-wrap: wrap;
}
.aa-footer-devby-item {
display: flex;
align-items: center;
gap: 12px;
color: #ffffff !important;
font-size: 12px !important;
}
.aa-footer-devby-link {
display: inline-flex;
align-items: center;
text-decoration: none !important;
}
.aa-footer-devby-link:hover .aa-footer-devby-img {
opacity: 0.75;
}
.aa-footer-devby-img {
height: 40px;
width: auto;
max-width: 160px;
display: block;
}
/* Bloque ISO — ícono + texto descriptivo */
.aa-footer-devby-iso {
max-width: 600px;
}
.aa-footer-iso-img {
height: 35px;
width: 40px;
flex-shrink: 0;
filter: brightness(0) invert(1);
}
.aa-footer-iso-text {
color: #ffffff !important;
font-family: var(--aa-font-body) !important;
font-size: 11px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
margin: 0 !important;
opacity: 0.9;
}
/* Barra inferior */
.aa-footer-bottom {
background-color: var(--aa-cyan-70);
padding: 0 40px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.aa-footer-bottom span {
color: #ffffff !important;
font-size: 11px !important;
font-weight: 300 !important;
text-align: center;
}
/* Responsive: apilar columnas en móvil */
@media (max-width: 767px) {
.aa-footer-body {
padding: 24px 20px 20px 20px;
}
.aa-footer-links {
margin-top: 24px;
}
.aa-footer-col {
margin-bottom: 20px;
}
}
/* ── 29. PRINT ───────────────────────────────────────────────────────── */
@media print {
.alta-invoice .card-footer {
display: none;
}
.alta-invoice {
box-shadow: none;
}
}
/* ── 30. BOOTSTRAP DATETIMEPICKER (Eonasdan / tempusdominus) ─────────── */
/*
Popup: .bootstrap-datetimepicker-widget.dropdown-menu
La parte .datepicker interna hereda los estilos de la Sección 16.
Aquí se cubre el contenedor y la sección timepicker.
*/
.bootstrap-datetimepicker-widget.dropdown-menu {
border-radius: var(--aa-radius-md) !important;
border: 1px solid #c7cdd5 !important;
box-shadow: 0 4px 20px rgba(203, 238, 255, 0.6) !important;
padding: 8px !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
}
/* Flecha del dropdown */
.bootstrap-datetimepicker-widget.dropdown-menu::before {
border-bottom-color: #c7cdd5 !important;
}
.bootstrap-datetimepicker-widget.dropdown-menu::after {
border-bottom-color: #ffffff !important;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top::before {
border-top-color: #c7cdd5 !important;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top::after {
border-top-color: #ffffff !important;
}
/* Botón de toggle fecha/hora */
.bootstrap-datetimepicker-widget a[data-action] {
color: #46c1ff !important;
}
.bootstrap-datetimepicker-widget a[data-action]:hover {
color: #399ed1 !important;
}
/* ── Sección timepicker ── */
.bootstrap-datetimepicker-widget .timepicker-picker table td {
border-radius: 8px !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 13px !important;
color: #001a3f !important;
}
.bootstrap-datetimepicker-widget .timepicker-picker table td a {
color: #46c1ff !important;
border-radius: 8px !important;
}
.bootstrap-datetimepicker-widget .timepicker-picker table td a:hover {
background-color: #e9f8ff !important;
color: #399ed1 !important;
}
.bootstrap-datetimepicker-widget .timepicker-picker table td span {
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 22px !important;
font-weight: 600 !important;
color: #001a3f !important;
}
.bootstrap-datetimepicker-widget .timepicker-picker table td.separator {
color: #b0b5be !important;
font-weight: 400 !important;
}
/* Listas de horas/minutos/segundos */
.bootstrap-datetimepicker-widget .timepicker-hours table td,
.bootstrap-datetimepicker-widget .timepicker-minutes table td,
.bootstrap-datetimepicker-widget .timepicker-seconds table td {
border-radius: 8px !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 13px !important;
color: #001a3f !important;
cursor: pointer !important;
}
.bootstrap-datetimepicker-widget .timepicker-hours table td:hover,
.bootstrap-datetimepicker-widget .timepicker-minutes table td:hover,
.bootstrap-datetimepicker-widget .timepicker-seconds table td:hover {
background-color: #e9f8ff !important;
}
/* Separador entre datepicker y timepicker */
.bootstrap-datetimepicker-widget .picker-switch table td {
color: #001a3f !important;
font-weight: 700 !important;
font-size: 14px !important;
border-radius: 8px !important;
}
.bootstrap-datetimepicker-widget .picker-switch table td:hover {
background-color: #e9f8ff !important;
color: #46c1ff !important;
}
/* Input con ícono de calendario */
.input-group[id^="kt_datetimepicker"] .input-group-text,
.input-group.date .input-group-text {
border-radius: 0 16px 16px 0 !important;
background-color: #e9f8ff !important;
border-color: #c7cdd5 !important;
color: #46c1ff !important;
cursor: pointer !important;
}
.input-group[id^="kt_datetimepicker"] .form-control,
.input-group.date .form-control {
border-radius: 16px 0 0 16px !important;
}
/* ── 31. BOOTSTRAP DATERANGEPICKER ───────────────────────────────────── */
/*
Popup: .daterangepicker
Calendarios internos: .calendar-table table
*/
.daterangepicker {
border-radius: var(--aa-radius-md) !important;
border: 1px solid #c7cdd5 !important;
box-shadow: 0 4px 20px rgba(203, 238, 255, 0.6) !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
}
.daterangepicker::before {
border-bottom-color: #c7cdd5 !important;
}
.daterangepicker::after {
border-bottom-color: #ffffff !important;
}
/* Cabecera del calendario */
.daterangepicker .calendar-table {
border: none !important;
border-radius: var(--aa-radius-md) !important;
background-color: #ffffff !important;
}
.daterangepicker .calendar-table table thead tr th {
border-radius: 8px !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
color: #b0b5be !important;
}
.daterangepicker .calendar-table table thead tr th.prev,
.daterangepicker .calendar-table table thead tr th.next {
color: #46c1ff !important;
font-size: 16px !important;
font-weight: 700 !important;
border-radius: 8px !important;
}
.daterangepicker .calendar-table table thead tr th.prev:hover,
.daterangepicker .calendar-table table thead tr th.next:hover {
background-color: #e9f8ff !important;
color: #399ed1 !important;
}
.daterangepicker .calendar-table table thead tr th.month {
color: #001a3f !important;
font-weight: 700 !important;
font-size: 14px !important;
text-transform: none !important;
letter-spacing: normal !important;
}
/* ═══════════════════════════════════════════════════════════
DATERANGEPICKER — Design System Alta Academia
Figma: celdas 33×33 · círculo 50% · banda #CBEEFF plana
═══════════════════════════════════════════════════════════ */
/* 1. Tabla: ya tiene border-collapse en plugins.bundle.css; forzamos igual */
.daterangepicker .calendar-table table,
.daterangepicker .drp-calendar table {
border-collapse: collapse !important;
border-spacing: 0 !important;
}
/* 2. Base: solo tipografía y posición.
SIN border-radius aquí — cada estado declara el suyo.
Esto evita el conflicto !important entre la regla base y las celdas in-range. */
.daterangepicker .drp-calendar table td,
.daterangepicker .calendar-table td {
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 13px !important;
color: #001a3f !important;
border: none !important;
position: relative;
}
/* 3. Días disponibles normales: círculo */
.daterangepicker .drp-calendar td.available:not(.in-range):not(.active):not(.today):not(.off) {
border-radius: 50% !important;
}
/* 4. Hover: círculo #CBEEFF */
.daterangepicker .drp-calendar td.available:hover:not(.active):not(.in-range) {
background-color: #cbeeff !important;
color: #001a3f !important;
border-radius: 50% !important;
}
/* 5. Días de otro mes */
.daterangepicker .drp-calendar td.off,
.daterangepicker .drp-calendar td.off.in-range,
.daterangepicker .drp-calendar td.off.start-date,
.daterangepicker .drp-calendar td.off.end-date {
color: #c7cdd5 !important;
background-color: transparent !important;
border-radius: 50% !important;
}
/* 6. Deshabilitados */
.daterangepicker .drp-calendar td.disabled {
color: #b0b5be !important;
border-radius: 50% !important;
}
/* 7. Hoy (no activo, no en rango): círculo #CBEEFF */
.daterangepicker .drp-calendar td.today:not(.active):not(.in-range) {
background-color: #cbeeff !important;
color: #46c1ff !important;
font-weight: 700 !important;
border-radius: 50% !important;
border: none !important;
}
/* 8. RANGO: banda plana — solo necesita ganar a border-radius:4px del plugin
(sin !important en el plugin), así que !important aquí siempre gana. */
.daterangepicker td.in-range,
.daterangepicker .calendar-table td.in-range,
.daterangepicker .drp-calendar td.in-range {
background-color: #cbeeff !important;
border-color: transparent !important;
color: #001a3f !important;
border-radius: 0 !important;
}
/* Hoy en rango */
.daterangepicker .drp-calendar td.in-range.today {
color: #46c1ff !important;
font-weight: 700 !important;
}
/* 9. Seleccionado (active): círculo sólido #46C1FF */
.daterangepicker .drp-calendar td.active,
.daterangepicker .drp-calendar td.active:hover {
background-color: #46c1ff !important;
border-color: transparent !important;
color: #ffffff !important;
border-radius: 50% !important;
}
/* 10. Start-date: círculo anillo renderizado con border-radius (GPU, sin aliasing).
isolation:isolate + z-index negativos garantizan: banda(−2) < círculo(−1) < texto(inline).
radial-gradient reemplazado por border-radius:50% en ::after → anti-aliasing nativo del navegador. */
.daterangepicker .drp-calendar td.active.start-date:not(.end-date) {
background: transparent !important;
background-color: transparent !important;
border-radius: 0 !important;
border: none !important;
color: #46c1ff !important;
isolation: isolate;
}
/* Banda CBEEFF mitad derecha — detrás del círculo y del texto */
.daterangepicker .drp-calendar td.active.start-date:not(.end-date)::before {
content: '';
display: block;
position: absolute;
top: 0; left: 50%;
width: 50%; height: 100%;
background: #cbeeff;
z-index: -2;
}
/* Círculo anillo: border-radius:50% renderizado GPU, sin radial-gradient */
.daterangepicker .drp-calendar td.active.start-date:not(.end-date)::after {
content: '';
display: block;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 50%;
border: 2px solid #46c1ff;
background: #ffffff;
box-sizing: border-box;
z-index: -1;
transform: translateZ(0);
will-change: transform;
}
/* 11. End-date: círculo relleno renderizado con border-radius (GPU, sin aliasing) */
.daterangepicker .drp-calendar td.active.end-date:not(.start-date) {
background: transparent !important;
background-color: transparent !important;
border-radius: 0 !important;
border: none !important;
color: #ffffff !important;
isolation: isolate;
}
/* Banda CBEEFF mitad izquierda — detrás del círculo y del texto */
.daterangepicker .drp-calendar td.active.end-date:not(.start-date)::before {
content: '';
display: block;
position: absolute;
top: 0; left: 0;
width: 50%; height: 100%;
background: #cbeeff;
z-index: -2;
}
/* Círculo relleno: border-radius:50% renderizado GPU */
.daterangepicker .drp-calendar td.active.end-date:not(.start-date)::after {
content: '';
display: block;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 50%;
background: #46c1ff;
box-sizing: border-box;
z-index: -1;
transform: translateZ(0);
will-change: transform;
}
/* 12. Único día (start == end): círculo relleno, sin semibanda */
.daterangepicker .drp-calendar td.active.start-date.end-date {
background: #46c1ff !important;
background-color: #46c1ff !important;
border-radius: 50% !important;
color: #ffffff !important;
isolation: auto;
}
.daterangepicker .drp-calendar td.active.start-date.end-date::before,
.daterangepicker .drp-calendar td.active.start-date.end-date::after {
display: none !important;
}
/* 13. Hoy activo */
.daterangepicker .drp-calendar td.today.active {
background-color: #46c1ff !important;
color: #ffffff !important;
border: none !important;
}
/* Ícono de calendario en inputs de fecha — persiste en todos los estados */
input[placeholder="dd/mm/aaaa"],
input[placeholder="dd/mm/aaaa"]:focus,
input[placeholder="dd/mm/aaaa"]:active,
input[placeholder="dd/mm/aaaa"]:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b5b5c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 16px 16px !important;
padding-right: 40px !important;
cursor: pointer;
}
/* Selectores de mes y año */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
border-radius: 8px !important;
border: 1px solid #c7cdd5 !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 13px !important;
color: #001a3f !important;
background-color: #ffffff !important;
}
.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus {
border-color: #46c1ff !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(70, 193, 255, 0.18) !important;
}
/* Presets de rango (panel lateral) */
.daterangepicker .ranges ul {
padding: 8px 0 !important;
}
.daterangepicker .ranges ul li {
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 13px !important;
color: #001a3f !important;
border-radius: 8px !important;
padding: 6px 12px !important;
}
.daterangepicker .ranges ul li:hover {
background-color: #e9f8ff !important;
color: #46c1ff !important;
}
.daterangepicker .ranges ul li.active {
background-color: #46c1ff !important;
color: #ffffff !important;
}
/* Botones Aplicar / Cancelar */
.daterangepicker .drp-buttons {
border-top: 1px solid #c7cdd5 !important;
padding: 10px 16px !important;
}
.daterangepicker .drp-buttons .btn-primary {
background-color: #46c1ff !important;
border-color: #46c1ff !important;
color: #ffffff !important;
border-radius: 10px !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
}
.daterangepicker .drp-buttons .btn-primary:hover {
background-color: #399ed1 !important;
border-color: #399ed1 !important;
}
.daterangepicker .drp-buttons .btn-default,
.daterangepicker .drp-buttons .cancelBtn {
background-color: transparent !important;
border-color: #c7cdd5 !important;
color: #001a3f !important;
border-radius: 10px !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 13px !important;
}
.daterangepicker .drp-buttons .btn-default:hover,
.daterangepicker .drp-buttons .cancelBtn:hover {
background-color: #e9f8ff !important;
border-color: #46c1ff !important;
color: #46c1ff !important;
}
/* Texto de rango seleccionado */
.daterangepicker .drp-selected {
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 12px !important;
color: #b0b5be !important;
}
/* Timepicker interno de daterangepicker (selects hora/minuto) */
.daterangepicker .calendar-time {
text-align: center !important;
margin-top: 8px !important;
padding: 4px 0 !important;
border-top: 1px solid #e9f8ff !important;
}
.daterangepicker .calendar-time select {
border-radius: 8px !important;
border: 1px solid #c7cdd5 !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 13px !important;
color: #001a3f !important;
background-color: #ffffff !important;
padding: 3px 6px !important;
margin: 0 2px !important;
}
.daterangepicker .calendar-time select:focus {
border-color: #46c1ff !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(70, 193, 255, 0.18) !important;
}
.daterangepicker .calendar-time .separator {
color: #b0b5be !important;
font-weight: 600 !important;
margin: 0 2px !important;
}
/* Z-index para uso dentro de modales Bootstrap */
.daterangepicker {
z-index: 9999 !important;
}
/* Input-group con ícono — cubre todos los contenedores (datetimepicker + daterangepicker) */
.input-group[id^="kt_datetimepicker"] .input-group-text,
.input-group[id^="kt_daterangepicker"] .input-group-text,
.input-group.date .input-group-text {
border-radius: 0 16px 16px 0 !important;
background-color: #e9f8ff !important;
border-color: #c7cdd5 !important;
color: #46c1ff !important;
cursor: pointer !important;
transition: background-color 0.15s ease !important;
}
.input-group[id^="kt_datetimepicker"] .input-group-text:hover,
.input-group[id^="kt_daterangepicker"] .input-group-text:hover,
.input-group.date .input-group-text:hover {
background-color: #cbeeff !important;
}
.input-group[id^="kt_datetimepicker"] .form-control,
.input-group[id^="kt_daterangepicker"] .form-control,
.input-group.date .form-control {
border-radius: 16px 0 0 16px !important;
}
/* Input visible del daterangepicker (text) */
.input-group .datetimepicker-input,
input.datetimepicker-input {
border-radius: 16px 0 0 16px !important;
border: 1.5px solid #c7cdd5 !important;
color: #001a3f !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 13px !important;
}
.input-group .datetimepicker-input:focus,
input.datetimepicker-input:focus {
border-color: #46c1ff !important;
box-shadow: none !important;
outline: none !important;
}
/* ── 32. FULLCALENDAR v4 / v5 ────────────────────────────────────────── */
/*
Componente: new FullCalendar.Calendar(...)
Clases: .fc-*, .fc-toolbar, .fc-button-primary, .fc-event, etc.
Tokens: todos los valores son referencias a --aa-* del Design System.
*/
/* ── Contenedor raíz (toolbar + grid) ────────────────────────────────── */
.fc {
border-radius: var(--aa-radius-md);
overflow: hidden;
transform: translateZ(0);
}
/* ── Grid: aquí aplica el radius visible ─────────────────────────────── */
/*
El radius en .fc no se ve: la tabla del grid queda dentro de .fc-view-container,
por debajo del toolbar. Las líneas de borde de las celdas no llegan hasta las
esquinas de .fc → no hay nada que clipear ahí → el radio es invisible.
Solución:
- overflow:hidden + transform:translateZ(0) clipean el grid con radius correcto
(transform fuerza capa GPU para que border-collapse:collapse no escape el clip,
fullcalendar.bundle.css:107).
- box-shadow:0 0 0 1px dibuja un "borde" fuera del clip usando sombra; la sombra
siempre sigue border-radius y no interactúa con los bordes internos de las celdas.
*/
.fc-view-harness, /* v5 */
.fc-view-container { /* v4 */
border-radius: var(--aa-radius-md);
overflow: hidden;
transform: translateZ(0);
box-shadow: 0 0 0 1px var(--aa-border-color);
}
/* ── Borde de la tabla de celdas ──────────────────────────────────────── */
.fc-scrollgrid {
border-color: var(--aa-border-color) !important;
}
/* ── Toolbar principal ────────────────────────────────────────────────── */
.fc-toolbar.fc-header-toolbar {
margin-bottom: var(--aa-space-5) !important;
}
.fc-toolbar h2,
.fc-toolbar .fc-toolbar-title {
font-family: var(--aa-font-heading) !important;
font-size: var(--aa-heading-h5-size) !important;
font-weight: 700 !important;
color: var(--aa-navy) !important;
}
/* ── Botones de navegación (prev, next, today, views) ────────────────── */
.fc-button-primary {
background-color: var(--aa-primary) !important;
border-color: var(--aa-primary) !important;
color: var(--aa-bg-white) !important;
border-radius: var(--aa-radius-sm) !important;
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-small-size) !important;
font-weight: 600 !important;
box-shadow: none !important;
text-shadow: none !important;
margin: var(--aa-space-1) !important;
}
.fc-button-primary:hover {
background-color: var(--aa-scale-cyan-70) !important;
border-color: var(--aa-scale-cyan-70) !important;
color: var(--aa-bg-white) !important;
}
.fc-button-primary:focus,
.fc-button-primary:active,
.fc-button-primary:not(:disabled):active {
background-color: var(--aa-scale-cyan-70) !important;
border-color: var(--aa-scale-cyan-70) !important;
box-shadow: 0 0 0 3px rgba(70, 193, 255, 0.3) !important;
}
.fc-button-primary:disabled {
background-color: var(--aa-neutral-400) !important;
border-color: var(--aa-neutral-400) !important;
opacity: 1 !important;
}
/* ── Botón activo (vista seleccionada) ───────────────────────────────── */
.fc-button-primary.fc-button-active,
.fc-button-primary:not(:disabled).fc-button-active {
background-color: var(--aa-navy) !important;
border-color: var(--aa-navy) !important;
color: var(--aa-bg-white) !important;
}
/* ── Grupo de botones ─────────────────────────────────────────────────── */
.fc-button-group .fc-button-primary:not(:last-child) {
border-right-color: rgba(255, 255, 255, 0.3) !important;
}
/* ── Cabecera de días de la semana ───────────────────────────────────── */
.fc-day-header,
.fc th {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-mini-size) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
color: var(--aa-neutral-400) !important;
padding: var(--aa-space-2) 0 !important;
background-color: transparent !important;
border-color: var(--aa-border-color) !important;
}
/* ── Celdas de días ───────────────────────────────────────────────────── */
.fc-day,
.fc td {
border-color: var(--aa-border-color) !important;
}
.fc-day-top .fc-day-number,
.fc-daygrid-day-number {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-small-size) !important;
color: var(--aa-navy) !important;
font-weight: 400 !important;
}
/* ── Hoy ──────────────────────────────────────────────────────────────── */
.fc-today,
.fc-day-today {
background-color: var(--aa-info-bg) !important;
}
.fc-today .fc-day-number,
.fc-day-today .fc-daygrid-day-number {
font-weight: 700 !important;
color: var(--aa-navy) !important;
}
/* ── Días de otros meses ──────────────────────────────────────────────── */
.fc-other-month,
.fc-day-other {
background-color: var(--aa-bg-light) !important;
}
.fc-other-month .fc-day-number,
.fc-day-other .fc-daygrid-day-number {
color: var(--aa-neutral-300) !important;
}
/* ── Hover en celda ───────────────────────────────────────────────────── */
.fc-day:hover,
.fc-daygrid-day:hover {
background-color: var(--aa-scale-cyan-10) !important;
cursor: pointer !important;
}
/* ── Selección (highlight) ────────────────────────────────────────────── */
.fc-highlight {
background-color: rgba(70, 193, 255, 0.15) !important;
}
/* ── Eventos ──────────────────────────────────────────────────────────── */
.fc-event,
.fc-event-dot {
background-color: var(--aa-primary) !important;
border-color: var(--aa-primary) !important;
color: var(--aa-bg-white) !important;
border-radius: var(--aa-radius-sm) !important;
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-mini-size) !important;
font-weight: 500 !important;
border-width: 0 !important;
padding: var(--aa-space-1) var(--aa-space-2) !important;
}
.fc-event:hover {
background-color: var(--aa-scale-cyan-70) !important;
border-color: var(--aa-scale-cyan-70) !important;
color: var(--aa-bg-white) !important;
}
.fc-event .fc-title {
color: var(--aa-bg-white) !important;
}
/* ── Tiempo dentro del evento ─────────────────────────────────────────── */
.fc-event .fc-time {
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.85) !important;
}
/* ── Vista semanal / diaria ───────────────────────────────────────────── */
.fc-time-grid .fc-slats td {
border-color: var(--aa-border-color) !important;
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-mini-size) !important;
color: var(--aa-neutral-400) !important;
}
.fc-axis {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-mini-size) !important;
color: var(--aa-neutral-400) !important;
}
/* ── Fix: alineación cabecera de días ↔ zona all-day (vistas semana/día) ──
FC v4 aplica "border: 0 hidden transparent" en el TABLE interior del
fc-row. Con border-collapse:collapse, "hidden" gana sobre cualquier
borde de celda, por eso el eje izquierdo no muestra el separador.
La solución es sobrescribir el borde en el TABLE mismo, no en las celdas. */
.fc-timeGrid-view .fc-head .fc-row table {
border-top: 1px solid var(--aa-border-color) !important;
border-bottom: 1px solid var(--aa-border-color) !important;
}
/* ── Más eventos (+N) ─────────────────────────────────────────────────── */
.fc-more,
.fc-daygrid-more-link {
color: var(--aa-primary) !important;
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-mini-size) !important;
font-weight: 600 !important;
}
/* ── Popup de "más eventos" ───────────────────────────────────────────── */
.fc-popover {
border-radius: var(--aa-radius-md) !important;
border: 1px solid var(--aa-border-color) !important;
box-shadow: var(--aa-shadow-card) !important;
}
.fc-popover .fc-header {
background-color: var(--aa-scale-cyan-10) !important;
border-radius: var(--aa-radius-md) var(--aa-radius-md) 0 0 !important;
}
.fc-popover .fc-header .fc-title {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-small-size) !important;
font-weight: 700 !important;
color: var(--aa-navy) !important;
}
.fc-popover .fc-header .fc-close {
color: var(--aa-primary) !important;
}
/* ── 33. HTML5 DATE / DATETIME-LOCAL / TIME INPUTS ───────────────────── */
/*
Aplica la línea gráfica AA a los inputs nativos de fecha y hora.
Chrome/Edge/Safari: selector -webkit-calendar-picker-indicator
*/
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
border-radius: 16px !important;
border: 1.5px solid #c7cdd5 !important;
color: #001a3f !important;
font-family: 'Public Sans', system-ui, sans-serif !important;
font-size: 13px !important;
padding: 8px 14px !important;
background-color: #ffffff !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus {
border-color: #46c1ff !important;
box-shadow: 0 0 0 3px rgba(70, 193, 255, 0.20) !important;
outline: none !important;
}
input[type="date"]:disabled,
input[type="datetime-local"]:disabled,
input[type="time"]:disabled,
input[type="month"]:disabled,
input[type="week"]:disabled {
background-color: #f8fafc !important;
color: #b0b5be !important;
border-color: #c7cdd5 !important;
cursor: not-allowed !important;
}
/* Ícono del calendario nativo (Webkit) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
cursor: pointer !important;
border-radius: 4px !important;
padding: 2px !important;
filter: invert(62%) sepia(60%) saturate(500%) hue-rotate(165deg) brightness(100%) !important;
opacity: 0.8 !important;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
opacity: 1 !important;
background-color: #e9f8ff !important;
}
/* Cuando el input nativo está dentro de un form-group Bootstrap */
.form-group input[type="date"].form-control,
.form-group input[type="datetime-local"].form-control,
.form-group input[type="time"].form-control,
.form-group input[type="month"].form-control,
.form-group input[type="week"].form-control {
border-radius: 16px !important;
border: 1.5px solid #c7cdd5 !important;
color: #001a3f !important;
}
.form-group input[type="date"].form-control:focus,
.form-group input[type="datetime-local"].form-control:focus,
.form-group input[type="time"].form-control:focus,
.form-group input[type="month"].form-control:focus,
.form-group input[type="week"].form-control:focus {
border-color: #46c1ff !important;
box-shadow: 0 0 0 3px rgba(70, 193, 255, 0.20) !important;
}
/* ── 34. ACCORDION / COLLAPSE ─────────────────────────────────────────── */
/*
CAUSA RAÍZ — overflow de ancho:
Keen style.bundle.css sobreescribe Bootstrap con
`.accordion .card { overflow: visible !important }`, permitiendo que el
contenido (tablas, sombras) escape visualmente fuera del contenedor padre.
Se corrige con overflow: hidden !important.
CAUSA RAÍZ — diseño inconsistente:
1. Keen aplica `.accordion .card .card-header .card-title { color: #009175 }`
(color teal-verde no perteneciente al DS).
2. Bootstrap 4 "colapsa" items adyacentes: elimina border-bottom entre ellos
y aplica border-radius: 0 en los extremos intermedios, haciendo que los
items parezcan un bloque continuo en lugar de tarjetas individuales.
El DS los trata como tarjetas separadas con el lenguaje visual oficial.
*/
/* ════ Base: tarjeta accordion — visual Diseño-AG border variant ════════ */
.accordion .card {
border-radius: var(--aa-radius-md) !important;
overflow: hidden !important;
margin-bottom: 8px !important;
background: #fff !important;
border: 1px solid var(--ag-border) !important;
border-left: 4px solid var(--ag-border) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
transition: border-color 0.2s !important;
}
.accordion .card:last-child {
margin-bottom: 0 !important;
}
/* ════ Restaurar bordes eliminados por Bootstrap 4 accordion ═══════════
Bootstrap 4 colapsa los .card adyacentes: elimina border-bottom entre
ellos y quita border-radius en los extremos intermedios para crear un
bloque visual continuo. El DS los usa como tarjetas individuales. */
.accordion > .card:not(:last-of-type) {
border-bottom: 1px solid var(--ag-border) !important;
border-bottom-right-radius: var(--aa-radius-md) !important;
border-bottom-left-radius: var(--aa-radius-md) !important;
}
.accordion > .card:not(:first-of-type) {
border-top-left-radius: var(--aa-radius-md) !important;
border-top-right-radius: var(--aa-radius-md) !important;
}
/* Eliminar margin-bottom: -1px de Bootstrap que "pega" items adyacentes.
Con gap propio entre tarjetas ya no se necesita. */
.accordion > .card > .card-header {
margin-bottom: 0 !important;
padding: 15px 18px !important;
transition: background 0.18s !important;
}
/* ════ Sin elevación por hover (accordion es interactivo, sin lift) ════ */
.accordion .card:hover {
transform: none !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}
/* ════ Card-title: tipografía DS + override color Keen #009175 ═════════ */
/* Keen usa color teal (#009175) en accordion card-title sin !important.
Se sobreescribe aquí para todos los accordions del sistema. */
.accordion .card .card-header .card-title {
padding: 0 !important;
margin: 0 !important;
flex: 1;
color: var(--aa-navy) !important; /* Override Keen #009175 */
font-family: var(--aa-font-heading) !important; /* Poppins */
font-size: var(--aa-heading-h6-size) !important; /* 14px */
font-weight: var(--aa-heading-h6-weight) !important; /* 600 */
transition: color 0.2s ease !important;
}
/* Hover en card-header */
.accordion .card .card-header:hover {
background: var(--ag-hover-bg) !important;
}
.accordion .card .card-header:hover .card-title {
color: var(--aa-cyan-60) !important;
}
/* Estado abierto: acento izquierdo cyan + fondo de header */
.accordion > .card:has(.collapse.show) {
border-left-color: var(--aa-primary) !important;
}
.accordion > .card:has(.collapse.show) > .card-header {
background: #f0f6ff !important;
}
/* ── Cuando el card-header mismo es el trigger (sin card-title intermedio) ── */
.card-header[data-toggle="collapse"] {
cursor: pointer !important;
}
/* ════ Variante accordion-toggle-arrow (flecha Ki de Keen) ════════════ */
.accordion.accordion-toggle-arrow .card .card-header .card-title {
color: var(--aa-navy) !important;
transition: color 0.2s ease !important;
}
.accordion.accordion-toggle-arrow .card .card-header .card-title-total {
color: var(--aa-scale-blue-60) !important; /* #398AFF */
transition: color 0.2s ease !important;
}
.accordion.accordion-toggle-arrow .card .card-header .card-title:after {
color: var(--aa-secondary-text) !important; /* #696B92 */
transition: all 0.25s cubic-bezier(.4, 0, .2, 1) !important;
}
.accordion.accordion-toggle-arrow .card .card-header .card-title.collapsed:after {
color: var(--aa-neutral-400) !important; /* #B0B5BE */
}
/* Hover propaga color al título y a la flecha */
.accordion.accordion-toggle-arrow .card .card-header:hover .card-title,
.accordion.accordion-toggle-arrow .card .card-header .card-title:hover {
color: var(--aa-cyan-60) !important;
}
.accordion.accordion-toggle-arrow .card .card-header:hover .card-title:after,
.accordion.accordion-toggle-arrow .card .card-header .card-title:hover:after {
color: var(--aa-cyan-60) !important;
}
/* ════ Ícono (ExpedienteProfesor y similares) ═ */
.card-header[data-toggle="collapse"] .acord-chevron {
transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
transform: rotate(0deg);
color: var(--aa-secondary-text); /* #696B92 */
margin-right: var(--aa-space-2) !important; /* 8px */
}
.card-header.collapsed[data-toggle="collapse"] .acord-chevron {
transform: rotate(-90deg);
}
.card-header[data-toggle="collapse"]:hover .acord-chevron {
color: var(--aa-cyan-60);
}
/* ════ Texto de párrafos dentro del cuerpo del accordion ════════════════ */
.accordion .card .card-body > p {
font-size: 13.5px;
line-height: 1.6;
color: var(--ag-text-muted);
}
/* ════ Animación del panel ══════════════════════════════════════════════ */
.collapsing {
transition: height 0.3s cubic-bezier(.4, 0, .2, 1) !important;
}
/* ── 35. WIZARD / STEPPER ──────────────────────────────────────────────── */
/* Override Keen wizard-3.css hardcoded #1BC5BD con DS tokens */
/* Estado inactivo (default) */
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step .wizard-label {
background-color: var(--aa-neutral-300) !important;
}
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-number {
color: var(--aa-secondary-text) !important;
}
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step .wizard-title {
color: var(--aa-secondary-text) !important;
}
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step:after {
background-color: var(--aa-neutral-300) !important;
}
/* Estado current (activo) */
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-label {
background-color: var(--aa-primary) !important;
box-shadow: 0 0 0 4px rgba(70, 193, 255, 0.2) !important;
}
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-label .wizard-number {
color: #fff !important;
}
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-title {
color: var(--aa-navy) !important;
font-weight: var(--aa-heading-h6-weight) !important;
}
/* Estado done (completado) */
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-label {
background-color: var(--aa-primary) !important;
}
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-label .wizard-check {
color: #fff !important;
}
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-title {
color: var(--aa-navy) !important;
}
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"]:after {
background-color: var(--aa-primary) !important;
}
/* Borde del nav del wizard */
.wizard.wizard-3 .wizard-nav {
border-color: var(--aa-border-color) !important;
}
/* ── 36. STATUS TABS — Indicadores de estado ───────────────────────────── */
/* Componente global reutilizable para filtros por estado en cualquier módulo */
/* Estructura:
*/
/* ── Contenedor ──────────────────────────────────────────────────────────── */
.aa-status-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
}
.aa-status-tabs > li {
margin: 0;
}
/* ── Tab (estado inactivo) ───────────────────────────────────────────────── */
.tab-selector,
.filter-btn {
min-width: 140px;
text-align: center;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
border: 2px solid var(--aa-border-color) !important;
border-radius: var(--aa-radius-md) !important;
}
/* ── Tab activo ──────────────────────────────────────────────────────────── */
.tab-selector.active,
.filter-btn.active {
border-color: var(--aa-primary) !important;
background-color: rgba(70, 193, 255, 0.08) !important;
color: var(--aa-navy) !important;
}
/* ── Tab hover ───────────────────────────────────────────────────────────── */
.tab-selector:hover:not(.active),
.filter-btn:hover:not(.active) {
border-color: var(--aa-primary);
background-color: rgba(70, 193, 255, 0.04);
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
.aa-status-tabs {
gap: 0.35rem;
}
.tab-selector,
.filter-btn {
min-width: 90px;
font-size: 0.78rem;
padding: 0.5rem !important;
}
}
/* ── 37. GROUP NAV TABS — Cards de navegación de módulo ────────────────────── */
/* Estructura canónica:
← sin nav ni nav-pills
-
Texto
*/
/* ── Contenedor: flexbox wrap centrado ──────────────────────────────────── */
.aa-group-nav-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 0.5rem;
padding: 0;
margin-bottom: 1.5rem;
list-style: none;
}
/* ── Cards: dimensiones ABSOLUTAMENTE FIJAS ─────────────────────────────── */
/* flex: 0 0 120px → NO crece, NO encoge, SIEMPRE 120px exactos. */
/* width + min-width + max-width al mismo valor = imposible que cambie. */
/* El contenido (texto corto o largo) no tiene ninguna influencia. */
.aa-group-nav-tabs > li {
flex: 0 0 120px !important;
width: 120px !important;
min-width: 160px !important;
max-width: 160px !important;
height: 115px !important;
margin: 0 !important;
overflow: hidden;
}
/* ── Link: llena la card completa (100% × 100%) ─────────────────────────── */
.aa-group-nav-link {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem;
padding: 0.5rem 0.5rem !important;
text-align: center !important;
width: 100%;
height: 100%;
flex: 1;
color: var(--aa-navy) !important;
}
/* ── Estado activo (reemplaza .nav-pills .nav-link.active de Bootstrap) ── */
.aa-group-nav-tabs .nav-link.active {
background-color: var(--aa-primary);
color: var(--aa-navy) !important;
border-color: var(--aa-primary) !important;
}
/* ── Hover en tabs inactivos ─────────────────────────────────────────────── */
.aa-group-nav-tabs .nav-link:hover:not(.active) {
background-color: rgba(70, 193, 255, 0.06);
border-color: var(--aa-primary);
}
/* ── Caja del ícono: tamaño fijo, centrado perfecto ─────────────────────── */
.aa-nav-icon-box {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ── Imagen del ícono: misma escala para todos ──────────────────────────── */
.aa-nav-icon-box img {
width: 80%;
height: 80%;
object-fit: contain;
}
/* ── Etiqueta de texto: sin márgenes propios ────────────────────────────── */
.aa-nav-label {
margin: 0 !important;
line-height: 1.2;
}
/* ── Responsive: tablet (< 768px) — dimensiones fijas más compactas ─────── */
@media (max-width: 767px) {
.aa-group-nav-tabs > li {
flex: 0 0 92px !important;
width: 92px !important;
min-width: 92px !important;
max-width: 92px !important;
height: 96px !important;
}
.aa-nav-icon-box {
width: 40px;
height: 40px;
}
.aa-group-nav-link {
gap: 0.3rem;
}
}
/* ── Responsive: móvil (< 480px) — dimensiones fijas pequeñas ───────────── */
@media (max-width: 479px) {
.aa-group-nav-tabs > li {
flex: 0 0 78px !important;
width: 78px !important;
min-width: 78px !important;
max-width: 78px !important;
height: 82px !important;
}
.aa-nav-icon-box {
width: 32px;
height: 32px;
}
.aa-group-nav-link {
gap: 0.2rem;
padding: 0.35rem !important;
}
.aa-nav-label {
font-size: 0.7rem !important;
}
}
/* ── 38. ACCORDION COMPONENT — Sistema .acd-* (Diseño-AG) ──────────────── */
/*
Sistema de accordion nativo del DS, independiente de Bootstrap.
Requiere JS propio (max-height toggle + clase .acd-item--open).
NO interfiere con los accordions Bootstrap 4 existentes (.accordion .card).
Tres variantes: .acd--default / .acd--filled / .acd--border
*/
/* ════ Base ════════════════════════════════════════════════════════════ */
.acd {
display: flex;
flex-direction: column;
}
.acd-item {
overflow: hidden;
}
.acd-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: none;
border: none;
cursor: pointer;
padding: 15px 18px;
text-align: left;
transition: background 0.18s;
}
.acd-header:hover {
background: var(--ag-hover-bg);
}
.acd-title {
display: flex;
align-items: center;
gap: 9px;
font-family: 'Poppins', sans-serif;
font-size: 13.5px;
font-weight: 600;
color: #001A3F;
}
.acd-title i {
font-size: 15px;
flex-shrink: 0;
color: #2d5fa6;
}
.acd-chevron {
font-size: 14px;
color: var(--ag-text-muted);
transition: transform 0.25s ease;
flex-shrink: 0;
}
.acd-item--open > .acd-header .acd-chevron {
transform: rotate(180deg);
}
.acd-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.acd-body p {
margin: 0;
padding: 0 18px 16px;
font-size: 13.5px;
line-height: 1.6;
font-family: 'Public Sans', system-ui, sans-serif;
color: var(--ag-text-muted);
}
/* ════ Variante: .acd--default ═════════════════════════════════════════ */
.acd--default {
background: #fff;
border-radius: var(--aa-radius-md);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.acd--default .acd-item {
border-bottom: 1px solid var(--ag-border);
}
.acd--default .acd-item:last-child {
border-bottom: none;
}
.acd--default .acd-item--open > .acd-header {
background: #f5f8fd;
}
/* ════ Variante: .acd--filled ══════════════════════════════════════════ */
.acd--filled {
border-radius: var(--aa-radius-md);
overflow: hidden;
}
.acd--filled .acd-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.acd--filled .acd-item:last-child {
border-bottom: none;
}
.acd--filled .acd-header {
background: #001A3F;
}
.acd--filled .acd-header:hover {
background: #0a2d5e;
}
.acd--filled .acd-item--open > .acd-header {
background: #0a2d5e;
}
.acd--filled .acd-title {
color: #fff;
}
.acd--filled .acd-title i {
color: #7eb3e8;
}
.acd--filled .acd-chevron {
color: rgba(255, 255, 255, 0.6);
}
.acd--filled .acd-body {
background: #eef4fb;
}
.acd--filled .acd-body p {
color: var(--ag-text-primary);
}
/* ════ Variante: .acd--border ══════════════════════════════════════════ */
.acd--border {
display: flex;
flex-direction: column;
gap: 8px;
}
.acd--border .acd-item {
background: #fff;
border-radius: var(--aa-radius-md);
border-left: 4px solid var(--ag-border);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
transition: border-color 0.2s;
}
.acd--border .acd-item--open {
border-left-color: var(--aa-primary);
}
.acd--border .acd-header {
border-radius: var(--aa-radius-md);
}
.acd--border .acd-item--open > .acd-header {
background: #f0f6ff;
}
.acd--border .acd-body p {
padding-left: 18px;
}
/* Ícono circular dentro de summary card */
.icon-box {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
/* Barra de progreso DS */
.progress-bar-ds {
background-color: var(--aa-primary) !important;
}
/* ── 39. EXPLORADOR DE DOCUMENTOS (_MostrarDocumentos) ──────────────────── */
.btn-modern {
border-radius: var(--aa-radius-sm);
padding: var(--aa-space-2) var(--aa-space-4);
font-weight: 600;
transition: transform 0.2s ease, box-shadow 0.2s ease;
margin: var(--aa-space-1);
}
.btn-modern:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Grid */
.file-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: var(--aa-space-5);
}
/* Tarjeta */
.file-card {
background: var(--aa-bg-white);
border-radius: var(--aa-radius-md);
padding: var(--aa-space-5);
text-align: center;
position: relative;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
border: 1px solid var(--aa-border-color);
}
.file-card:hover {
transform: translateY(-6px) scale(1.03);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
/* Contenedor ícono archivo */
.file-icon {
display: flex;
align-items: center;
justify-content: center;
height: 52px;
margin-bottom: var(--aa-space-3);
transition: transform 0.2s ease;
}
.file-card:hover .file-icon { transform: scale(1.15) rotate(-5deg); }
/* SVG de tipo de archivo */
.file-type-icon {
width: 44px !important;
height: 44px !important;
}
/* Nombre */
.file-name {
font-size: var(--aa-label-small-size);
font-weight: 600;
color: var(--aa-navy);
word-break: break-word;
}
/* Botón eliminar flotante */
.delete-icon {
position: absolute;
top: var(--aa-space-2);
right: var(--aa-space-3);
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--aa-radius-sm);
opacity: 0;
transition: opacity 0.2s ease, background 0.2s ease;
z-index: 10;
}
.file-card:hover .delete-icon { opacity: 1; }
.delete-icon:hover { background: rgba(220, 53, 69, 0.08); }
/* Empty state */
.empty-state {
background: var(--aa-bg-white);
border-radius: var(--aa-radius-md);
padding: 60px var(--aa-space-5);
text-align: center;
box-shadow: var(--aa-shadow-card);
}
.empty-state .empty-icon {
width: 64px;
height: 64px;
opacity: 0.35;
display: block;
margin: 0 auto var(--aa-space-4);
}
.empty-state .empty-icon-fa {
font-size: 4rem;
opacity: 0.35;
color: var(--aa-neutral-500);
display: block;
margin: 0 auto var(--aa-space-4);
}
/* Vista lista */
.file-list {
display: none;
background: var(--aa-bg-white);
border-radius: var(--aa-radius-md);
overflow: hidden;
box-shadow: 1px 4px rgba(0, 0, 0, 0.05) !important;
border: 1px solid var(--ag-border) !important;
}
.file-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--aa-space-3) var(--aa-space-5);
border-bottom: 1px solid var(--aa-border-color);
transition: background 0.2s ease;
position: relative;
}
.file-row:last-child { border-bottom: none; }
.file-row:hover { background: var(--aa-bg-light); }
.file-info {
display: flex;
align-items: center;
gap: var(--aa-space-3);
}
.file-icon-list {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
}
.file-icon-list .file-type-icon {
width: 24px !important;
height: 24px !important;
}
.file-name-list {
font-weight: 500;
color: var(--aa-navy);
}
/* Eliminar en vista lista: aparece al hacer hover */
.file-row .delete-icon {
position: static;
opacity: 0;
transform: translateX(8px) scale(0.9);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.file-row:hover .delete-icon {
opacity: 1;
transform: translateX(0) scale(1);
}
/* Íconos de cambio de vista */
.btn-modern .view-icon { display: block; }
.btn-modern:hover .view-icon { transform: scale(1.15); }
/* ══════════════════════════════════════════════════════════════════════
SCHEDULE / HORARIO — Componente global
Override del componente CodyHouse (cd-schedule) con tokens del DS.
No modifica style.css (vendor). Aplica a todas las vistas del sistema.
══════════════════════════════════════════════════════════════════════ */
/*
Paleta global de 10 colores para todos los horarios del sistema.
- Todos los colores son tokens de escala oficiales del DS Alta Academia.
- Sin valores hex hardcodeados.
- Contraste mínimo con texto blanco: WCAG AA (≥ 4.5:1).
- events 1-4: canalizados por las variables internas de CodyHouse.
- events 5-10: definidos directamente (CodyHouse no los tiene).
- Tamaño de paleta debe coincidir con ScheduleColorHelper.PaletteSize.
Color Token Hex Familia
───── ─────────────────────── ──────── ───────────
1 --aa-scale-cyan-70 #399ED1 Cyan
2 --aa-scale-purple-70 #6366BA Purple
3 --aa-scale-teal-70 #42AA9A Teal
4 --aa-scale-yellow-80 #A37836 Amber
5 --aa-scale-coral-70 #D0626B Coral
6 --aa-scale-blue-60 #2564BF Blue
7 --aa-scale-sky-70 #2F71D1 Sky
8 --aa-scale-navy-50 #173D73 Navy
9 --aa-scale-teal-80 #338478 Teal Dark
10 --aa-scale-coral-80 #A34D54 Coral Dark
*/
.cd-schedule {
--cd-color-border: var(--aa-neutral-300);
--cd-color-event-1: var(--aa-scale-cyan-70); /* Cyan */
--cd-color-event-2: var(--aa-scale-purple-70); /* Purple */
--cd-color-event-3: var(--aa-scale-teal-70); /* Teal */
--cd-color-event-4: var(--aa-scale-yellow-80); /* Amber */
}
/* events 1-4: override con !important para dominar sobre style.css */
.cd-schedule__event [data-event="event-1"],
.cd-schedule-modal[data-event="event-1"] .cd-schedule-modal__header-bg {
background: #399ED1 !important;
background: var(--aa-scale-cyan-70) !important; /* Cyan */
}
.cd-schedule__event [data-event="event-2"],
.cd-schedule-modal[data-event="event-2"] .cd-schedule-modal__header-bg {
background: #6366BA !important;
background: var(--aa-scale-purple-70) !important; /* Purple */
}
.cd-schedule__event [data-event="event-3"],
.cd-schedule-modal[data-event="event-3"] .cd-schedule-modal__header-bg {
background: #42AA9A !important;
background: var(--aa-scale-teal-70) !important; /* Teal */
}
.cd-schedule__event [data-event="event-4"],
.cd-schedule-modal[data-event="event-4"] .cd-schedule-modal__header-bg {
background: #A37836 !important;
background: var(--aa-scale-yellow-80) !important; /* Amber */
}
/* events 5-10: CodyHouse no los define, se agregan con scale tokens DS */
.cd-schedule__event [data-event="event-5"],
.cd-schedule-modal[data-event="event-5"] .cd-schedule-modal__header-bg {
background: #D0626B !important;
background: var(--aa-scale-coral-70) !important; /* Coral */
}
.cd-schedule__event [data-event="event-6"],
.cd-schedule-modal[data-event="event-6"] .cd-schedule-modal__header-bg {
background: #2564BF !important;
background: var(--aa-scale-blue-60) !important; /* Blue */
}
.cd-schedule__event [data-event="event-7"],
.cd-schedule-modal[data-event="event-7"] .cd-schedule-modal__header-bg {
background: #2F71D1 !important;
background: var(--aa-scale-sky-70) !important; /* Sky */
}
.cd-schedule__event [data-event="event-8"],
.cd-schedule-modal[data-event="event-8"] .cd-schedule-modal__header-bg {
background: #173D73 !important;
background: var(--aa-scale-navy-50) !important; /* Navy */
}
.cd-schedule__event [data-event="event-9"],
.cd-schedule-modal[data-event="event-9"] .cd-schedule-modal__header-bg {
background: #338478 !important;
background: var(--aa-scale-teal-80) !important; /* Teal Dark */
}
.cd-schedule__event [data-event="event-10"],
.cd-schedule-modal[data-event="event-10"] .cd-schedule-modal__header-bg {
background: #A34D54 !important;
background: var(--aa-scale-coral-80) !important; /* Coral Dark */
}
/* ── Estados interactivos — universales para todos los eventos ─── */
.cd-schedule__event [data-event]:hover,
.cd-schedule__event [data-event]:focus {
filter: brightness(0.85);
cursor: pointer;
}
.cd-schedule__event [data-event]:focus-visible {
box-shadow: 0 0 0 3px var(--aa-focus-ring);
outline: none;
}
.cd-schedule__event [data-event]:active {
filter: brightness(0.75);
}
/* ── Wrapper: Card del DS ─────────────────────────────────────────── */
.cd-schedule {
background: var(--aa-bg-white) !important;
border-radius: var(--aa-radius-md) !important;
box-shadow: var(--aa-shadow-card) !important;
border: 1px solid var(--aa-border-color) !important;
overflow: hidden !important;
/* sobreescribe margin-top-lg / margin-bottom-lg de CodyHouse */
margin-top: var(--aa-space-6) !important;
margin-bottom: var(--aa-space-6) !important;
}
/* ── Cabeceras de días ────────────────────────────────────────────── */
.cd-schedule__top-info {
background: var(--aa-bg-light);
}
.cd-schedule__top-info > span {
font-family: var(--aa-font-body) !important;
font-size: var(--aa-label-small-size) !important; /* 12px */
font-weight: 600 !important;
color: var(--aa-navy) !important;
text-transform: uppercase;
letter-spacing: 0.4px;
}
@media (min-width: 64rem) {
.cd-schedule__top-info {
border-bottom: 1px solid var(--aa-border-color) !important;
}
}
/* ── Timeline: líneas de grilla y etiquetas de hora ─────────────── */
.cd-schedule__timeline li::after {
background: var(--aa-neutral-300) !important;
}
.cd-schedule__timeline li span {
font-family: var(--aa-font-body) !important;
font-size: 11px !important;
color: var(--aa-secondary-text) !important;
}
/* ── Tarjeta de evento individual ────────────────────────────────── */
.cd-schedule__event a {
border-radius: var(--aa-radius-sm) !important;
overflow: hidden !important;
transition: opacity .2s ease, transform .2s ease !important;
}
.cd-schedule__event:hover a {
opacity: 0.88 !important;
transform: translateY(-1px) !important;
}
/* ── Nombre de la materia dentro del evento ──────────────────────── */
.cd-schedule__name {
font-family: var(--aa-font-body) !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
}
/* ── Rango de horas (data-start / data-end) ──────────────────────── */
.cd-schedule__event a::before {
font-family: var(--aa-font-body) !important;
font-size: 10px !important;
font-weight: 400 !important;
opacity: 0.82 !important;
}
/* ── Borde de separación entre columnas de días ──────────────────── */
@media (min-width: 64rem) {
.cd-schedule__group {
border-color: var(--aa-neutral-300) !important;
}
}
/* ── Modal emergente de evento ───────────────────────────────────── */
.cd-schedule-modal__name {
font-family: var(--aa-font-body) !important;
font-size: 16px !important;
font-weight: 700 !important;
}
.cd-schedule-modal__date {
font-family: var(--aa-font-body) !important;
font-size: 11px !important;
font-weight: 400 !important;
opacity: 0.82 !important;
}
/* ── Responsive: mobile (< 64rem) ───────────────────────────────── */
@media (max-width: 63.99rem) {
.cd-schedule {
border-radius: var(--aa-radius-sm) !important;
}
.cd-schedule__group {
margin-bottom: var(--aa-space-4) !important;
border-bottom: 1px solid var(--aa-border-color);
padding-bottom: var(--aa-space-2);
}
.cd-schedule__group > ul {
padding: 0 var(--aa-space-4) !important;
gap: var(--aa-space-2);
}
.cd-schedule__event {
border-radius: var(--aa-radius-sm) !important;
overflow: hidden !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
MENSAJES — Chat UI · Design System completo
Tokens: AA DS exclusivamente — cero valores hardcoded
═══════════════════════════════════════════════════════════════════════════ */
/* ── Título de página ────────────────────────────────────────────────────── */
.msg-page-title {
font-family: var(--aa-font-heading);
font-size: var(--aa-heading-h4-size);
font-weight: var(--aa-heading-h4-weight);
line-height: var(--aa-heading-h4-lh);
color: var(--aa-navy);
text-align: center;
margin-bottom: var(--aa-space-6);
}
/* ── Contenedor principal ────────────────────────────────────────────────── */
.conten-message {
width: 100%;
padding: var(--aa-space-4) var(--aa-space-6);
}
.msg-layout {
display: flex;
gap: var(--aa-space-6);
align-items: stretch;
height: calc(100vh - 200px);
min-height: 520px;
}
/* ── Sidebar (lista de contactos) ────────────────────────────────────────── */
.conten-chat {
flex: 0 0 300px;
width: 300px;
min-width: 260px;
display: flex;
flex-direction: column;
}
.conten-contac {
background: var(--aa-bg-white);
border-radius: var(--aa-radius-md);
box-shadow: var(--aa-shadow-card) !important;
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.msg-sidebar-body {
flex: 1;
display: flex;
flex-direction: column;
padding: var(--aa-space-4);
overflow: hidden;
}
#contenido {
flex: 1;
overflow-y: auto;
margin-top: var(--aa-space-3);
}
/* ── Panel de chat (área de mensajes) ────────────────────────────────────── */
.cart-message {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
border-radius: var(--aa-radius-md);
box-shadow: var(--aa-shadow-card) !important;
overflow: hidden;
background: var(--aa-bg-white);
padding: 0;
margin: 0;
}
.conversacion {
height: 100%;
display: flex;
flex-direction: column;
border: none !important;
box-shadow: none !important;
background: transparent;
border-radius: 0 !important;
margin-bottom: 0 !important;
}
/* ── Buscar (input-icon pattern, igual a Usuarios/Index) ────────────────── */
.aa-msg-search .form-control {
background-color: var(--aa-bg-white);
border: 2px solid var(--aa-navy);
border-radius: var(--aa-radius-pill);
font-family: var(--aa-font-body);
font-size: var(--aa-font-size-body);
color: var(--aa-neutral-700);
height: 40px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.aa-msg-search .form-control::placeholder {
color: var(--aa-neutral-400);
}
.aa-msg-search .form-control:focus {
background-color: var(--aa-bg-white);
border-color: var(--aa-primary);
box-shadow: 0 0 0 3px rgba(70, 193, 255, 0.15);
}
.aa-msg-search span i {
color: var(--aa-navy);
}
/* ── Botón nuevo chat ────────────────────────────────────────────────────── */
.btn-newchat {
display: flex;
align-items: center;
justify-content: center;
gap: var(--aa-space-2);
padding: var(--aa-space-2) var(--aa-space-5);
font-family: var(--aa-font-body);
font-size: var(--aa-label-medium-size);
font-weight: var(--aa-label-cta-md-weight);
line-height: var(--aa-label-cta-md-lh);
color: var(--aa-bg-white);
background: var(--aa-navy);
border: 1.5px solid var(--aa-navy);
border-radius: var(--aa-radius-pill);
cursor: pointer;
text-decoration: none;
transition: background 0.2s, color 0.2s;
margin-top: var(--aa-space-3);
flex-shrink: 0;
}
.btn-newchat:hover {
background: var(--aa-bg-white);
color: var(--aa-navy);
text-decoration: none;
}
.btn-newchat:focus {
outline: 2px solid var(--aa-primary);
outline-offset: 2px;
text-decoration: none;
}
.btn-newchat:active {
background: var(--aa-scale-navy-60);
color: var(--aa-bg-white);
}
/* ── Botón flotante mobile ───────────────────────────────────────────────── */
.float-button {
position: fixed;
bottom: var(--aa-space-3);
right: var(--aa-space-3);
width: 52px;
height: 52px;
border: 2px solid var(--aa-scale-yellow-60);
border-radius: 50%;
background: var(--aa-scale-yellow-60);
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
z-index: 10;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
box-shadow: 0 4px 12px rgba(255, 188, 84, 0.35);
}
.float-button:hover {
background: var(--aa-scale-yellow-70);
border-color: var(--aa-scale-yellow-70);
}
/* ── Lista de contactos ──────────────────────────────────────────────────── */
.chat-contact {
display: flex;
align-items: center;
gap: var(--aa-space-3);
padding: var(--aa-space-2) var(--aa-space-3);
border-radius: var(--aa-radius-sm);
cursor: pointer;
transition: background 0.15s;
text-decoration: none;
color: inherit;
border: 1px solid transparent;
}
.chat-contact:hover {
background: var(--aa-bg-light);
text-decoration: none;
color: inherit;
}
.chat-contact.active-chat {
background: var(--aa-scale-sky-10);
border-color: var(--aa-scale-sky-20);
}
.chat-contact-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--aa-border-color);
background: var(--aa-bg-light);
}
.chat-contact-info {
flex: 1;
min-width: 0;
}
.chat-contact-name {
font-family: var(--aa-font-body);
font-size: var(--aa-label-medium-size);
font-weight: var(--aa-label-medium-weight);
line-height: var(--aa-label-medium-lh);
color: var(--aa-navy);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-contact-preview {
font-family: var(--aa-font-body);
font-size: var(--aa-label-small-size);
font-weight: var(--aa-label-small-weight);
line-height: var(--aa-label-small-lh);
color: var(--aa-neutral-400);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
/* ── Chat wrapper ────────────────────────────────────────────────────────── */
.chat-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
/* ── Header de conversación ──────────────────────────────────────────────── */
.chat-header {
display: flex;
align-items: center;
gap: var(--aa-space-3);
padding: var(--aa-space-4) var(--aa-space-5);
border-bottom: 1px solid var(--aa-border-color);
background: var(--aa-bg-white);
flex-shrink: 0;
min-height: 68px;
}
.chat-header .avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--aa-border-color);
background: var(--aa-bg-light);
}
.chat-header .chat-name {
font-family: var(--aa-font-body);
font-size: var(--aa-heading-h5-size);
font-weight: var(--aa-heading-h5-weight);
line-height: var(--aa-heading-h5-lh);
color: var(--aa-navy);
margin: 0;
flex: 1;
}
/* ── Área de mensajes ────────────────────────────────────────────────────── */
.chat-messages {
flex: 1;
overflow-y: auto;
padding: var(--aa-space-5);
display: flex;
flex-direction: column;
gap: var(--aa-space-3);
background: var(--aa-bg-white);
}
/* ── Filas de mensajes ───────────────────────────────────────────────────── */
.msg-row {
display: flex;
align-items: flex-end;
gap: var(--aa-space-2);
max-width: 80%;
}
.msg-row.sent {
flex-direction: row-reverse;
align-self: flex-end;
}
.msg-row.received {
align-self: flex-start;
}
.msg-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--aa-border-color);
background: var(--aa-bg-light);
}
.msg-content {
display: flex;
flex-direction: column;
max-width: 100%;
}
/* ── Burbujas ────────────────────────────────────────────────────────────── */
.msg-bubble {
display: inline-block;
padding: var(--aa-space-3) var(--aa-space-4);
border-radius: var(--aa-radius-lg);
font-family: var(--aa-font-body);
font-size: var(--aa-font-size-body);
line-height: var(--aa-line-height);
word-break: break-word;
max-width: 100%;
}
.msg-row.sent .msg-bubble {
background: var(--aa-scale-sky-60);
color: var(--aa-bg-white);
border-bottom-right-radius: var(--aa-radius-sm);
}
.msg-row.received .msg-bubble {
background: var(--aa-bg-white);
color: var(--aa-neutral-700);
border-bottom-left-radius: var(--aa-radius-sm);
box-shadow: 0 1px 4px rgba(0, 26, 63, 0.08);
border: 1px solid var(--aa-border-color);
}
.msg-time {
font-family: var(--aa-font-body);
font-size: var(--aa-label-mini-size);
font-weight: var(--aa-label-mini-weight);
color: var(--aa-neutral-400);
margin-top: var(--aa-space-1);
}
.msg-row.sent .msg-time { text-align: right; }
.msg-row.received .msg-time { text-align: left; }
/* ── Estado vacío ────────────────────────────────────────────────────────── */
.no-messages {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
color: var(--aa-neutral-400);
font-family: var(--aa-font-body);
font-size: var(--aa-body-medium-size);
padding: var(--aa-space-8);
}
/* ── Input de envío ──────────────────────────────────────────────────────── */
.chat-input-area {
display: flex;
align-items: flex-end;
gap: var(--aa-space-3);
padding: var(--aa-space-3) var(--aa-space-5);
border-top: 1px solid var(--aa-border-color);
background: var(--aa-bg-white);
flex-shrink: 0;
}
.chat-input {
flex: 1;
border: 1.5px solid var(--aa-border-color);
border-radius: var(--aa-radius-pill);
padding: var(--aa-space-2) var(--aa-space-5);
font-family: var(--aa-font-body);
font-size: var(--aa-font-size-body);
line-height: var(--aa-line-height);
color: var(--aa-neutral-700);
resize: none;
max-height: 120px;
outline: none;
background: var(--aa-bg-light);
transition: border-color 0.2s, background 0.2s;
}
.chat-input::placeholder {
color: var(--aa-neutral-400);
}
.chat-input:focus {
border-color: var(--aa-primary);
background: var(--aa-bg-white);
}
/* ── Botón enviar ────────────────────────────────────────────────────────── */
.btn-send {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--aa-primary);
border: none;
color: var(--aa-navy);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 0.2s, color 0.2s, transform 0.15s;
}
.btn-send:hover {
background: var(--aa-scale-cyan-70);
color: var(--aa-bg-white);
}
.btn-send:active { transform: scale(0.93); }
.btn-send:focus {
outline: 2px solid var(--aa-primary);
outline-offset: 3px;
}
.btn-send img { filter: brightness(0) invert(1); }
/* ── Scrollbar personalizado ─────────────────────────────────────────────── */
#contenido::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.scroll::-webkit-scrollbar { width: 5px; }
#contenido::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track,
.scroll::-webkit-scrollbar-track { background: transparent; }
#contenido::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.scroll::-webkit-scrollbar-thumb {
background-color: var(--aa-neutral-300);
border-radius: var(--aa-radius-pill);
}
/* ── Burbujas legacy (vistas antiguas) ───────────────────────────────────── */
.sty-message {
position: relative;
padding: var(--aa-space-3) var(--aa-space-5);
margin-bottom: var(--aa-space-3);
margin-left: 30%;
margin-right: var(--aa-space-4);
background-color: var(--aa-pastel-cyan-100);
border-radius: var(--aa-radius-lg);
}
.message-emisor {
position: relative;
padding: var(--aa-space-3) var(--aa-space-5);
margin-bottom: var(--aa-space-3);
margin-right: 30%;
margin-left: var(--aa-space-6);
background-color: var(--aa-pastel-yellow-100);
border-radius: var(--aa-radius-lg);
}
.symbol-message {
width: 3rem;
height: 3rem;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.symbol-chat {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.font-recept {
font-family: var(--aa-font-body);
font-size: var(--aa-label-small-size);
font-weight: 700;
color: var(--aa-navy);
}
.name-user { width: 100%; }
.user-chat {
width: 100%;
display: flex;
flex-wrap: wrap;
cursor: pointer;
}
.message-chart {
width: 82%;
overflow: hidden;
}
.conten-texto {
word-wrap: break-word;
flex: 1 1 auto;
min-height: 1px;
padding: 0 var(--aa-space-2);
font-family: var(--aa-font-body);
font-size: var(--aa-font-size-body);
line-height: var(--aa-line-height);
color: var(--aa-neutral-700);
}
.conten-enviomsg {
display: contents;
}
.btn-enviar {
color: var(--aa-bg-white);
background: var(--aa-scale-blue-60);
padding: var(--aa-space-2) var(--aa-space-5);
min-width: 7rem;
border-radius: var(--aa-radius-md);
border: none;
font-family: var(--aa-font-body);
font-weight: var(--aa-label-cta-md-weight);
font-size: var(--aa-font-size-body);
transition: background 0.2s;
cursor: pointer;
}
.btn-enviar:hover { background: var(--aa-scale-blue-70); }
/* ── Helpers de visibilidad ──────────────────────────────────────────────── */
.message { margin-left: 0%; margin-right: 35%; }
.message-support { margin-left: 35%; margin-right: 0%; }
.ocultar { display: none !important; }
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width: 993px) {
.mostrar-md { display: none; }
.ocultar-md { display: inline-block; }
}
@media (max-width: 992px) {
.mostrar-md {
animation: animation-scrolltop 0.4s ease-out 1;
display: inline-block;
}
.ocultar-md { display: none; }
.msg-layout {
display: block;
height: auto;
min-height: unset;
}
.cart-message {
flex: none;
width: 100%;
height: calc(100vh - 240px);
min-height: 400px;
margin-left: 0;
}
.conten-chat {
flex: none;
width: 100%;
height: auto;
}
.alertaMensajes {
position: fixed;
z-index: 100;
height: auto;
bottom: 0;
left: 0;
right: 0;
border-radius: var(--aa-radius-md) var(--aa-radius-md) 0 0;
box-shadow: 0 -4px 20px rgba(0, 26, 63, 0.12);
max-height: 70vh;
overflow-y: auto;
background: var(--aa-bg-white);
}
.oculta { display: none; }
}
@media (max-width: 576px) {
.msg-page-title {
font-size: var(--aa-heading-h5-size);
line-height: var(--aa-heading-h5-lh);
}
.conten-message {
padding: var(--aa-space-3);
}
.cart-message {
height: calc(100vh - 180px);
}
}
/* ── 40. CHECKOUT ─────────────────────────────────────────────────────── */
.aa-checkout-section-title {
font-family: var(--aa-font-heading) !important;
font-size: var(--aa-heading-h5-size) !important;
font-weight: var(--aa-heading-h5-weight) !important;
line-height: var(--aa-heading-h5-lh) !important;
color: var(--aa-navy) !important;
margin-bottom: 0;
}
.aa-checkout-data-label {
font-family: var(--aa-font-body);
font-size: 11px;
font-weight: 500;
color: var(--aa-neutral-500);
display: block;
margin-bottom: 2px;
}
.aa-checkout-data-value {
font-family: var(--aa-font-body);
font-size: var(--aa-heading-h6-size);
font-weight: 600;
color: var(--aa-navy);
margin-bottom: 0;
}
/* Banner Credomatic */
.checkout-credomatic-banner {
margin-bottom: var(--aa-space-6);
}
.checkout-credomatic-banner img {
max-height: 48px;
object-fit: contain;
}
/* Lista de productos — scroll interno */
.checkout-products-scroll {
overflow-y: auto;
max-height: 300px;
padding-right: var(--aa-space-1);
}
.checkout-products-scroll::-webkit-scrollbar { width: 4px; }
.checkout-products-scroll::-webkit-scrollbar-track { background: transparent; }
.checkout-products-scroll::-webkit-scrollbar-thumb {
background: var(--aa-neutral-300);
border-radius: var(--aa-radius-pill);
}
/* Fila de producto */
.checkout-product-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--aa-space-3);
padding: var(--aa-space-3) 0;
}
.checkout-product-img {
width: 52px;
height: 52px;
border-radius: var(--aa-radius-sm);
object-fit: cover;
flex-shrink: 0;
border: 1px solid var(--aa-border-color);
}
.checkout-product-info {
flex: 1;
min-width: 0;
margin-left: var(--aa-space-3);
}
.checkout-product-name {
font-family: var(--aa-font-body);
font-size: var(--aa-heading-h6-size);
font-weight: 600;
color: var(--aa-navy);
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.checkout-product-price {
font-family: var(--aa-font-body);
font-size: 11px;
color: var(--aa-neutral-500);
margin-bottom: 0;
}
.checkout-product-right {
display: flex;
align-items: center;
gap: var(--aa-space-3);
flex-shrink: 0;
}
.checkout-qty-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--aa-cyan-100);
color: var(--aa-navy);
font-family: var(--aa-font-body);
font-size: 12px;
font-weight: 600;
border-radius: var(--aa-radius-pill);
min-width: 28px;
height: 28px;
padding: 0 var(--aa-space-2);
}
.checkout-item-total {
font-family: var(--aa-font-body);
font-size: var(--aa-heading-h6-size);
font-weight: 600;
color: var(--aa-navy);
min-width: 56px;
text-align: right;
}
.checkout-product-divider {
margin: 0;
border-color: var(--aa-border-color);
opacity: 0.6;
}
/* Resumen financiero */
.checkout-summary {
border-top: 1px solid var(--aa-border-color);
padding-top: var(--aa-space-4);
margin-top: var(--aa-space-4);
}
.checkout-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--aa-space-2);
}
.checkout-summary-label {
font-family: var(--aa-font-body);
font-size: var(--aa-heading-h6-size);
color: var(--aa-neutral-500);
font-weight: 500;
}
.checkout-summary-value {
font-family: var(--aa-font-body);
font-size: var(--aa-heading-h6-size);
color: var(--aa-navy);
font-weight: 600;
}
.checkout-total-row {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--aa-space-3);
border-top: 2px solid var(--aa-border-color);
margin-top: var(--aa-space-2);
}
.checkout-total-label {
font-family: var(--aa-font-heading);
font-size: var(--aa-heading-h5-size);
font-weight: var(--aa-heading-h5-weight);
color: var(--aa-navy);
}
.checkout-total-value {
font-family: var(--aa-font-heading);
font-size: var(--aa-heading-h5-size);
font-weight: var(--aa-heading-h5-weight);
color: var(--aa-primary);
}
/* Done / Error — resultado de la transacción */
.checkout-result-wrapper {
display: flex;
justify-content: center;
padding: var(--aa-space-8) var(--aa-space-4);
}
.checkout-result-card {
max-width: 560px;
width: 100%;
text-align: center;
}
.checkout-result-icon {
margin-bottom: var(--aa-space-6);
}
.checkout-result-title {
font-family: var(--aa-font-heading);
font-size: var(--aa-heading-h3-size);
font-weight: var(--aa-heading-h3-weight);
color: var(--aa-navy);
margin-bottom: var(--aa-space-2);
}
.checkout-result-subtitle {
font-family: var(--aa-font-body);
font-size: var(--aa-heading-h6-size);
color: var(--aa-neutral-500);
margin-bottom: var(--aa-space-8);
}
.checkout-result-error-msg {
font-family: var(--aa-font-body);
font-size: var(--aa-heading-h6-size);
color: #fe7883;
margin-bottom: var(--aa-space-8);
}
.checkout-receipt-options {
display: flex;
justify-content: center;
gap: var(--aa-space-4);
flex-wrap: wrap;
margin-bottom: var(--aa-space-8);
}
.checkout-receipt-option {
cursor: pointer;
border: 1px solid var(--aa-border-color) !important;
border-radius: var(--aa-radius-md) !important;
background-color: var(--aa-bg-white) !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease !important;
min-width: 120px;
}
.checkout-receipt-option:hover {
border-color: var(--aa-primary) !important;
box-shadow: 0 0 0 3px rgba(70, 193, 255, 0.15) !important;
transform: translateY(-2px);
}
.checkout-receipt-option .card-body {
padding: var(--aa-space-6) var(--aa-space-8) !important;
display: flex;
flex-direction: column;
align-items: center;
}
.checkout-receipt-option-label {
font-family: var(--aa-font-body);
font-size: var(--aa-heading-h6-size);
font-weight: 600;
color: var(--aa-navy);
margin-top: var(--aa-space-3);
display: block;
}
@media (max-width: 768px) {
.checkout-receipt-options {
flex-direction: column;
align-items: center;
}
.checkout-receipt-option {
width: 100%;
max-width: 280px;
}
}
/* ══════════════════════════════════════════════════════════════════════════
Administrativos/Index — cards uniformes con botón alineado al fondo
══════════════════════════════════════════════════════════════════════════ */
/* El card actúa como columna flex con padding uniforme en los 4 lados */
.CardAnimacion .card-custom {
display: flex !important;
flex-direction: column !important;
padding: 28px 20px !important;
}
/* Elimina el mt-5 que algunos cards aplican al div del ícono */
.CardAnimacion .card-custom > div:first-child {
margin-top: 0 !important;
}
/* El div de descripción crece para ocupar el espacio disponible,
empujando el botón siempre hacia el fondo del card */
.CardAnimacion .card-custom > div:nth-child(2) {
flex: 1 1 auto;
}
/* Elimina el margen vertical del botón (el padding del card ya da el
espacio inferior uniforme, el margen de 10% era el causante del
desequilibrio entre cards con texto corto y texto largo) */
.CardAnimacion .btnMenuModulos {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ================================================================
Modales — scroll interno cuando el contenido supera el viewport
Header y footer quedan fijos; solo el body hace scroll.
================================================================ */
/* Paso 1: bloquear el wrapper de Keen Admin cuando el modal está abierto.
Bootstrap pone overflow:hidden en pero #kt_wrapper tiene su propio
scroll y sigue capturando los eventos — hay que bloquearlo también. */
body.modal-open #kt_wrapper {
overflow: hidden !important;
}
/* El overlay del modal sí puede scrollear (fallback para dialogs muy altos) */
.modal-open .modal {
overflow-y: auto;
}
/* Paso 2: limitar el diálogo a la altura del viewport */
.modal-dialog {
display: -ms-flexbox !important;
display: flex !important;
max-height: calc(100% - 1rem);
}
@media (min-width: 576px) {
.modal-dialog {
max-height: calc(100% - 3.5rem);
}
}
/* Paso 3: limitar modal-content y clipear el overflow */
.modal-content {
max-height: calc(100vh - 1rem);
overflow: hidden;
}
@media (min-width: 576px) {
.modal-content {
max-height: calc(100vh - 3.5rem);
}
}
/* Paso 4: header y footer no se comprimen */
.modal-header,
.modal-footer {
-ms-flex-negative: 0;
flex-shrink: 0;
}
/* Paso 5: solo el body hace scroll.
min-height: 0 es crítico — sin él, los flex-items tienen min-height: auto
y no pueden encogerse por debajo de su contenido natural → nunca aparece scrollbar.
overscroll-behavior: contain evita que el navegador encadene el scroll al padre. */
.modal-body {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
overscroll-behavior: contain;
}
/* ================================================================
Tabla Notas — sticky headers + columna fija
================================================================ */
.col-nota {
width: 80px;
max-width: 80px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col-estudiante {
width: 250px;
max-width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.table-container {
width: 100%;
overflow-x: auto;
}
/* z-index para que los headers (thead-fixed th) pinten encima de los th
sticky del tbody; sin esto el header de Nota Final queda oculto debajo */
.thead-fixed th {
z-index: 1;
background-color: inherit;
}
.thead-fixed th:first-child {
z-index: 3;
}
/* ── Barra flotante (Mesa de Ayuda / Ayuda): mismo estado activo/hover que el menú lateral (fondo celeste pastel, borde izquierdo celeste, ícono celeste) ── */
.sticky-toolbar .btn.aa-sticky-btn {
background-color: var(--aa-bg-light) !important;
border: 0 solid transparent !important;
border-radius: var(--aa-radius-sm) !important;
}
.sticky-toolbar .btn.aa-sticky-btn:hover,
.sticky-toolbar .btn.aa-sticky-btn:focus,
.sticky-toolbar .btn.aa-sticky-btn:active,
.sticky-toolbar .btn.aa-sticky-btn.active {
background-color: var(--aa-cyan-100) !important;
box-shadow: none !important;
}
.sticky-toolbar .btn.aa-sticky-btn:hover img,
.sticky-toolbar .btn.aa-sticky-btn:focus img,
.sticky-toolbar .btn.aa-sticky-btn:active img,
.sticky-toolbar .btn.aa-sticky-btn.active img {
filter: brightness(0) saturate(100%) invert(69%) sepia(98%) saturate(1724%) hue-rotate(171deg) brightness(103%) contrast(101%) !important;
}
|