@charset "UTF-8";
:root {
  --Saira-PrimarioClaro: #4EC3E4;
  --Saira-Primario: #2E90AC;
  --Saira-PrimarioOscuro: #1A6B85;
  --Saira-PrimarioProfundo: #0E3D4D;
  --Saira-PrimarioNavy: #07215E;
  --Saira-SecundarioClaro: #FEA321;
  --Saira-Secundario: #E8920A;
  --Saira-SecundarioOscuro: #C97D10;
  --Saira-SecundarioFondo: #FFF4E5;
  --Saira-Exito: #27AE60;
  --Saira-ExitoOscuro: #1A7A3C;
  --Saira-ExitoFondo: #EDFAF3;
  --Saira-ExitoTexto: #0D4A2F;
  --Saira-Error: #E74C3C;
  --Saira-ErrorIntenso: #EF4444;
  --Saira-ErrorFondo: #FFF5F5;
  --Saira-ErrorTexto: #5C0A0A;
  --Saira-Advertencia: #F59E0B;
  --Saira-AdvertenciaFondo: #FFFBF0;
  --Saira-AdvertenciaTexto: #7A3A00;
  --Saira-Info: #2E90AC;
  --Saira-InfoFondo: #F0F9FC;
  --Saira-InfoTexto: #1A6B85;
  --Saira-Pregunta: #7C5CBF;
  --Saira-PreguntaFondo: #F4F0FF;
  --Saira-PreguntaTexto: #3C2585;
  --Saira-Peligro: #E5484D;
  --Saira-PeligroFondo: #FEE2E2;
  --Saira-Violeta: #7C3AED;
  --Saira-VioletaClaro: #A78BFA;
  --Saira-Rosa: #EC4899;
  --Saira-AzulDato: #3B82F6;
  --Saira-AmarilloEncabezado: #F9EB9B;
  --Saira-EnLínea: #22C55E;
  --Saira-WhatsApp: #25D366;
  --Saira-WhatsAppOscuro: #1EBE5D;
  --Saira-Blanco: #FFFFFF;
  --Saira-Negro: #0F172A;
  --Saira-GrisFondo: #F4F6F9;
  --Saira-GrisFondoSutil: #F7F9FB;
  --Saira-GrisFondoTarjeta: #FFFFFF;
  --Saira-GrisBorde: #E2E8F0;
  --Saira-GrisBordeSuave: #F1F5F9;
  --Saira-GrisTexto: #1E293B;
  --Saira-GrisTextoFuerte: #0E3D4D;
  --Saira-GrisTextoSuave: #64748B;
  --Saira-GrisTextoTenue: #8A93A3;
  --Saira-RadioSm: 6px;
  --Saira-RadioMd: 8px;
  --Saira-RadioLg: 12px;
  --Saira-RadioXl: 16px;
  --Saira-RadioXxl: 20px;
  --Saira-RadioTarjeta: 22px;
  --Saira-RadioModal: 22px;
  --Saira-RadioPill: 999px;
  --Saira-RadioCírculo: 50%;
  --Saira-AlturaControl: 44px;
  --Saira-AlturaControlCompacto: 36px;
  --Saira-AlturaHeader: 64px;
  --Saira-AlturaTopbar: 64px;
  --Saira-AnchoSidebar: 272px;
  --Saira-AnchoSidebarAngosto: 210px;
  --Saira-Espacio1: 4px;
  --Saira-Espacio2: 8px;
  --Saira-Espacio3: 12px;
  --Saira-Espacio4: 16px;
  --Saira-Espacio5: 20px;
  --Saira-Espacio6: 24px;
  --Saira-Espacio7: 32px;
  --Saira-Espacio8: 40px;
  --Saira-Espacio9: 48px;
  --Saira-Espacio10: 64px;
  --Saira-DuraciónCorta: .22s;
  --Saira-DuraciónBase: .28s;
  --Saira-DuraciónLarga: .35s;
  --Saira-CurvaEstándar: cubic-bezier(.25, .8, .25, 1);
  --Saira-CurvaSalida: cubic-bezier(.4, 0, .2, 1);
  --Saira-CurvaRebote: cubic-bezier(.34, 1.3, .64, 1);
  --Saira-CurvaSuave: cubic-bezier(.16, 1, .3, 1);
  --Saira-SombraSuave: 0 2px 8px rgba(0, 0, 0, .06);
  --Saira-SombraMedia: 0 8px 28px rgba(0, 0, 0, .09);
  --Saira-SombraFuerte: 0 24px 64px rgba(0, 0, 0, .18);
  --Saira-SombraTarjeta: 0 1px 4px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .04);
  --Saira-SombraBotón: 0 2px 8px rgba(0, 0, 0, .12);
  --Saira-SombraPrimario: 0 12px 40px rgba(46, 144, 172, .25);
  --Saira-SombraWhatsApp: 0 6px 20px rgba(37, 211, 102, .28);
  --Saira-SombraModal: 0 32px 80px rgba(0, 0, 0, .18), 0 4px 20px rgba(0, 0, 0, .08);
  --Saira-SombraToast: 0 8px 32px rgba(0, 0, 0, .12), 0 1px 4px rgba(0, 0, 0, .06);
  --Saira-Fuente: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --Saira-TamañoXs: 12px;
  --Saira-TamañoSm: 13px;
  --Saira-TamañoMd: 14px;
  --Saira-TamañoBase: 15px;
  --Saira-TamañoLg: 16px;
  --Saira-TamañoXl: 18px;
  --Saira-Tamaño2Xl: 22px;
  --Saira-Tamaño3Xl: 28px;
  --Saira-TamañoDisplay: 36px;
  --Saira-PesoLigero: 300;
  --Saira-PesoRegular: 400;
  --Saira-PesoMedio: 500;
  --Saira-PesoSemiNegrita: 600;
  --Saira-PesoNegrita: 700;
  --Saira-PesoExtraNegrita: 800;
  --Saira-CapaBase: 1;
  --Saira-CapaDropdown: 100;
  --Saira-CapaSticky: 200;
  --Saira-CapaSidebar: 300;
  --Saira-CapaTopbar: 400;
  --Saira-CapaOverlay: 500;
  --Saira-CapaModal: 600;
  --Saira-CapaToast: 700;
  --Saira-CapaLoader: 800;
  --Saira-CapaCrítico: 900;
}

@media (prefers-color-scheme: dark) {
  :root {
    --Saira-GrisFondo: #0F172A;
    --Saira-GrisFondoSutil: #1E293B;
    --Saira-GrisFondoTarjeta: #1E293B;
    --Saira-GrisBorde: #334155;
    --Saira-GrisBordeSuave: #1E293B;
    --Saira-GrisTexto: #E2E8F0;
    --Saira-GrisTextoFuerte: #F8FAFC;
    --Saira-GrisTextoSuave: #94A3B8;
    --Saira-GrisTextoTenue: #64748B;
    --Saira-Blanco: #1E293B;
    --Saira-InfoFondo: #0C2A38;
    --Saira-ExitoFondo: #143D29;
    --Saira-ErrorFondo: #4A1818;
    --Saira-AdvertenciaFondo: #3D2810;
    --Saira-PreguntaFondo: #2A1D4D;
    --Saira-SecundarioFondo: #3D2810;
    --Saira-PeligroFondo: #4A1818;
  }
}
@media (prefers-contrast: more) {
  :root {
    --Saira-GrisBorde: #94A3B8;
    --Saira-GrisTextoSuave: #334155;
    --Saira-GrisTextoTenue: #475569;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --Saira-DuraciónCorta: 0s;
    --Saira-DuraciónBase: 0s;
    --Saira-DuraciónLarga: 0s;
  }
}
.EstiloTextoFluidoXs {
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
}

.EstiloTextoFluidoSm {
  font-size: clamp(0.8125rem, 2vw, 0.9375rem);
}

.EstiloTextoFluidoBase {
  font-size: clamp(0.875rem, 2.2vw, 1rem);
}

.EstiloTextoFluidoLg {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
}

.EstiloTextoFluidoXl {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
}

.EstiloTextoFluidoTitulo {
  font-size: clamp(1.25rem, 4vw, 2rem);
}

.EstiloTextoFluidoDisplay {
  font-size: clamp(1.75rem, 6vw, 3rem);
}

.EstiloSeparadorVertical {
  width: 1px;
  align-self: stretch;
  background: var(--Saira-GrisBorde);
}

.EstiloSeparadorHorizontal {
  height: 1px;
  width: 100%;
  background: var(--Saira-GrisBorde);
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--Saira-AlturaTopbar, 64px);
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  text-decoration: none;
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: 6px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

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

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  border: none;
  height: 1px;
  background: #E2E8F0;
  margin: 0;
}

.btn:focus,
.btn:active,
.btn:focus-visible,
.btn-check:focus + .btn,
.btn-check:active + .btn {
  outline: none;
  box-shadow: none;
}

.btn:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  background: #F4F6F9;
  color: #1E293B;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  color: #0E3D4D;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
}

h3 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
}

h4 {
  font-size: clamp(1.125rem, 2.5vw, 1.25rem);
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.9375rem;
}

p {
  margin: 0;
  line-height: 1.65;
  text-wrap: pretty;
}

small {
  font-size: 0.875em;
}

code,
pre,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

pre {
  overflow-x: auto;
  padding: 16px;
  background: #F7F9FB;
  border-radius: 8px;
}

::selection {
  background: rgba(46, 144, 172, 0.25);
  color: #0E3D4D;
}

:focus {
  outline-color: #2E90AC;
}

[id] {
  scroll-margin-top: var(--Saira-AlturaTopbar, 64px);
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(46, 144, 172, 0.35) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(46, 144, 172, 0.35);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 107, 133, 0.6);
}

.EstiloScrollPersonalizado {
  scrollbar-width: thin;
  scrollbar-color: rgba(46, 144, 172, 0.35) transparent;
}
.EstiloScrollPersonalizado::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.EstiloScrollPersonalizado::-webkit-scrollbar-track {
  background: transparent;
}
.EstiloScrollPersonalizado::-webkit-scrollbar-thumb {
  background: rgba(46, 144, 172, 0.35);
  border-radius: 8px;
}
.EstiloScrollPersonalizado::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 107, 133, 0.55);
}

.EstiloScrollFino {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.35) transparent;
}
.EstiloScrollFino::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.EstiloScrollFino::-webkit-scrollbar-track {
  background: transparent;
}
.EstiloScrollFino::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.35);
  border-radius: 8px;
}
.EstiloScrollFino::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 107, 133, 0.55);
}

.EstiloScrollOculto {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.EstiloScrollOculto::-webkit-scrollbar {
  display: none;
}

.EstiloScrollSuave {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@media (max-width: 480px) {
  html {
    font-size: 15px;
  }
}
@media (max-width: 420px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .EstiloOcultarMóvil {
    display: none !important;
  }
}

.EstiloOcultarEscritorio {
  display: none !important;
}
@media (max-width: 768px) {
  .EstiloOcultarEscritorio {
    display: initial !important;
  }
}

.EstiloSoloMóvil {
  display: none !important;
}
@media (max-width: 768px) {
  .EstiloSoloMóvil {
    display: block !important;
  }
}

@media (max-width: 768px) {
  .EstiloSoloEscritorio {
    display: none !important;
  }
}

@media (max-width: 992px) {
  .EstiloOcultarTableta {
    display: none !important;
  }
}
@media (min-width: 993px) {
  .EstiloOcultarTableta {
    display: initial !important;
  }
}

@media (hover: none) {
  .EstiloOcultarTáctil {
    display: none !important;
  }
}

.EstiloSoloTáctil {
  display: none !important;
}
@media (hover: none) {
  .EstiloSoloTáctil {
    display: initial !important;
  }
}

.EstiloContenedor {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(12px, 4vw, 24px);
}

.EstiloContenedorAngosto {
  width: 100%;
  max-width: 840px;
  margin-inline: auto;
  padding-inline: clamp(12px, 4vw, 24px);
}

.EstiloContenedorAncho {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(12px, 4vw, 24px);
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloOculto {
  display: none !important;
}

.EstiloInvisible {
  visibility: hidden !important;
}

.EstiloSoloLectura {
  pointer-events: none !important;
  opacity: 0.7;
}

.EstiloDeshabilitado {
  pointer-events: none !important;
  opacity: 0.5;
  cursor: not-allowed !important;
}

.EstiloSinSelección {
  user-select: none;
  -webkit-user-select: none;
}

.EstiloTextoTruncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.EstiloTextoDosLíneas {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.EstiloTextoTresLíneas {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.EstiloSoloLectorPantalla {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.EstiloEnlaceSaltarContenido {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 900;
  padding: 12px 20px;
  background: #2E90AC;
  color: #FFFFFF;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloEnlaceSaltarContenido:focus {
  top: 16px;
  color: #FFFFFF;
}

.EstiloFlotante {
  float: left;
}

.EstiloFlotanteDerecha {
  float: right;
}

.EstiloLimpiarFlotantes::after {
  content: "";
  display: table;
  clear: both;
}

.EstiloDesbordeOculto {
  overflow: hidden;
}

.EstiloDesbordeAuto {
  overflow: auto;
}

.EstiloCursorPointer {
  cursor: pointer;
}

.EstiloCursorAyuda {
  cursor: help;
}

.EstiloCursorProgreso {
  cursor: progress;
}

.EstiloCursorNoPermitido {
  cursor: not-allowed;
}

.EstiloPuntoAnimado {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: EstiloPuntoLatido 1.6s ease-in-out infinite;
}

@keyframes EstiloPuntoLatido {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.5;
  }
}
.EstiloEnlaceExterno::after {
  content: "\f08e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.75em;
  margin-left: 4px;
  opacity: 0.6;
}

.EstiloResaltado {
  background: rgba(254, 163, 33, 0.25);
  padding: 2px 4px;
  border-radius: 6px;
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.u-mt-0 {
  margin-top: 0 !important;
}

.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-ml-0 {
  margin-left: 0 !important;
}

.u-mr-0 {
  margin-right: 0 !important;
}

.u-mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.u-my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.u-pt-0 {
  padding-top: 0 !important;
}

.u-pb-0 {
  padding-bottom: 0 !important;
}

.u-pl-0 {
  padding-left: 0 !important;
}

.u-pr-0 {
  padding-right: 0 !important;
}

.u-px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.u-py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.u-p-0 {
  padding: 0 !important;
}

.u-m-0 {
  margin: 0 !important;
}

.u-gap-0 {
  gap: 0 !important;
}

.u-mt-1 {
  margin-top: 4px !important;
}

.u-mb-1 {
  margin-bottom: 4px !important;
}

.u-ml-1 {
  margin-left: 4px !important;
}

.u-mr-1 {
  margin-right: 4px !important;
}

.u-mx-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.u-my-1 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.u-pt-1 {
  padding-top: 4px !important;
}

.u-pb-1 {
  padding-bottom: 4px !important;
}

.u-pl-1 {
  padding-left: 4px !important;
}

.u-pr-1 {
  padding-right: 4px !important;
}

.u-px-1 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.u-py-1 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.u-p-1 {
  padding: 4px !important;
}

.u-m-1 {
  margin: 4px !important;
}

.u-gap-1 {
  gap: 4px !important;
}

.u-mt-2 {
  margin-top: 8px !important;
}

.u-mb-2 {
  margin-bottom: 8px !important;
}

.u-ml-2 {
  margin-left: 8px !important;
}

.u-mr-2 {
  margin-right: 8px !important;
}

.u-mx-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.u-my-2 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.u-pt-2 {
  padding-top: 8px !important;
}

.u-pb-2 {
  padding-bottom: 8px !important;
}

.u-pl-2 {
  padding-left: 8px !important;
}

.u-pr-2 {
  padding-right: 8px !important;
}

.u-px-2 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.u-py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.u-p-2 {
  padding: 8px !important;
}

.u-m-2 {
  margin: 8px !important;
}

.u-gap-2 {
  gap: 8px !important;
}

.u-mt-3 {
  margin-top: 12px !important;
}

.u-mb-3 {
  margin-bottom: 12px !important;
}

.u-ml-3 {
  margin-left: 12px !important;
}

.u-mr-3 {
  margin-right: 12px !important;
}

.u-mx-3 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.u-my-3 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.u-pt-3 {
  padding-top: 12px !important;
}

.u-pb-3 {
  padding-bottom: 12px !important;
}

.u-pl-3 {
  padding-left: 12px !important;
}

.u-pr-3 {
  padding-right: 12px !important;
}

.u-px-3 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.u-py-3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.u-p-3 {
  padding: 12px !important;
}

.u-m-3 {
  margin: 12px !important;
}

.u-gap-3 {
  gap: 12px !important;
}

.u-mt-4 {
  margin-top: 16px !important;
}

.u-mb-4 {
  margin-bottom: 16px !important;
}

.u-ml-4 {
  margin-left: 16px !important;
}

.u-mr-4 {
  margin-right: 16px !important;
}

.u-mx-4 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.u-my-4 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.u-pt-4 {
  padding-top: 16px !important;
}

.u-pb-4 {
  padding-bottom: 16px !important;
}

.u-pl-4 {
  padding-left: 16px !important;
}

.u-pr-4 {
  padding-right: 16px !important;
}

.u-px-4 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.u-py-4 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.u-p-4 {
  padding: 16px !important;
}

.u-m-4 {
  margin: 16px !important;
}

.u-gap-4 {
  gap: 16px !important;
}

.u-mt-5 {
  margin-top: 20px !important;
}

.u-mb-5 {
  margin-bottom: 20px !important;
}

.u-ml-5 {
  margin-left: 20px !important;
}

.u-mr-5 {
  margin-right: 20px !important;
}

.u-mx-5 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.u-my-5 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.u-pt-5 {
  padding-top: 20px !important;
}

.u-pb-5 {
  padding-bottom: 20px !important;
}

.u-pl-5 {
  padding-left: 20px !important;
}

.u-pr-5 {
  padding-right: 20px !important;
}

.u-px-5 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.u-py-5 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.u-p-5 {
  padding: 20px !important;
}

.u-m-5 {
  margin: 20px !important;
}

.u-gap-5 {
  gap: 20px !important;
}

.u-mt-6 {
  margin-top: 24px !important;
}

.u-mb-6 {
  margin-bottom: 24px !important;
}

.u-ml-6 {
  margin-left: 24px !important;
}

.u-mr-6 {
  margin-right: 24px !important;
}

.u-mx-6 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.u-my-6 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.u-pt-6 {
  padding-top: 24px !important;
}

.u-pb-6 {
  padding-bottom: 24px !important;
}

.u-pl-6 {
  padding-left: 24px !important;
}

.u-pr-6 {
  padding-right: 24px !important;
}

.u-px-6 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.u-py-6 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.u-p-6 {
  padding: 24px !important;
}

.u-m-6 {
  margin: 24px !important;
}

.u-gap-6 {
  gap: 24px !important;
}

.u-mt-7 {
  margin-top: 32px !important;
}

.u-mb-7 {
  margin-bottom: 32px !important;
}

.u-ml-7 {
  margin-left: 32px !important;
}

.u-mr-7 {
  margin-right: 32px !important;
}

.u-mx-7 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.u-my-7 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.u-pt-7 {
  padding-top: 32px !important;
}

.u-pb-7 {
  padding-bottom: 32px !important;
}

.u-pl-7 {
  padding-left: 32px !important;
}

.u-pr-7 {
  padding-right: 32px !important;
}

.u-px-7 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.u-py-7 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.u-p-7 {
  padding: 32px !important;
}

.u-m-7 {
  margin: 32px !important;
}

.u-gap-7 {
  gap: 32px !important;
}

.u-mt-8 {
  margin-top: 40px !important;
}

.u-mb-8 {
  margin-bottom: 40px !important;
}

.u-ml-8 {
  margin-left: 40px !important;
}

.u-mr-8 {
  margin-right: 40px !important;
}

.u-mx-8 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.u-my-8 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.u-pt-8 {
  padding-top: 40px !important;
}

.u-pb-8 {
  padding-bottom: 40px !important;
}

.u-pl-8 {
  padding-left: 40px !important;
}

.u-pr-8 {
  padding-right: 40px !important;
}

.u-px-8 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.u-py-8 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.u-p-8 {
  padding: 40px !important;
}

.u-m-8 {
  margin: 40px !important;
}

.u-gap-8 {
  gap: 40px !important;
}

.u-mt-9 {
  margin-top: 48px !important;
}

.u-mb-9 {
  margin-bottom: 48px !important;
}

.u-ml-9 {
  margin-left: 48px !important;
}

.u-mr-9 {
  margin-right: 48px !important;
}

.u-mx-9 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.u-my-9 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.u-pt-9 {
  padding-top: 48px !important;
}

.u-pb-9 {
  padding-bottom: 48px !important;
}

.u-pl-9 {
  padding-left: 48px !important;
}

.u-pr-9 {
  padding-right: 48px !important;
}

.u-px-9 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.u-py-9 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.u-p-9 {
  padding: 48px !important;
}

.u-m-9 {
  margin: 48px !important;
}

.u-gap-9 {
  gap: 48px !important;
}

.u-mt-10 {
  margin-top: 64px !important;
}

.u-mb-10 {
  margin-bottom: 64px !important;
}

.u-ml-10 {
  margin-left: 64px !important;
}

.u-mr-10 {
  margin-right: 64px !important;
}

.u-mx-10 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}

.u-my-10 {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}

.u-pt-10 {
  padding-top: 64px !important;
}

.u-pb-10 {
  padding-bottom: 64px !important;
}

.u-pl-10 {
  padding-left: 64px !important;
}

.u-pr-10 {
  padding-right: 64px !important;
}

.u-px-10 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}

.u-py-10 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.u-p-10 {
  padding: 64px !important;
}

.u-m-10 {
  margin: 64px !important;
}

.u-gap-10 {
  gap: 64px !important;
}

.u-flex {
  display: flex !important;
}

.u-flex-columna {
  display: flex !important;
  flex-direction: column !important;
}

.u-flex-fila {
  display: flex !important;
  flex-direction: row !important;
}

.u-flex-envolver {
  flex-wrap: wrap !important;
}

.u-flex-centro {
  align-items: center !important;
  justify-content: center !important;
}

.u-flex-entre {
  align-items: center !important;
  justify-content: space-between !important;
}

.u-flex-inicio {
  align-items: flex-start !important;
}

.u-flex-fin {
  align-items: flex-end !important;
}

.u-flex-1 {
  flex: 1 !important;
}

.u-flex-sin-encoger {
  flex-shrink: 0 !important;
}

.u-grid {
  display: grid !important;
}

.u-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.u-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.u-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.u-texto-centro {
  text-align: center !important;
}

.u-texto-izquierda {
  text-align: left !important;
}

.u-texto-derecha {
  text-align: right !important;
}

.u-texto-justificado {
  text-align: justify !important;
}

.u-texto-ahora {
  white-space: nowrap !important;
}

.u-negrita {
  font-weight: 700 !important;
}

.u-semi-negrita {
  font-weight: 600 !important;
}

.u-cursiva {
  font-style: italic !important;
}

.u-ancho-completo {
  width: 100% !important;
}

.u-alto-completo {
  height: 100% !important;
}

.u-ancho-auto {
  width: auto !important;
}

.u-ancho-max {
  max-width: 100% !important;
}

.u-ocultar {
  display: none !important;
}

.u-visible {
  visibility: visible !important;
}

.u-oculto {
  visibility: hidden !important;
}

.u-redondeado {
  border-radius: 8px !important;
}

.u-redondeado-lg {
  border-radius: 12px !important;
}

.u-redondeado-pill {
  border-radius: 999px !important;
}

.u-redondeado-circulo {
  border-radius: 50% !important;
}

.u-sombra-suave {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.u-sombra-media {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09) !important;
}

.u-sin-sombra {
  box-shadow: none !important;
}

.u-borde {
  border: 1px solid #E2E8F0 !important;
}

.u-sin-borde {
  border: none !important;
}

.u-relativo {
  position: relative !important;
}

.u-absoluto {
  position: absolute !important;
}

.u-fijo {
  position: fixed !important;
}

.u-sticky {
  position: sticky !important;
}

.u-opacidad-50 {
  opacity: 0.5 !important;
}

.u-opacidad-75 {
  opacity: 0.75 !important;
}

.u-opacidad-100 {
  opacity: 1 !important;
}

.u-transicion {
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.u-sin-transicion {
  transition: none !important;
}

.u-transparente {
  background: transparent !important;
}

.u-cursor-pointer {
  cursor: pointer !important;
}

@media (max-width: 768px) {
  .u-md-ocultar {
    display: none !important;
  }
  .u-md-ancho-completo {
    width: 100% !important;
  }
  .u-md-texto-centro {
    text-align: center !important;
  }
  .u-md-flex-columna {
    flex-direction: column !important;
  }
}
@media (max-width: 480px) {
  .u-sm-ocultar {
    display: none !important;
  }
  .u-sm-ancho-completo {
    width: 100% !important;
  }
  .u-sm-texto-centro {
    text-align: center !important;
  }
  .u-sm-flex-columna {
    flex-direction: column !important;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloBotón {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: auto;
  padding: 0 16px;
  background-color: #2E90AC;
  border: 1px solid #2E90AC;
  border-radius: 8px;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotón:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotón i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotón:hover, .EstiloBotón:focus, .EstiloBotón:active, .EstiloBotón:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.EstiloBotón:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotón:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotón:disabled, .EstiloBotón[disabled], .EstiloBotón.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.EstiloBotónPequeño {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: auto;
  padding: 0 16px;
  background-color: #2E90AC;
  border: 1px solid #2E90AC;
  border-radius: 8px;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
}
.EstiloBotónPequeño:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónPequeño i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónPequeño:hover, .EstiloBotónPequeño:focus, .EstiloBotónPequeño:active, .EstiloBotónPequeño:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.EstiloBotónPequeño:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónPequeño:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónPequeño:disabled, .EstiloBotónPequeño[disabled], .EstiloBotónPequeño.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.EstiloBotónMediano {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: auto;
  padding: 0 16px;
  background-color: #2E90AC;
  border: 1px solid #2E90AC;
  border-radius: 8px;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónMediano:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónMediano i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónMediano:hover, .EstiloBotónMediano:focus, .EstiloBotónMediano:active, .EstiloBotónMediano:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.EstiloBotónMediano:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónMediano:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónMediano:disabled, .EstiloBotónMediano[disabled], .EstiloBotónMediano.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.EstiloBotónGrande {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: 100%;
  padding: 0 16px;
  background-color: #2E90AC;
  border: 1px solid #2E90AC;
  border-radius: 8px;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  height: 52px;
  font-size: 16px;
}
.EstiloBotónGrande:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónGrande i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónGrande:hover, .EstiloBotónGrande:focus, .EstiloBotónGrande:active, .EstiloBotónGrande:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.EstiloBotónGrande:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónGrande:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónGrande:disabled, .EstiloBotónGrande[disabled], .EstiloBotónGrande.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.EstiloBotónMini {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: auto;
  padding: 0 16px;
  background-color: #2E90AC;
  border: 1px solid #2E90AC;
  border-radius: 8px;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
  gap: 4px;
}
.EstiloBotónMini:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónMini i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónMini:hover, .EstiloBotónMini:focus, .EstiloBotónMini:active, .EstiloBotónMini:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.EstiloBotónMini:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónMini:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónMini:disabled, .EstiloBotónMini[disabled], .EstiloBotónMini.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}
.EstiloBotónMini i {
  font-size: 11px;
}

.EstiloBotónPrimario {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: auto;
  padding: 0 16px;
  background-color: #2E90AC;
  border: 1px solid #2E90AC;
  border-radius: 8px;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónPrimario:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónPrimario i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónPrimario:hover, .EstiloBotónPrimario:focus, .EstiloBotónPrimario:active, .EstiloBotónPrimario:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.EstiloBotónPrimario:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónPrimario:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónPrimario:disabled, .EstiloBotónPrimario[disabled], .EstiloBotónPrimario.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.EstiloBotónSecundario {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: auto;
  padding: 0 16px;
  background-color: #FEA321;
  border: 1px solid #FEA321;
  border-radius: 8px;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónSecundario:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónSecundario i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónSecundario:hover, .EstiloBotónSecundario:focus, .EstiloBotónSecundario:active, .EstiloBotónSecundario:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.EstiloBotónSecundario:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónSecundario:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónSecundario:disabled, .EstiloBotónSecundario[disabled], .EstiloBotónSecundario.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.EstiloBotónVerde {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: auto;
  padding: 0 16px;
  background-color: #27AE60;
  border: 1px solid #27AE60;
  border-radius: 8px;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónVerde:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónVerde i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónVerde:hover, .EstiloBotónVerde:focus, .EstiloBotónVerde:active, .EstiloBotónVerde:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.EstiloBotónVerde:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónVerde:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónVerde:disabled, .EstiloBotónVerde[disabled], .EstiloBotónVerde.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.EstiloBotónRojo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: auto;
  padding: 0 16px;
  background-color: #E74C3C;
  border: 1px solid #E74C3C;
  border-radius: 8px;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónRojo:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónRojo i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónRojo:hover, .EstiloBotónRojo:focus, .EstiloBotónRojo:active, .EstiloBotónRojo:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.EstiloBotónRojo:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónRojo:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónRojo:disabled, .EstiloBotónRojo[disabled], .EstiloBotónRojo.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.EstiloBotónPeligro {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: auto;
  padding: 0 16px;
  background-color: #E5484D;
  border: 1px solid #E5484D;
  border-radius: 8px;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónPeligro:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónPeligro i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónPeligro:hover, .EstiloBotónPeligro:focus, .EstiloBotónPeligro:active, .EstiloBotónPeligro:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.EstiloBotónPeligro:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónPeligro:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónPeligro:disabled, .EstiloBotónPeligro[disabled], .EstiloBotónPeligro.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.EstiloBotónAdvertencia {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: auto;
  padding: 0 16px;
  background-color: #F59E0B;
  border: 1px solid #F59E0B;
  border-radius: 8px;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónAdvertencia:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónAdvertencia i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónAdvertencia:hover, .EstiloBotónAdvertencia:focus, .EstiloBotónAdvertencia:active, .EstiloBotónAdvertencia:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.EstiloBotónAdvertencia:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónAdvertencia:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónAdvertencia:disabled, .EstiloBotónAdvertencia[disabled], .EstiloBotónAdvertencia.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.EstiloBotónInfo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: auto;
  padding: 0 16px;
  background-color: #2E90AC;
  border: 1px solid #2E90AC;
  border-radius: 8px;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónInfo:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónInfo i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónInfo:hover, .EstiloBotónInfo:focus, .EstiloBotónInfo:active, .EstiloBotónInfo:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.EstiloBotónInfo:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónInfo:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónInfo:disabled, .EstiloBotónInfo[disabled], .EstiloBotónInfo.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.EstiloBotónMorado {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: auto;
  padding: 0 16px;
  background-color: #7C5CBF;
  border: 1px solid #7C5CBF;
  border-radius: 8px;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónMorado:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónMorado i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónMorado:hover, .EstiloBotónMorado:focus, .EstiloBotónMorado:active, .EstiloBotónMorado:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.EstiloBotónMorado:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónMorado:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónMorado:disabled, .EstiloBotónMorado[disabled], .EstiloBotónMorado.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.EstiloBotónWhatsApp {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: auto;
  padding: 0 16px;
  background-color: #25D366;
  border: 1px solid #25D366;
  border-radius: 8px;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónWhatsApp:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónWhatsApp i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónWhatsApp:hover, .EstiloBotónWhatsApp:focus, .EstiloBotónWhatsApp:active, .EstiloBotónWhatsApp:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.EstiloBotónWhatsApp:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónWhatsApp:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónWhatsApp:disabled, .EstiloBotónWhatsApp[disabled], .EstiloBotónWhatsApp.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.EstiloBotónContorno {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  background: transparent;
  border: 1.5px solid #2E90AC;
  border-radius: 8px;
  color: #2E90AC !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónContorno:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónContorno:hover {
  background: #2E90AC;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}
.EstiloBotónContorno:active {
  transform: scale(0.97);
}

.EstiloBotónContornoNeutro {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  background: transparent;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  color: #1E293B !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónContornoNeutro:focus-visible {
  outline: 2px solid #E2E8F0;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónContornoNeutro:hover {
  background: #E2E8F0;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}
.EstiloBotónContornoNeutro:active {
  transform: scale(0.97);
}

.EstiloBotónFantasma {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  background: rgba(46, 144, 172, 0.08);
  border: 1px solid transparent;
  border-radius: 8px;
  color: #2E90AC !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónFantasma:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónFantasma:hover {
  background: rgba(46, 144, 172, 0.16);
  color: #2E90AC !important;
}
.EstiloBotónFantasma:active {
  background: rgba(46, 144, 172, 0.22);
}

.EstiloBotónFantasmaNeutro {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  background: rgba(100, 116, 139, 0.08);
  border: 1px solid transparent;
  border-radius: 8px;
  color: #64748B !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónFantasmaNeutro:focus-visible {
  outline: 2px solid #64748B;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónFantasmaNeutro:hover {
  background: rgba(100, 116, 139, 0.16);
  color: #64748B !important;
}
.EstiloBotónFantasmaNeutro:active {
  background: rgba(100, 116, 139, 0.22);
}

.EstiloBotónTexto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  color: #2E90AC !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  transition: color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónTexto:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónTexto:hover {
  color: #1A6B85 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.EstiloEnlace {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 400;
  background: transparent;
  border: none;
  height: auto;
  cursor: pointer;
  color: #64748B;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloEnlace:hover {
  color: #2E90AC;
}

.EstiloBotónNavegación {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: 40px;
  padding: 0 16px;
  background-color: transparent;
  border: 1px solid #F1F5F9;
  border-radius: 8px;
  color: #64748B !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 0;
  height: 36px;
}
.EstiloBotónNavegación:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónNavegación i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónNavegación:hover, .EstiloBotónNavegación:focus, .EstiloBotónNavegación:active, .EstiloBotónNavegación:visited {
  color: #64748B !important;
  text-decoration: none !important;
}
.EstiloBotónNavegación:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónNavegación:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónNavegación:disabled, .EstiloBotónNavegación[disabled], .EstiloBotónNavegación.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}
.EstiloBotónNavegación i {
  font-size: 14px;
  color: #1A6B85;
}
.EstiloBotónNavegación:hover {
  background-color: #F0F9FC;
  border-color: #4EC3E4;
  color: #1A6B85;
}
.EstiloBotónNavegación:hover i {
  color: #1A6B85;
}

.EstiloNavegaciónGrupo {
  display: inline-flex;
  align-items: center;
  border: 1px solid #F1F5F9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.EstiloNavegaciónGrupo .EstiloBotónNavegación {
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: 36px;
}
.EstiloNavegaciónGrupo .EstiloBotónNavegación:first-child {
  border-right: 1px solid #F1F5F9;
}
.EstiloNavegaciónGrupo .EstiloBotónNavegación:hover {
  background-color: #F0F9FC;
  border-color: transparent;
}

.EstiloBotónImagen {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: 36px;
  padding: 0 16px;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  color: #1E293B !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  height: 36px;
  padding: 0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.EstiloBotónImagen:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónImagen i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloBotónImagen:hover, .EstiloBotónImagen:focus, .EstiloBotónImagen:active, .EstiloBotónImagen:visited {
  color: #1E293B !important;
  text-decoration: none !important;
}
.EstiloBotónImagen:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.07);
}
.EstiloBotónImagen:active {
  transform: scale(0.97);
  box-shadow: none;
  filter: brightness(0.95);
}
.EstiloBotónImagen:disabled, .EstiloBotónImagen[disabled], .EstiloBotónImagen.EstiloDeshabilitado {
  background-color: #F4F6F9 !important;
  border-color: #F1F5F9 !important;
  color: #8A93A3 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}
.EstiloBotónImagen i {
  font-size: 15px;
  color: #4EC3E4;
}
.EstiloBotónImagen:hover {
  background-color: #F0F9FC;
  border-color: #4EC3E4;
}

.EstiloBotónIcono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #64748B;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónIcono:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónIcono:hover {
  background: #F7F9FB;
  color: #2E90AC;
}

.EstiloBotónIconoRedondo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #64748B;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 50%;
}
.EstiloBotónIconoRedondo:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónIconoRedondo:hover {
  background: #F7F9FB;
  color: #2E90AC;
}

.EstiloGrupoBotones {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.EstiloGrupoBotonesCompleto {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.EstiloGrupoBotonesCompleto > .EstiloBotón,
.EstiloGrupoBotonesCompleto > .EstiloBotónPrimario,
.EstiloGrupoBotonesCompleto > .EstiloBotónSecundario,
.EstiloGrupoBotonesCompleto > .EstiloBotónContorno,
.EstiloGrupoBotonesCompleto > .EstiloBotónFantasma {
  flex: 1;
  min-width: 0;
}

@media (hover: none) {
  .EstiloBotón:hover,
  .EstiloBotónPrimario:hover,
  .EstiloBotónSecundario:hover,
  .EstiloBotónVerde:hover,
  .EstiloBotónRojo:hover,
  .EstiloBotónPeligro:hover,
  .EstiloBotónAdvertencia:hover,
  .EstiloBotónInfo:hover,
  .EstiloBotónMorado:hover,
  .EstiloBotónWhatsApp:hover,
  .EstiloBotónContorno:hover,
  .EstiloBotónContornoNeutro:hover {
    transform: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloEtiqueta {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  display: block;
  line-height: 1.4;
  color: #64748B;
  margin-bottom: 4px;
}
.EstiloEtiqueta.EstiloObligatorio::after {
  content: " *";
  color: #E74C3C;
}

.EstiloCampo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.EstiloTexto,
.EstiloTextoLectura,
.EstiloTextoMultilínea,
.EstiloSelección,
.EstiloArchivo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 400;
  background-color: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  height: 44px;
  width: 100%;
  color: #0E3D4D;
  font-family: inherit;
  padding: 0 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.22s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 0 12px;
  width: 100%;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}
.EstiloTexto::placeholder,
.EstiloTextoLectura::placeholder,
.EstiloTextoMultilínea::placeholder,
.EstiloSelección::placeholder,
.EstiloArchivo::placeholder {
  color: #8A93A3;
  opacity: 1;
}
.EstiloTexto:hover:not(:disabled):not(:focus),
.EstiloTextoLectura:hover:not(:disabled):not(:focus),
.EstiloTextoMultilínea:hover:not(:disabled):not(:focus),
.EstiloSelección:hover:not(:disabled):not(:focus),
.EstiloArchivo:hover:not(:disabled):not(:focus) {
  border-color: rgba(46, 144, 172, 0.45);
}
.EstiloTexto:focus,
.EstiloTextoLectura:focus,
.EstiloTextoMultilínea:focus,
.EstiloSelección:focus,
.EstiloArchivo:focus {
  outline: none;
  border-color: #2E90AC;
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.12);
}
.EstiloTexto:disabled, .EstiloTexto[readonly],
.EstiloTextoLectura:disabled,
.EstiloTextoLectura[readonly],
.EstiloTextoMultilínea:disabled,
.EstiloTextoMultilínea[readonly],
.EstiloSelección:disabled,
.EstiloSelección[readonly],
.EstiloArchivo:disabled,
.EstiloArchivo[readonly] {
  background: #F7F9FB;
  color: #64748B;
  cursor: not-allowed;
  opacity: 0.75;
}
.EstiloTexto:focus, .EstiloTexto:focus-visible,
.EstiloTextoLectura:focus,
.EstiloTextoLectura:focus-visible,
.EstiloTextoMultilínea:focus,
.EstiloTextoMultilínea:focus-visible,
.EstiloSelección:focus,
.EstiloSelección:focus-visible,
.EstiloArchivo:focus,
.EstiloArchivo:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: #2E90AC;
}

.EstiloTextoLectura {
  background-color: #F7F9FB;
  pointer-events: none;
  color: #64748B;
  font-style: italic;
  cursor: not-allowed;
}
.EstiloTextoLectura:hover, .EstiloTextoLectura:focus {
  background-color: #F7F9FB;
  border-color: #E2E8F0;
  box-shadow: none;
}

.EstiloTextoMultilínea {
  height: auto;
  min-height: 96px;
  padding: 12px;
  text-align: justify;
  resize: vertical;
  line-height: 1.6;
}

.EstiloSelección {
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-color: #FFFFFF !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}
.EstiloSelección:focus, .EstiloSelección:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: #2E90AC !important;
}

.EstiloArchivo {
  padding: 8px;
  cursor: pointer;
  height: auto;
  min-height: 44px;
}
.EstiloArchivo::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  border: 1px solid #2E90AC;
  background: #F0F9FC;
  color: #2E90AC;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloArchivo::file-selector-button:hover {
  background: #2E90AC;
  color: #FFFFFF;
}

.EstiloContraseña {
  position: relative;
  display: flex;
  align-items: center;
}
.EstiloContraseña .EstiloTexto {
  flex: 1;
  padding-right: 44px;
  text-align: left;
}
.EstiloContraseña > i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #64748B;
  font-size: 16px;
  transition: color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloContraseña > i:hover {
  color: #1A6B85;
}

.EstiloGrupoInput {
  display: flex;
  align-items: center;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
  min-height: 44px;
  transition: border-color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloGrupoInput:hover:not(.EstiloError):not(:focus-within) {
  border-color: rgba(46, 144, 172, 0.45);
}
.EstiloGrupoInput:focus-within {
  border-color: #2E90AC;
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.12);
}
.EstiloGrupoInput.EstiloError {
  border-color: #E74C3C;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.12);
  animation: EstiloAnimarSacudir 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.EstiloIconoInput {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: #64748B;
  font-size: 14px;
  flex-shrink: 0;
  width: 38px;
  transition: color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloGrupoInput:focus-within .EstiloIconoInput {
  color: #2E90AC;
}

.EstiloInputGrupo {
  flex: 1;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  height: 100%;
  min-height: calc(44px - 3px);
  padding: 0 12px 0 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #0E3D4D;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.EstiloInputGrupo::placeholder {
  color: #8A93A3;
  opacity: 1;
}
.EstiloInputGrupo:focus, .EstiloInputGrupo:hover, .EstiloInputGrupo:active, .EstiloInputGrupo:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.EstiloInputGrupo:-webkit-autofill, .EstiloInputGrupo:-webkit-autofill:hover, .EstiloInputGrupo:-webkit-autofill:focus {
  -webkit-text-fill-color: #0E3D4D;
  -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

.EstiloBtnOjo {
  background: transparent;
  border: 0;
  padding: 0 12px;
  height: 100%;
  color: #8A93A3;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-shrink: 0;
}
.EstiloBtnOjo:hover {
  color: #2E90AC;
}
.EstiloBtnOjo:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: -2px;
  border-radius: 6px;
}

.EstiloEntradaError {
  border-color: #E74C3C !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.12) !important;
  animation: EstiloAnimarSacudir 0.25s linear;
}

@keyframes EstiloAnimarSacudir {
  0%, 100% {
    transform: translateX(0);
  }
  25%, 75% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
}
.EstiloMensajeError {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(231, 76, 60, 0.08);
  border: 1px solid rgba(231, 76, 60, 0.18);
  border-radius: 8px;
  font-size: 13px;
  color: #5C0A0A;
  font-weight: 600;
}
.EstiloMensajeError i {
  flex-shrink: 0;
  color: #E74C3C;
}

.EstiloMensajeAyuda {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 13px;
  color: #64748B;
}
.EstiloMensajeAyuda i {
  flex-shrink: 0;
}

.EstiloPasswordStrength {
  margin-top: 8px;
}

.EstiloBarraFuerza {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.EstiloNivelFuerza {
  height: 4px;
  flex: 1;
  border-radius: 999px;
  background: #F1F5F9;
  transition: background-color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloNivelFuerza.Nivel1.Activo {
  background: #E74C3C;
}
.EstiloNivelFuerza.Nivel2.Activo {
  background: #F59E0B;
}
.EstiloNivelFuerza.Nivel3.Activo {
  background: #27AE60;
}

.EstiloTextoFuerza {
  font-size: 13px;
  color: #64748B;
}

.EstiloCapsLock,
.EstiloShift {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #7A3A00;
  background: #FFFBF0;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 4px;
}
.EstiloCapsLock i,
.EstiloShift i {
  flex-shrink: 0;
  color: #F59E0B;
}

.EstiloBarraAcciones {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}

.EstiloBarraSeparador {
  width: 1px;
  align-self: stretch;
  background: #F1F5F9;
}

.EstiloLayoutFormulario {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.EstiloCampoHorizontal {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: center;
}
@media (max-width: 768px) {
  .EstiloCampoHorizontal {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.EstiloInterruptor {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.EstiloInterruptor input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 44px;
  height: 24px;
  min-width: 44px;
  border-radius: 999px;
  background: #E2E8F0;
  cursor: pointer;
  border: none;
  outline: none;
  transition: background 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloInterruptor input[type=checkbox]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloInterruptor input[type=checkbox]:checked {
  background: #2E90AC;
}
.EstiloInterruptor input[type=checkbox]:checked::after {
  transform: translateX(20px);
}
.EstiloInterruptor input[type=checkbox]:focus-visible {
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.25);
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloAlerta {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  margin-bottom: 20px;
}
.EstiloAlerta p,
.EstiloAlerta span {
  font-size: 15px;
  margin: 0;
  line-height: 1.65;
  padding-top: 4px;
}

.EstiloAlertaÍcono {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.EstiloAlertaÍcono i {
  font-size: 0.88rem;
}

.EstiloAlerta.Info {
  background: #F0F9FC;
  border-color: rgba(46, 144, 172, 0.2);
}
.EstiloAlerta.Info .EstiloAlertaÍcono {
  background: rgba(46, 144, 172, 0.12);
  color: #2E90AC;
}
.EstiloAlerta.Info p,
.EstiloAlerta.Info span {
  color: #1A6B85;
}

.EstiloAlerta.Éxito {
  background: #EDFAF3;
  border-color: rgba(39, 174, 96, 0.25);
}
.EstiloAlerta.Éxito .EstiloAlertaÍcono {
  background: rgba(39, 174, 96, 0.14);
  color: #1A7A3C;
}
.EstiloAlerta.Éxito p,
.EstiloAlerta.Éxito span {
  color: #0D4A2F;
}

.EstiloAlerta.Error {
  background: #FFF5F5;
  border-color: rgba(231, 76, 60, 0.22);
}
.EstiloAlerta.Error .EstiloAlertaÍcono {
  background: rgba(231, 76, 60, 0.12);
  color: #E74C3C;
}
.EstiloAlerta.Error p,
.EstiloAlerta.Error span {
  color: #5C0A0A;
}

.EstiloAlerta.Advertencia {
  background: #FFFBF0;
  border-color: rgba(245, 158, 11, 0.28);
}
.EstiloAlerta.Advertencia .EstiloAlertaÍcono {
  background: rgba(245, 158, 11, 0.16);
  color: #7A3A00;
}
.EstiloAlerta.Advertencia p,
.EstiloAlerta.Advertencia span {
  color: #7A3A00;
}

.EstiloAlerta.Pregunta {
  background: #F4F0FF;
  border-color: rgba(124, 92, 191, 0.22);
}
.EstiloAlerta.Pregunta .EstiloAlertaÍcono {
  background: rgba(124, 92, 191, 0.14);
  color: #7C5CBF;
}
.EstiloAlerta.Pregunta p,
.EstiloAlerta.Pregunta span {
  color: #3C2585;
}

.EstiloAlerta.Peligro {
  background: #FEE2E2;
  border-color: rgba(229, 72, 77, 0.22);
}
.EstiloAlerta.Peligro .EstiloAlertaÍcono {
  background: rgba(229, 72, 77, 0.14);
  color: #E5484D;
}
.EstiloAlerta.Peligro p,
.EstiloAlerta.Peligro span {
  color: #E5484D;
}

.EstiloAlertaCompacta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.EstiloAlertaCompacta.Error {
  background: rgba(231, 76, 60, 0.07);
  border: 1px solid rgba(231, 76, 60, 0.18);
  color: #5C0A0A;
}
.EstiloAlertaCompacta.Advertencia {
  background: #FFFBF0;
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #7A3A00;
}
.EstiloAlertaCompacta.Éxito {
  background: #EDFAF3;
  border: 1px solid rgba(39, 174, 96, 0.25);
  color: #0D4A2F;
}

.EstiloAlertaCerrable {
  position: relative;
  padding-right: 44px;
}

.EstiloAlertaCerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: currentColor;
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloAlertaCerrar:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: #F7F9FB;
  color: #64748B;
  border: 1px solid #E2E8F0;
  white-space: nowrap;
  line-height: 1.4;
}
.EstiloChip i {
  font-size: 0.9em;
  flex-shrink: 0;
}

.EstiloChipPrimario {
  background: #F0F9FC;
  color: #2E90AC;
  border-color: rgba(46, 144, 172, 0.22);
}
.EstiloChipPrimario i {
  color: #2E90AC;
}

.EstiloChipSecundario {
  background: #FFF4E5;
  color: #C97D10;
  border-color: rgba(254, 163, 33, 0.3);
}
.EstiloChipSecundario i {
  color: #FEA321;
}

.EstiloChipÉxito {
  background: #EDFAF3;
  color: #0D4A2F;
  border-color: rgba(39, 174, 96, 0.25);
}
.EstiloChipÉxito i {
  color: #27AE60;
}

.EstiloChipError {
  background: #FFF5F5;
  color: #5C0A0A;
  border-color: rgba(231, 76, 60, 0.22);
}
.EstiloChipError i {
  color: #E74C3C;
}

.EstiloChipAdvertencia {
  background: #FFFBF0;
  color: #7A3A00;
  border-color: rgba(245, 158, 11, 0.28);
}
.EstiloChipAdvertencia i {
  color: #F59E0B;
}

.EstiloChipInfo {
  background: #F0F9FC;
  color: #1A6B85;
  border-color: rgba(46, 144, 172, 0.22);
}
.EstiloChipInfo i {
  color: #2E90AC;
}

.EstiloChipPregunta {
  background: #F4F0FF;
  color: #3C2585;
  border-color: rgba(124, 92, 191, 0.22);
}
.EstiloChipPregunta i {
  color: #7C5CBF;
}

.EstiloChipCerrable {
  padding-right: 4px;
}
.EstiloChipCerrable .EstiloChipCerrar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: currentColor;
  opacity: 0.6;
  transition: opacity 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 10px;
}
.EstiloChipCerrable .EstiloChipCerrar:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}

.EstiloBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  background: #2E90AC;
  letter-spacing: 0.2px;
}

.EstiloBadgePeligro {
  background: #E74C3C;
}

.EstiloBadgeÉxito {
  background: #27AE60;
}

.EstiloBadgeAdvertencia {
  background: #F59E0B;
}

.EstiloBadgeInfo {
  background: #2E90AC;
}

.EstiloBadgeNeutro {
  background: #E2E8F0;
  color: #1E293B;
}

.EstiloBadgePunto {
  width: 8px;
  height: 8px;
  min-width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
}

.EstiloEtiqueta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #F0F9FC;
  color: #2E90AC;
}
.EstiloEtiqueta i {
  font-size: 0.85em;
}

.EstiloEtiquetaSecundaria {
  background: #FFF4E5;
  color: #C97D10;
}

.EstiloEtiquetaÉxito {
  background: #EDFAF3;
  color: #0D4A2F;
}

.EstiloEtiquetaPeligro {
  background: #FFF5F5;
  color: #5C0A0A;
}

.EstiloGrupoChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloNotificaciónTrigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  background: transparent;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloNotificaciónTrigger:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloNotificaciónTrigger i {
  color: #FFFFFF;
  font-size: 16px;
}
.EstiloNotificaciónTrigger:hover {
  border-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.05);
}

.EstiloNotificaciónBadge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #E74C3C;
  border: 2px solid #1A6B85;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
}

.EstiloNotificaciónPanel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  width: 340px;
  max-width: calc(100vw - 32px);
  z-index: 100;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}
.EstiloNotificaciónPanel.PanelAbierto {
  display: block;
  animation: EstiloEntradaNotificación 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes EstiloEntradaNotificación {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.EstiloNotificaciónCabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #F0F9FC;
  border-bottom: 1px solid #E2E8F0;
}
.EstiloNotificaciónCabecera h4 {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0E3D4D;
  margin: 0;
}

.EstiloNotificaciónMarcarTodo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #2E90AC;
  cursor: pointer;
  background: none;
  border: none;
}
.EstiloNotificaciónMarcarTodo:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloNotificaciónMarcarTodo:hover {
  text-decoration: underline;
}

.EstiloNotificaciónLista {
  max-height: 380px;
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(46, 144, 172, 0.3) transparent;
}
.EstiloNotificaciónLista::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.EstiloNotificaciónLista::-webkit-scrollbar-track {
  background: transparent;
}
.EstiloNotificaciónLista::-webkit-scrollbar-thumb {
  background: rgba(46, 144, 172, 0.3);
  border-radius: 8px;
}
.EstiloNotificaciónLista::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 107, 133, 0.55);
}

.EstiloNotificaciónÍtem {
  display: flex;
  gap: 11px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloNotificaciónÍtem:hover {
  background: #F0F9FC;
}
.EstiloNotificaciónÍtem.NoLeída {
  background: rgba(78, 195, 228, 0.06);
}

.EstiloNotificaciónÍcono {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: #FFFFFF;
}
.EstiloNotificaciónÍcono.Info {
  background: #2E90AC;
}
.EstiloNotificaciónÍcono.Éxito {
  background: #27AE60;
}
.EstiloNotificaciónÍcono.Advertencia {
  background: #F59E0B;
}
.EstiloNotificaciónÍcono.Error {
  background: #E74C3C;
}
.EstiloNotificaciónÍcono.Pregunta {
  background: #7C5CBF;
}

.EstiloNotificaciónTexto {
  flex: 1;
  min-width: 0;
}

.EstiloNotificaciónTítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.EstiloNotificaciónMensaje {
  font-size: 13px;
  color: #64748B;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.EstiloNotificaciónHora {
  font-size: 12px;
  color: #8A93A3;
  margin-top: 4px;
}

.EstiloNotificaciónPuntoNuevo {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4EC3E4;
  flex-shrink: 0;
  margin-top: 4px;
}

.EstiloNotificaciónVacío {
  padding: 40px 20px;
  text-align: center;
  color: #64748B;
  font-size: 15px;
}
.EstiloNotificaciónVacío i {
  font-size: 28px;
  color: #E2E8F0;
  display: block;
  margin-bottom: 12px;
}

.EstiloNotificaciónPie {
  padding: 10px 16px;
  text-align: center;
  border-top: 1px solid #E2E8F0;
}
.EstiloNotificaciónPie a {
  font-size: 13px;
  font-weight: 600;
  color: #2E90AC;
  text-decoration: none;
}
.EstiloNotificaciónPie a:hover {
  text-decoration: underline;
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloTarjeta {
  background: #FFFFFF;
  border-radius: 22px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.EstiloTarjetaInteractiva {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  border-radius: 22px;
}
.EstiloTarjetaInteractiva:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
}
@media (hover: none) {
  .EstiloTarjetaInteractiva:hover {
    transform: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  }
}
.EstiloTarjetaInteractiva:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}

.EstiloTarjetaEncabezado {
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #E2E8F0;
  background: linear-gradient(to right, #F7F9FB, #FFFFFF);
}
.EstiloTarjetaEncabezado.EncabezadoPrimario {
  background: linear-gradient(135deg, #0E3D4D 0%, #1A6B85 45%, #2E90AC 100%);
  border-bottom: none;
}
.EstiloTarjetaEncabezado.EncabezadoPrimario .EstiloTarjetaTítulo {
  color: #FFFFFF;
}
.EstiloTarjetaEncabezado.EncabezadoPrimario .EstiloTarjetaÍcono {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #FFFFFF;
}

.EstiloTarjetaTítuloGrupo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
}

.EstiloTarjetaÍcono {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0E3D4D 0%, #1A6B85 45%, #2E90AC 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #FFFFFF;
  flex-shrink: 0;
}

.EstiloTarjetaTítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #0E3D4D;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.EstiloTarjetaCuerpo {
  padding: 16px 20px;
}

.EstiloTarjetaPie {
  padding: 12px 20px;
  border-top: 1px solid #F1F5F9;
  background: #F7F9FB;
}

.EstiloTarjetaForm,
.EstiloTarjetaTabla {
  background: #FFFFFF;
  border-radius: 22px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 20px;
}

.EstiloTarjetaCifra {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.EstiloTarjetaCifra .Valor {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #0E3D4D;
  line-height: 1.1;
}
.EstiloTarjetaCifra .Etiqueta {
  font-size: 13px;
  color: #64748B;
}

.EstiloFilaDato {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #F1F5F9;
  transition: background-color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloFilaDato:last-child {
  border-bottom: none;
}
.EstiloFilaDato:hover {
  background: rgba(46, 144, 172, 0.03);
}

.EstiloTarjetaDestacada {
  position: relative;
  overflow: hidden;
}
.EstiloTarjetaDestacada::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #1A6B85 0%, #2E90AC 100%);
}

.EstiloTarjetaConBordeLateral {
  border-left: 4px solid #2E90AC;
}

.EstiloTarjetaConBordeLateral--Azul {
  border-left-color: #2E90AC;
}

.EstiloTarjetaConBordeLateral--Naranja {
  border-left-color: #FEA321;
}

.EstiloTarjetaConBordeLateral--Verde {
  border-left-color: #27AE60;
}

.EstiloTarjetaConBordeLateral--Morado {
  border-left-color: #7C5CBF;
}

.EstiloTarjetaConBordeLateral--Rojo {
  border-left-color: #E74C3C;
}

.EstiloGridTarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.EstiloGridTarjetasCompacto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloSpinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2.5px solid rgba(46, 144, 172, 0.2);
  border-top-color: #2E90AC;
  border-radius: 50%;
  animation: EstiloGirarSpinner 0.75s linear infinite;
}

.EstiloSpinnerPequeño {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.EstiloSpinnerGrande {
  width: 40px;
  height: 40px;
  border-width: 3.5px;
}

.EstiloSpinnerBlanco {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: #FFFFFF;
}

@keyframes EstiloGirarSpinner {
  to {
    transform: rotate(360deg);
  }
}
.EstiloCargadorPuntos {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.EstiloCargadorPuntos span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2E90AC;
  animation: EstiloPuntoCargando 1.4s ease-in-out infinite both;
}
.EstiloCargadorPuntos span:nth-child(1) {
  animation-delay: -0.32s;
}
.EstiloCargadorPuntos span:nth-child(2) {
  animation-delay: -0.16s;
}
.EstiloCargadorPuntos span:nth-child(3) {
  animation-delay: 0s;
}

@keyframes EstiloPuntoCargando {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
.EstiloSkeleton {
  position: relative;
  overflow: hidden;
  background: #F1F5F9;
  border-radius: 8px;
  display: block;
  width: 100%;
  height: 16px;
}
.EstiloSkeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: EstiloEsqueletoBrillo 1.4s infinite;
}

.EstiloSkeletonTítulo {
  height: 24px;
  width: 60%;
  margin-bottom: 8px;
}

.EstiloSkeletonTexto {
  height: 14px;
  margin-bottom: 8px;
}
.EstiloSkeletonTexto:last-child {
  margin-bottom: 0;
  width: 80%;
}

.EstiloSkeletonImagen {
  width: 100%;
  height: 180px;
  border-radius: 12px;
}

.EstiloSkeletonAvatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.EstiloSkeletonBotón {
  height: 44px;
  width: 140px;
  border-radius: 8px;
}

.EstiloSkeletonTarjeta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
}

.EstiloSkeletonFila {
  display: flex;
  align-items: center;
  gap: 12px;
}
.EstiloSkeletonFila .EstiloSkeletonInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.EstiloBarraIndeterminada {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(46, 144, 172, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
.EstiloBarraIndeterminada::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 40%;
  background: #2E90AC;
  border-radius: 999px;
  animation: EstiloBarraIndeterminada 1.4s infinite ease-in-out;
}

@keyframes EstiloBarraIndeterminada {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}
.EstiloContenedorCarga {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 20px;
  text-align: center;
}

.EstiloTextoCarga {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #64748B;
  letter-spacing: 0.2px;
}

@media (prefers-reduced-motion: reduce) {
  .EstiloSpinner,
  .EstiloCargadorPuntos span,
  .EstiloSkeleton::after,
  .EstiloBarraIndeterminada::after {
    animation: none;
  }
  .EstiloSkeleton::after {
    display: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloWidget {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 16px 20px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  position: relative;
}
.EstiloWidget::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloWidget:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
}
.EstiloWidget:hover::after {
  opacity: 1;
}
.EstiloWidget.Primario::after {
  background: #2E90AC;
}
.EstiloWidget.Secundario::after {
  background: #FEA321;
}
.EstiloWidget.Éxito::after {
  background: #27AE60;
}
.EstiloWidget.Pregunta::after {
  background: #7C5CBF;
}
.EstiloWidget.Peligro::after {
  background: #E5484D;
}
@media (hover: none) {
  .EstiloWidget:hover {
    transform: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  }
}

.EstiloWidgetÍcono {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.EstiloWidgetÍcono.Primario {
  background: rgba(46, 144, 172, 0.13);
  color: #1A6B85;
}
.EstiloWidgetÍcono.Secundario {
  background: rgba(254, 163, 33, 0.13);
  color: #C97D10;
}
.EstiloWidgetÍcono.Éxito {
  background: rgba(39, 174, 96, 0.13);
  color: #1A7A3C;
}
.EstiloWidgetÍcono.Pregunta {
  background: rgba(124, 92, 191, 0.13);
  color: #7C5CBF;
}
.EstiloWidgetÍcono.Peligro {
  background: rgba(229, 72, 77, 0.13);
  color: #E5484D;
}

.EstiloWidgetValor {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #0E3D4D;
  line-height: 1;
  letter-spacing: -0.5px;
}

.EstiloWidgetEtiqueta {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #64748B;
  margin-top: 3px;
}

.EstiloWidgetsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
@media (max-width: 768px) {
  .EstiloWidgetsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .EstiloWidgetsGrid {
    grid-template-columns: 1fr;
  }
}

.EstiloWidgetCompacto {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #F7F9FB;
  border: 1px solid #F1F5F9;
}

.EstiloWidgetCompactoTexto {
  min-width: 0;
}
.EstiloWidgetCompactoTexto .Valor {
  font-size: 16px;
  font-weight: 700;
  color: #0E3D4D;
  line-height: 1.2;
}
.EstiloWidgetCompactoTexto .Etiqueta {
  font-size: 12px;
  color: #64748B;
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloTabs {
  background: #FFFFFF;
  border-radius: 22px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  animation: EstiloAnimarEntradaTabs 0.4s cubic-bezier(0.34, 1.3, 0.64, 1) 0.05s both;
}

@keyframes EstiloAnimarEntradaTabs {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.EstiloTabsBarra {
  display: flex;
  border-bottom: 1px solid #E2E8F0;
  background: #F7F9FB;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #E2E8F0 transparent;
}
.EstiloTabsBarra::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.EstiloTabsBarra::-webkit-scrollbar-track {
  background: transparent;
}
.EstiloTabsBarra::-webkit-scrollbar-thumb {
  background: #E2E8F0;
  border-radius: 8px;
}
.EstiloTabsBarra::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 107, 133, 0.55);
}

.EstiloTab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-bottom: -1px;
}
.EstiloTab:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloTab i {
  font-size: 15px;
}
.EstiloTab:hover {
  color: #2E90AC;
  background: rgba(78, 195, 228, 0.05);
}
.EstiloTab.Activo {
  color: #1A6B85;
  border-bottom-color: #4EC3E4;
  background: #FFFFFF;
  font-weight: 700;
}

.EstiloTabPanel {
  display: none;
  padding: 24px 20px;
  animation: EstiloAnimarEntradaTabs 0.25s ease both;
}
.EstiloTabPanel.Activo {
  display: block;
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloTarjetaTabla {
  background: #FFFFFF;
  border-radius: 22px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  animation: EstiloAnimarEntradaTabla 0.4s cubic-bezier(0.34, 1.3, 0.64, 1) 0.05s both;
}

@keyframes EstiloAnimarEntradaTabla {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.EstiloTablaEncabezado {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #F1F5F9;
  background: linear-gradient(135deg, #F7F9FB, #F0F9FC);
  flex-wrap: wrap;
}

.EstiloTablaEncabezadoTítulo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.EstiloTablaEncabezadoTítulo i {
  color: #2E90AC;
  font-size: 0.95rem;
}
.EstiloTablaEncabezadoTítulo span {
  font-weight: 700;
  font-size: 15px;
  color: #0E3D4D;
}

.EstiloContador {
  font-size: 12px;
  font-weight: 700;
  color: #2E90AC;
  background: rgba(78, 195, 228, 0.1);
  border: 1px solid rgba(78, 195, 228, 0.22);
  border-radius: 999px;
  padding: 4px 12px;
}

.EstiloTablaContenedor {
  overflow-x: auto;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(46, 144, 172, 0.3) transparent;
}
.EstiloTablaContenedor::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.EstiloTablaContenedor::-webkit-scrollbar-track {
  background: transparent;
}
.EstiloTablaContenedor::-webkit-scrollbar-thumb {
  background: rgba(46, 144, 172, 0.3);
  border-radius: 8px;
}
.EstiloTablaContenedor::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 107, 133, 0.55);
}

.EstiloTabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}
.EstiloTabla thead tr {
  background: linear-gradient(to right, #F0F9FC, #F7F9FB);
}
.EstiloTabla thead th {
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 700;
  color: #1A6B85;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  border-bottom: 2px solid rgba(78, 195, 228, 0.22);
  white-space: nowrap;
  text-align: left;
}
.EstiloTabla tbody tr {
  border-bottom: 1px solid #F1F5F9;
  transition: background-color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloTabla tbody tr:hover {
  background: linear-gradient(to right, rgba(78, 195, 228, 0.04), transparent 60%);
}
.EstiloTabla tbody tr:last-child {
  border-bottom: none;
}
.EstiloTabla tbody tr:nth-child(even) {
  background: rgba(244, 246, 249, 0.5);
}
.EstiloTabla tbody tr:nth-child(even):hover {
  background: linear-gradient(to right, rgba(78, 195, 228, 0.05), rgba(244, 246, 249, 0.5) 60%);
}
.EstiloTabla tbody td {
  padding: 14px 20px;
  color: #1E293B;
  vertical-align: middle;
}

.EstiloCeldaÍtem {
  display: flex;
  align-items: center;
  gap: 12px;
}

.EstiloÍtemFoto {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid #E2E8F0;
  flex-shrink: 0;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloÍtemFoto:hover {
  border-color: #4EC3E4;
  transform: scale(1.08);
}
.EstiloÍtemFoto.Redonda {
  border-radius: 50%;
}

.EstiloÍtemTextos {
  min-width: 0;
}

.EstiloÍtemTítulo {
  font-weight: 700;
  color: #0E3D4D;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 200px;
  display: block;
  font-size: 15px;
}

.EstiloÍtemSub {
  font-size: 12px;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}

.EstiloTdEllipsis {
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .EstiloTabla thead {
    display: none;
  }
  .EstiloTabla tbody tr {
    display: block;
    padding: 14px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    margin: 10px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  .EstiloTabla tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #F7F9FB;
  }
  .EstiloTabla tbody td:last-child {
    border-bottom: none;
    justify-content: flex-end;
    padding-top: 12px;
  }
  .EstiloTabla tbody td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 700;
    color: #1A6B85;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    flex-shrink: 0;
    margin-right: 12px;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloPanelProgreso {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 29, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 800;
  animation: EstiloAnimarFondoProgreso 0.2s ease-out;
  padding: 20px;
}

@keyframes EstiloAnimarFondoProgreso {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.EstiloContenedorCarga {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 22px;
  padding: 40px 48px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.18), 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  animation: EstiloAnimarTarjetaCarga 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
  max-width: 380px;
  width: 100%;
  text-align: center;
}
@media (max-width: 480px) {
  .EstiloContenedorCarga {
    padding: 24px 20px;
  }
}

@keyframes EstiloAnimarTarjetaCarga {
  0% {
    transform: scale(0.88) translateY(18px);
    opacity: 0;
  }
  65% {
    transform: scale(1.02) translateY(-2px);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.EstiloSpinnerCarga {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(46, 144, 172, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 20px;
}
.EstiloSpinnerCarga i {
  font-size: 24px;
  color: #2E90AC;
  animation: EstiloAnimarGirar 1s linear infinite;
}
.EstiloSpinnerCarga::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #2E90AC;
  border-right-color: rgba(46, 144, 172, 0.2);
  animation: EstiloAnimarGirar 0.85s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
}

@keyframes EstiloAnimarGirar {
  to {
    transform: rotate(360deg);
  }
}
.EstiloTextoCarga {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0E3D4D;
  letter-spacing: -0.01em;
  animation: EstiloAnimarPulso 1.4s infinite ease-in-out;
}

.EstiloTextoSecundarioCarga {
  font-size: 13px;
  color: #64748B;
  margin-top: 6px;
  line-height: 1.4;
}

@keyframes EstiloAnimarPulso {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
.EstiloPuntosAnimados::after {
  content: "";
  animation: EstiloAnimarPuntos 1.5s steps(3, end) infinite;
}

@keyframes EstiloAnimarPuntos {
  0% {
    content: "";
  }
  33% {
    content: ".";
  }
  66% {
    content: "..";
  }
  100% {
    content: "...";
  }
}
.EstiloBarraProgresoContenedor {
  width: 100%;
  margin-top: 16px;
}

.EstiloBarraProgreso {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  overflow: hidden;
  position: relative;
}

.EstiloBarraProgresoIndeterminada {
  position: absolute;
  height: 100%;
  width: 40%;
  background: #2E90AC;
  border-radius: 999px;
  animation: EstiloBarraIndeterminada 1.4s infinite ease-in-out;
}

@keyframes EstiloBarraIndeterminada {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}
.EstiloBarraProgresoRelleno {
  height: 100%;
  border-radius: 999px;
  background: #2E90AC;
  transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBarraProgresoRelleno.Éxito {
  background: #27AE60;
}
.EstiloBarraProgresoRelleno.Advertencia {
  background: #F59E0B;
}
.EstiloBarraProgresoRelleno.Error {
  background: #E74C3C;
}

.EstiloBarraProgresoEtiqueta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #64748B;
  margin-bottom: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .EstiloPanelProgreso,
  .EstiloContenedorCarga,
  .EstiloSpinnerCarga i,
  .EstiloSpinnerCarga::after,
  .EstiloTextoCarga,
  .EstiloPuntosAnimados::after,
  .EstiloBarraProgresoIndeterminada {
    animation: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloFondoModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(14, 61, 77, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.EstiloFondoModal.Activo {
  display: flex;
  animation: EstiloEntradaFondo 0.22s ease-out;
}
@media (max-width: 480px) {
  .EstiloFondoModal {
    padding: 12px;
    align-items: flex-end;
  }
}

@keyframes EstiloEntradaFondo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.EstiloCajaModal {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 40px 90px -25px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  animation: EstiloEntradaModal 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(46, 144, 172, 0.3) transparent;
}
.EstiloCajaModal::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.EstiloCajaModal::-webkit-scrollbar-track {
  background: transparent;
}
.EstiloCajaModal::-webkit-scrollbar-thumb {
  background: rgba(46, 144, 172, 0.3);
  border-radius: 8px;
}
.EstiloCajaModal::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 107, 133, 0.55);
}
@media (max-width: 480px) {
  .EstiloCajaModal {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    max-width: 100%;
    padding: 20px;
    max-height: 92vh;
    animation: EstiloEntradaModalMóvil 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
.EstiloCajaModal.EstiloTipoExito .EstiloModalInsignia {
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.15), rgba(39, 174, 96, 0.08));
  color: #27AE60;
}
.EstiloCajaModal.EstiloTipoExito .EstiloModalInsignia::after {
  border-color: #27AE60;
  opacity: 0.25;
}
.EstiloCajaModal.EstiloTipoExito .EstiloBtnModalPrincipal {
  background: linear-gradient(135deg, #27AE60, rgb(31.5295774648, 140.6704225352, 77.6112676056));
  color: #FFFFFF;
  box-shadow: 0 8px 20px -6px rgba(39, 174, 96, 0.5);
}
.EstiloCajaModal.EstiloTipoExito .EstiloBtnModalPrincipal:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(39, 174, 96, 0.6);
}
.EstiloCajaModal.EstiloTipoExito .EstiloBtnModalPrincipal:active {
  transform: translateY(0);
}
.EstiloCajaModal.EstiloTipoError .EstiloModalInsignia {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.15), rgba(231, 76, 60, 0.08));
  color: #E74C3C;
}
.EstiloCajaModal.EstiloTipoError .EstiloModalInsignia::after {
  border-color: #E74C3C;
  opacity: 0.25;
}
.EstiloCajaModal.EstiloTipoError .EstiloBtnModalPrincipal {
  background: linear-gradient(135deg, #E74C3C, rgb(222.7808219178, 45.698630137, 27.4191780822));
  color: #FFFFFF;
  box-shadow: 0 8px 20px -6px rgba(231, 76, 60, 0.5);
}
.EstiloCajaModal.EstiloTipoError .EstiloBtnModalPrincipal:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(231, 76, 60, 0.6);
}
.EstiloCajaModal.EstiloTipoError .EstiloBtnModalPrincipal:active {
  transform: translateY(0);
}
.EstiloCajaModal.EstiloTipoAdvertencia .EstiloModalInsignia {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.08));
  color: #F59E0B;
}
.EstiloCajaModal.EstiloTipoAdvertencia .EstiloModalInsignia::after {
  border-color: #F59E0B;
  opacity: 0.25;
}
.EstiloCajaModal.EstiloTipoAdvertencia .EstiloBtnModalPrincipal {
  background: linear-gradient(135deg, #F59E0B, rgb(206.7275590551, 133.0173228346, 8.4724409449));
  color: #FFFFFF;
  box-shadow: 0 8px 20px -6px rgba(245, 158, 11, 0.5);
}
.EstiloCajaModal.EstiloTipoAdvertencia .EstiloBtnModalPrincipal:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(245, 158, 11, 0.6);
}
.EstiloCajaModal.EstiloTipoAdvertencia .EstiloBtnModalPrincipal:active {
  transform: translateY(0);
}
.EstiloCajaModal.EstiloTipoInformacion .EstiloModalInsignia, .EstiloCajaModal.EstiloTipoConfirmacion .EstiloModalInsignia {
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.15), rgba(46, 144, 172, 0.08));
  color: #2E90AC;
}
.EstiloCajaModal.EstiloTipoInformacion .EstiloModalInsignia::after, .EstiloCajaModal.EstiloTipoConfirmacion .EstiloModalInsignia::after {
  border-color: #2E90AC;
  opacity: 0.25;
}
.EstiloCajaModal.EstiloTipoInformacion .EstiloBtnModalPrincipal, .EstiloCajaModal.EstiloTipoConfirmacion .EstiloBtnModalPrincipal {
  background: linear-gradient(135deg, #2E90AC, rgb(37.3908256881, 117.0495412844, 139.8091743119));
  color: #FFFFFF;
  box-shadow: 0 8px 20px -6px rgba(46, 144, 172, 0.5);
}
.EstiloCajaModal.EstiloTipoInformacion .EstiloBtnModalPrincipal:hover, .EstiloCajaModal.EstiloTipoConfirmacion .EstiloBtnModalPrincipal:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(46, 144, 172, 0.6);
}
.EstiloCajaModal.EstiloTipoInformacion .EstiloBtnModalPrincipal:active, .EstiloCajaModal.EstiloTipoConfirmacion .EstiloBtnModalPrincipal:active {
  transform: translateY(0);
}
.EstiloCajaModal.EstiloTipoPregunta .EstiloModalInsignia {
  background: linear-gradient(135deg, rgba(124, 92, 191, 0.15), rgba(124, 92, 191, 0.08));
  color: #7C5CBF;
}
.EstiloCajaModal.EstiloTipoPregunta .EstiloModalInsignia::after {
  border-color: #7C5CBF;
  opacity: 0.25;
}
.EstiloCajaModal.EstiloTipoPregunta .EstiloBtnModalPrincipal {
  background: linear-gradient(135deg, #7C5CBF, rgb(102.4281938326, 68.2854625551, 173.9145374449));
  color: #FFFFFF;
  box-shadow: 0 8px 20px -6px rgba(124, 92, 191, 0.5);
}
.EstiloCajaModal.EstiloTipoPregunta .EstiloBtnModalPrincipal:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(124, 92, 191, 0.6);
}
.EstiloCajaModal.EstiloTipoPregunta .EstiloBtnModalPrincipal:active {
  transform: translateY(0);
}

@keyframes EstiloEntradaModal {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes EstiloEntradaModalMóvil {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.EstiloModalEncabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.EstiloModalInsignia {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.EstiloModalInsignia::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid currentColor;
  opacity: 0;
  pointer-events: none;
}

.EstiloModalCerrar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.05);
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-shrink: 0;
}
.EstiloModalCerrar:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloModalCerrar:hover {
  background: rgba(231, 76, 60, 0.12);
  color: #E74C3C;
  transform: rotate(90deg);
}

.EstiloModalCuerpo {
  margin-bottom: 24px;
}

.EstiloModalTítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0E3D4D;
  margin: 0 0 8px;
  letter-spacing: -0.4px;
  line-height: 1.25;
}

.EstiloModalMensaje {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color: #64748B;
  line-height: 1.65;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.EstiloModalPie {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .EstiloModalPie {
    flex-direction: column-reverse;
  }
}

.EstiloBtnModal {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  white-space: nowrap;
}
.EstiloBtnModal:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
@media (max-width: 480px) {
  .EstiloBtnModal {
    width: 100%;
  }
}

.EstiloBtnModalPrincipal {
  background: #2E90AC;
  color: #FFFFFF;
  box-shadow: 0 8px 20px -6px rgba(46, 144, 172, 0.45);
}
.EstiloBtnModalPrincipal:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(46, 144, 172, 0.55);
}
.EstiloBtnModalPrincipal:active {
  transform: translateY(0);
}

.EstiloBtnModalSecundario {
  background: rgba(15, 23, 42, 0.06);
  color: #1E293B;
}
.EstiloBtnModalSecundario:hover {
  background: rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}
.EstiloBtnModalSecundario:active {
  transform: translateY(0);
}

.EstiloBtnModalPeligro {
  background: #E5484D;
  color: #FFFFFF;
  box-shadow: 0 8px 20px -6px rgba(229, 72, 77, 0.5);
}
.EstiloBtnModalPeligro:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(229, 72, 77, 0.6);
}
.EstiloBtnModalPeligro:active {
  transform: translateY(0);
}

/* =========================================
   TOASTS
   ========================================= */
.EstiloContenedorToast {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 700;
  pointer-events: none;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  max-width: calc(100vw - 32px);
}
.EstiloContenedorToast.ArribaDerecha {
  top: 20px;
  right: 20px;
  flex-direction: column;
}
.EstiloContenedorToast.AbajoDerecha {
  bottom: 20px;
  right: 20px;
  flex-direction: column-reverse;
}
@media (max-width: 576px) {
  .EstiloContenedorToast {
    left: 12px;
    right: 12px;
    max-width: calc(100vw - 24px);
    align-items: stretch;
  }
  .EstiloContenedorToast.ArribaDerecha {
    top: 12px;
  }
  .EstiloContenedorToast.AbajoDerecha {
    bottom: 12px;
  }
}

@keyframes EstiloEntradaToast {
  from {
    opacity: 0;
    transform: translateX(60px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.EstiloToast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 16px 44px -10px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);
  width: 380px;
  max-width: 100%;
  pointer-events: all;
  position: relative;
  overflow: hidden;
  animation: EstiloEntradaToast 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.EstiloToast.Cerrando {
  opacity: 0;
  transform: translateX(60px) scale(0.95);
}
.EstiloToast.EstiloTipoExito .EstiloToastInsignia {
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.15), rgba(39, 174, 96, 0.08));
  color: #27AE60;
}
.EstiloToast.EstiloTipoExito .EstiloToastBarraProgresoRelleno {
  background: linear-gradient(90deg, #27AE60, rgb(31.5295774648, 140.6704225352, 77.6112676056));
}
.EstiloToast.EstiloTipoError .EstiloToastInsignia {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.15), rgba(231, 76, 60, 0.08));
  color: #E74C3C;
}
.EstiloToast.EstiloTipoError .EstiloToastBarraProgresoRelleno {
  background: linear-gradient(90deg, #E74C3C, rgb(222.7808219178, 45.698630137, 27.4191780822));
}
.EstiloToast.EstiloTipoAdvertencia .EstiloToastInsignia {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.08));
  color: #F59E0B;
}
.EstiloToast.EstiloTipoAdvertencia .EstiloToastBarraProgresoRelleno {
  background: linear-gradient(90deg, #F59E0B, rgb(206.7275590551, 133.0173228346, 8.4724409449));
}
.EstiloToast.EstiloTipoInformacion .EstiloToastInsignia {
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.15), rgba(46, 144, 172, 0.08));
  color: #2E90AC;
}
.EstiloToast.EstiloTipoInformacion .EstiloToastBarraProgresoRelleno {
  background: linear-gradient(90deg, #2E90AC, rgb(37.3908256881, 117.0495412844, 139.8091743119));
}
@media (max-width: 480px) {
  .EstiloToast {
    width: 100%;
    padding: 12px;
  }
}

.EstiloToastInsignia {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.EstiloToastContenido {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}

.EstiloToastTítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0E3D4D;
  margin: 0 0 3px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.EstiloToastMensaje {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
  word-break: break-word;
}

.EstiloToastCerrar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #8A93A3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloToastCerrar:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1E293B;
}

.EstiloToastBarraProgreso {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.EstiloToastBarraProgresoRelleno {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  animation: EstiloProgresoToast linear forwards;
}

@keyframes EstiloProgresoToast {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .EstiloFondoModal.Activo,
  .EstiloCajaModal,
  .EstiloToast {
    animation: none !important;
    transition: none !important;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloContenedorToasts {
  position: fixed;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  z-index: 700;
  pointer-events: none;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  bottom: 24px;
  right: 24px;
}
.EstiloContenedorToasts.PosTopDerecha {
  top: 24px;
  bottom: auto;
  right: 24px;
  left: auto;
  flex-direction: column;
}
.EstiloContenedorToasts.PosTopIzquierda {
  top: 24px;
  bottom: auto;
  left: 24px;
  right: auto;
  flex-direction: column;
}
.EstiloContenedorToasts.PosTopCentro {
  top: 24px;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column;
}
.EstiloContenedorToasts.PosAbajoDerecha {
  bottom: 24px;
  top: auto;
  right: 24px;
  left: auto;
  flex-direction: column-reverse;
}
.EstiloContenedorToasts.PosAbajoIzquierda {
  bottom: 24px;
  top: auto;
  left: 24px;
  right: auto;
  flex-direction: column-reverse;
}
.EstiloContenedorToasts.PosAbajoCentro {
  bottom: 24px;
  top: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column-reverse;
}
@media (max-width: 576px) {
  .EstiloContenedorToasts {
    right: 12px;
    left: 12px;
    bottom: 16px;
    align-items: stretch;
  }
  .EstiloContenedorToasts.PosTopDerecha, .EstiloContenedorToasts.PosTopIzquierda, .EstiloContenedorToasts.PosTopCentro {
    top: 16px;
    bottom: auto;
  }
}

.EstiloToast {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.05);
  width: 340px;
  max-width: 100%;
  overflow: hidden;
  pointer-events: all;
  animation: EstiloAnimarToast 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
  transition: opacity 0.26s ease, transform 0.26s ease;
  position: relative;
}
.EstiloToast.Saliendo {
  opacity: 0;
  transform: translateX(48px) scale(0.95);
}
.EstiloToast.Éxito .EstiloToastAcento {
  background: linear-gradient(90deg, #27AE60, rgb(79.0394366197, 215.5605633803, 136.6816901408));
}
.EstiloToast.Éxito .EstiloToastÍcono {
  background: #EDFAF3;
  color: #27AE60;
}
.EstiloToast.Éxito .EstiloToastTítulo {
  color: #0D4A2F;
}
.EstiloToast.Éxito .EstiloToastBarra {
  background: #27AE60;
}
.EstiloToast.Error .EstiloToastAcento {
  background: linear-gradient(90deg, #E74C3C, rgb(239.9424657534, 142.695890411, 132.6575342466));
}
.EstiloToast.Error .EstiloToastÍcono {
  background: #FFF5F5;
  color: #E74C3C;
}
.EstiloToast.Error .EstiloToastTítulo {
  color: #5C0A0A;
}
.EstiloToast.Error .EstiloToastBarra {
  background: #E74C3C;
}
.EstiloToast.Advertencia .EstiloToastAcento {
  background: linear-gradient(90deg, #F59E0B, rgb(248.2125984252, 189.1622047244, 89.3874015748));
}
.EstiloToast.Advertencia .EstiloToastÍcono {
  background: #FFFBF0;
  color: #F59E0B;
}
.EstiloToast.Advertencia .EstiloToastTítulo {
  color: #7A3A00;
}
.EstiloToast.Advertencia .EstiloToastBarra {
  background: #F59E0B;
}
.EstiloToast.Información .EstiloToastAcento {
  background: linear-gradient(90deg, #2E90AC, rgb(88.9963302752, 183.5798165138, 210.6036697248));
}
.EstiloToast.Información .EstiloToastÍcono {
  background: #F0F9FC;
  color: #2E90AC;
}
.EstiloToast.Información .EstiloToastTítulo {
  color: #1A6B85;
}
.EstiloToast.Información .EstiloToastBarra {
  background: #2E90AC;
}
.EstiloToast.Peligro .EstiloToastAcento {
  background: linear-gradient(90deg, #E5484D, rgb(239.1511961722, 143.4488038278, 146.4966507177));
}
.EstiloToast.Peligro .EstiloToastÍcono {
  background: #FEE2E2;
  color: #E5484D;
}
.EstiloToast.Peligro .EstiloToastTítulo {
  color: #E5484D;
}
.EstiloToast.Peligro .EstiloToastBarra {
  background: #E5484D;
}

@keyframes EstiloAnimarToast {
  from {
    opacity: 0;
    transform: translateX(56px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.EstiloToastAcento {
  height: 4px;
  width: 100%;
}

.EstiloToastCuerpo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 16px;
}

.EstiloToastÍcono {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  margin-top: 1px;
}

.EstiloToastTexto {
  flex: 1;
  min-width: 0;
}

.EstiloToastTítulo {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
  word-break: break-word;
}

.EstiloToastMensaje {
  font-size: 14px;
  color: #64748B;
  line-height: 1.55;
  word-break: break-word;
}

.EstiloBtnCerrarToast {
  border: none;
  background: none;
  cursor: pointer;
  color: #8A93A3;
  font-size: 14px;
  padding: 4px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBtnCerrarToast:hover {
  color: #1E293B;
  background: rgba(0, 0, 0, 0.07);
}

.EstiloToastBarra {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  border-radius: 0 0 16px 16px;
  opacity: 0.45;
  transform-origin: left;
  animation: EstiloProgresarToast linear forwards;
}

@keyframes EstiloProgresarToast {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .EstiloToast,
  .EstiloToast.Saliendo {
    animation: none;
    transition: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
html,
body {
  height: 100%;
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  background: #F4F6F9;
  color: #1E293B;
  overflow-x: hidden;
}

.EstiloLayout {
  display: flex;
  padding-top: 64px;
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
}

.EstiloLayoutConSidebar {
  padding-left: 0;
}
@media (min-width: 993px) {
  .EstiloLayoutConSidebar {
    padding-left: 272px;
  }
}

.EstiloLayoutSinSidebar {
  padding-left: 0;
}

.EstiloOverlayMóvil {
  display: none;
  position: fixed;
  inset: 0;
  top: 64px;
  background: rgba(0, 0, 0, 0.52);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloOverlayMóvil.Activo {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 768px) {
  .EstiloOverlayMóvil {
    display: block;
  }
}

.EstiloContenidoPrincipal {
  flex: 1;
  min-width: 0;
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
}

.EstiloPáginaCompleta {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
  .EstiloOverlayMóvil {
    transition: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloGrid {
  display: grid;
  gap: 20px;
}
.EstiloGrid.Columnas2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.EstiloGrid.Columnas3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.EstiloGrid.Columnas4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.EstiloGrid.Columnas5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.EstiloGrid.Columnas6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 992px) {
  .EstiloGrid.Columnas4, .EstiloGrid.Columnas5, .EstiloGrid.Columnas6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .EstiloGrid.Columnas2, .EstiloGrid.Columnas3, .EstiloGrid.Columnas4, .EstiloGrid.Columnas5, .EstiloGrid.Columnas6 {
    grid-template-columns: 1fr;
  }
}
.EstiloGrid.GapPequeño {
  gap: 12px;
}
.EstiloGrid.GapGrande {
  gap: 32px;
}
.EstiloGrid.GapXL {
  gap: 48px;
}

.EstiloGridAutoFit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.EstiloGridAutoFit.AnchoMínimo220 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.EstiloGridAutoFit.AnchoMínimo280 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.EstiloGridAutoFit.AnchoMínimo320 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.EstiloGridAutoFill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.EstiloGaleríaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
@media (max-width: 480px) {
  .EstiloGaleríaGrid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
  }
}

.EstiloBentoGrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
@media (max-width: 992px) {
  .EstiloBentoGrid {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 768px) {
  .EstiloBentoGrid {
    grid-template-columns: 1fr;
  }
}
.EstiloBentoGrid > .BentoAncho12 {
  grid-column: span 12;
}
.EstiloBentoGrid > .BentoAncho8 {
  grid-column: span 8;
}
.EstiloBentoGrid > .BentoAncho6 {
  grid-column: span 6;
}
.EstiloBentoGrid > .BentoAncho4 {
  grid-column: span 4;
}
.EstiloBentoGrid > .BentoAncho3 {
  grid-column: span 3;
}
@media (max-width: 992px) {
  .EstiloBentoGrid > .BentoAncho8,
  .EstiloBentoGrid > .BentoAncho6 {
    grid-column: span 6;
  }
  .EstiloBentoGrid > .BentoAncho4,
  .EstiloBentoGrid > .BentoAncho3 {
    grid-column: span 3;
  }
}
@media (max-width: 768px) {
  .EstiloBentoGrid > .BentoAncho12,
  .EstiloBentoGrid > .BentoAncho8,
  .EstiloBentoGrid > .BentoAncho6,
  .EstiloBentoGrid > .BentoAncho4,
  .EstiloBentoGrid > .BentoAncho3 {
    grid-column: span 1;
  }
}

.EstiloGridDividido {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  .EstiloGridDividido {
    grid-template-columns: 1fr;
  }
}
.EstiloGridDividido.ConSidebar {
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 992px) {
  .EstiloGridDividido.ConSidebar {
    grid-template-columns: 1fr;
  }
}
.EstiloGridDividido.ConSidebarIzquierda {
  grid-template-columns: 1fr 2fr;
}
@media (max-width: 992px) {
  .EstiloGridDividido.ConSidebarIzquierda {
    grid-template-columns: 1fr;
  }
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.AreaContenido {
  margin-top: 64px;
  min-height: calc(100vh - 64px);
  background: #F4F6F9;
}

.DashboardContenedor {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 768px) {
  .DashboardContenedor {
    padding: 12px;
    gap: 12px;
  }
}

.DashboardFila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 992px) {
  .DashboardFila {
    grid-template-columns: 1fr;
  }
}

.EstiloContenido {
  margin-left: 272px;
  flex: 1 1 auto;
  min-width: 0;
  width: calc(100% - 272px);
  min-height: calc(100vh - 64px);
  padding: 28px 30px;
  overflow-x: hidden;
  box-sizing: border-box;
  transition: margin-left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: block;
}
.EstiloContenido.SinMenuLateral {
  margin-left: 0;
  width: 100%;
}
@media (max-width: 992px) {
  .EstiloContenido {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 20px 16px;
  }
}
.EstiloContenido > * {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.EstiloContenido > div {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#EstiloContenido .container,
#EstiloContenido .container-fluid,
#EstiloContenido .container-sm,
#EstiloContenido .container-md,
#EstiloContenido .container-lg,
#EstiloContenido .container-xl {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

#EstiloContenido .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-shrink: 0;
}

#EstiloContenido .row > [class*=col] {
  padding-left: calc(var(--bs-gutter-x, 1rem) * 0.5);
  padding-right: calc(var(--bs-gutter-x, 1rem) * 0.5);
  max-width: 100%;
  box-sizing: border-box;
}

#EstiloContenido .g-3 {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
  margin-top: 0 !important;
}

#EstiloContenido > div,
#EstiloContenido > div > div {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.EstiloContenidoFormulario {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #F4F6F9;
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloCabeceraPrincipal {
  background: linear-gradient(150deg, #0E3D4D 0%, #1A6B85 45%, #2E90AC 100%);
  position: relative;
  overflow: hidden;
  padding: 32px 0 48px;
}
.EstiloCabeceraPrincipal__OrbeFondo {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
  pointer-events: none;
}
@media (max-width: 480px) {
  .EstiloCabeceraPrincipal__OrbeFondo {
    width: 220px;
    height: 220px;
    top: -80px;
    right: -60px;
  }
}
.EstiloCabeceraPrincipal__OrbeFondoSecundario {
  position: absolute;
  bottom: -110px;
  left: -70px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 163, 33, 0.18), transparent 70%);
  pointer-events: none;
}
@media (max-width: 480px) {
  .EstiloCabeceraPrincipal__OrbeFondoSecundario {
    width: 180px;
    height: 180px;
  }
}
.EstiloCabeceraPrincipal__Trama {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, white, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, white, transparent 85%);
  pointer-events: none;
}

.EstiloContenedorCabecera {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.EstiloMarcaCabecera {
  display: flex;
  align-items: center;
}

.EstiloTextoCabecera {
  display: flex;
  flex-direction: column;
}

.EstiloEtiquetaCabecera {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.EstiloEtiquetaCabecera::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FEA321;
  flex-shrink: 0;
}

.EstiloNombreCabecera {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.2;
}
.EstiloNombreCabecera span {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  color: #FEA321;
  position: relative;
}
.EstiloNombreCabecera span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #FEA321, rgba(254, 163, 33, 0));
}

.EstiloLemaCabecera {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  margin: 4px 0 0;
}

.EstiloBotónAccesoSeguridad {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónAccesoSeguridad:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónAccesoSeguridad i {
  font-size: 13px;
}
.EstiloBotónAccesoSeguridad:hover {
  background: #FFFFFF;
  color: #1A6B85;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
}
@media (max-width: 480px) {
  .EstiloBotónAccesoSeguridad {
    height: 40px;
    padding: 0 16px;
    font-size: 12px;
  }
}

.EstiloPanelIdentidadInstitucional {
  margin-top: -34px;
  position: relative;
  z-index: 2;
}

.EstiloCajaIdentidadInstitucional {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  padding: 24px 32px;
}
@media (max-width: 768px) {
  .EstiloCajaIdentidadInstitucional {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
  }
}

.EstiloContenedorEscudoInstitucional {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #F0F9FC;
  border: 1px solid rgba(46, 144, 172, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.EstiloEscudoInstitucional {
  width: 68%;
  height: 68%;
  object-fit: contain;
}

.EstiloBloqueDatosInstitucionales {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.EstiloLemaInstitucional {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #C97D10;
  background: rgba(254, 163, 33, 0.12);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 8px;
}
.EstiloLemaInstitucional i {
  font-size: 10px;
}
@media (max-width: 768px) {
  .EstiloLemaInstitucional {
    align-self: center;
  }
}

.EstiloNombreInstituciónPrincipal {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  font-weight: 700;
  color: #0E3D4D;
  margin: 0 0 8px;
  line-height: 1.25;
}

.EstiloAspectoLegalInstitucional {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  line-height: 1.5;
  margin: 0 0 12px;
}

.EstiloContenedorDatosLegales {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 768px) {
  .EstiloContenedorDatosLegales {
    justify-content: center;
  }
}

.EstiloChipDatoLegal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  background: #F7F9FB;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  padding: 4px 12px;
}
.EstiloChipDatoLegal i {
  color: #2E90AC;
  font-size: 11px;
}

@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.TopbarPrincipal,
.EstiloBarra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  height: 64px;
  background: linear-gradient(90deg, #1A6B85 0%, #2E90AC 55%, #4EC3E4 100%);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  transition: left 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media (min-width: 993px) {
  .TopbarPrincipal.ConSidebar,
  .EstiloBarra.ConSidebar {
    left: 272px;
  }
}
@media (max-width: 576px) {
  .TopbarPrincipal,
  .EstiloBarra {
    padding: 0 12px;
    gap: 8px;
  }
}

.TopbarBtnHamburguesa,
.EstiloBtnHamburguesa {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #FFFFFF;
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.TopbarBtnHamburguesa:focus-visible,
.EstiloBtnHamburguesa:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: inherit;
}
.TopbarBtnHamburguesa:hover,
.EstiloBtnHamburguesa:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.4);
}
@media (min-width: 993px) {
  .TopbarBtnHamburguesa,
  .EstiloBtnHamburguesa {
    display: none;
  }
}

.TopbarMarca,
.EstiloBarraMarca {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.TopbarTextoMarca,
.EstiloBarraTextos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.TopbarNombreSistema,
.EstiloBarraTítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.3px;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.TopbarSubtítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.EstiloBarraPlataforma {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1;
}

.EstiloTopbarLogo,
.EstiloBarraLogo {
  height: 34px;
  width: auto;
  object-fit: contain;
  display: block;
}

.TopbarLadoDerecho,
.EstiloBarraDerecha {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}
@media (max-width: 576px) {
  .TopbarLadoDerecho,
  .EstiloBarraDerecha {
    gap: 8px;
  }
}

.TopbarReloj {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 6px 16px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.TopbarReloj i {
  font-size: 12px;
  opacity: 0.75;
}
@media (max-width: 768px) {
  .TopbarReloj {
    display: none;
  }
}

.TopbarUsuarioTrigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 5px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.TopbarUsuarioTrigger:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: inherit;
}
.TopbarUsuarioTrigger:hover {
  background: rgba(255, 255, 255, 0.26);
}
@media (max-width: 576px) {
  .TopbarUsuarioTrigger {
    padding: 5px;
  }
}

.TopbarAvatar,
.EstiloAvatarIniciales {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #07215E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.3px;
  user-select: none;
  flex-shrink: 0;
}

.TopbarUsuarioTextos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
  min-width: 0;
}
@media (max-width: 768px) {
  .TopbarUsuarioTextos {
    display: none;
  }
}

.TopbarUsuarioNombre {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.TopbarUsuarioIndicativo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}

.TopbarUsuarioChevron {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 768px) {
  .TopbarUsuarioChevron {
    display: none;
  }
}

.TopbarDropdownUsuario {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  width: 260px;
  max-width: calc(100vw - 24px);
  z-index: 100;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}
.TopbarDropdownUsuario.DropdownAbierto {
  display: block;
  animation: EstiloEntradaDropdown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes EstiloEntradaDropdown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.EstiloMenuUsuarioEncabezado {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #E2E8F0;
}
.EstiloMenuUsuarioEncabezado div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.EstiloMenuUsuarioAvatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 16px;
}

.EstiloMenuUsuarioNombre {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0E3D4D;
  overflow-wrap: anywhere;
}

.EstiloMenuUsuarioRolPill {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(46, 144, 172, 0.12);
  color: #2E90AC;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.EstiloMenuUsuarioOpcion {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px 16px;
  color: #1E293B !important;
  text-decoration: none !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloMenuUsuarioOpcion:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloMenuUsuarioOpcion i {
  width: 16px;
  color: #64748B;
  flex-shrink: 0;
}
.EstiloMenuUsuarioOpcion:hover {
  background: #F7F9FB;
}

.EstiloMenuUsuarioDivisor {
  height: 1px;
  background: #E2E8F0;
  margin: 4px 0;
}

.EstiloMenuUsuarioSalir {
  color: #E74C3C !important;
}
.EstiloMenuUsuarioSalir i {
  color: #E74C3C;
}

.EstiloBarraBadge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 576px) {
  .EstiloBarraBadge {
    display: none;
  }
}

.EstiloBarraPunto {
  color: #22C55E;
  font-size: 0.5rem;
  animation: AnimParpadeo 2.5s ease-in-out infinite;
}

@keyframes AnimParpadeo {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
@media (min-width: 993px) {
  .TopbarPrincipal.ConSidebar,
  .EstiloBarra.ConSidebar {
    left: 272px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .TopbarDropdownUsuario.DropdownAbierto,
  .EstiloBarraPunto {
    animation: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloSidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 272px;
  max-width: 88vw;
  height: 100vh;
  height: 100svh;
  background: #FFFFFF;
  border-right: 1px solid #E2E8F0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-property: transform, visibility;
  transition-duration: 0.28s, 0s;
}
.EstiloSidebar.Abierto {
  transform: translateX(0);
  visibility: visible;
}
@media (min-width: 993px) {
  .EstiloSidebar {
    transform: translateX(0);
    visibility: visible;
    transition: none;
  }
}

.EstiloSidebarCabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  background: linear-gradient(135deg, #1A6B85 0%, #2E90AC 100%);
  flex-shrink: 0;
}

.EstiloSidebarCabeceraIzquierda {
  display: flex;
  align-items: center;
  gap: 9px;
}

.EstiloSidebarTítuloMarca {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
}

.EstiloSidebarBtnCierre {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #FFFFFF;
  font-size: 12px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloSidebarBtnCierre:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloSidebarBtnCierre:hover {
  background: rgba(231, 76, 60, 0.5);
  border-color: rgba(231, 76, 60, 0.7);
}
@media (min-width: 993px) {
  .EstiloSidebarBtnCierre {
    display: none;
  }
}

.EstiloSidebarEtiquetaSección {
  padding: 12px 16px 6px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #8A93A3;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.EstiloSidebarEtiquetaSección::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E2E8F0;
}

.EstiloSidebarNavegación {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 0 8px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(46, 144, 172, 0.3) transparent;
}
.EstiloSidebarNavegación::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.EstiloSidebarNavegación::-webkit-scrollbar-track {
  background: transparent;
}
.EstiloSidebarNavegación::-webkit-scrollbar-thumb {
  background: rgba(46, 144, 172, 0.3);
  border-radius: 8px;
}
.EstiloSidebarNavegación::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 107, 133, 0.55);
}

.EstiloSidebarSección {
  padding: 0 10px;
}
.EstiloSidebarSección > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.EstiloSidebarÍtemMenú {
  list-style: none;
  margin: 1px 0;
}

.EstiloSidebarEnlaceMenú {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 12px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1E293B !important;
  text-decoration: none !important;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloSidebarEnlaceMenú:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloSidebarEnlaceMenú:hover {
  background: linear-gradient(90deg, rgba(46, 144, 172, 0.1), rgba(46, 144, 172, 0.04));
  color: #1A6B85 !important;
  border-left-color: #2E90AC;
}
.EstiloSidebarEnlaceMenú:hover .EstiloSidebarÍconoMenú {
  background: rgba(46, 144, 172, 0.15);
  border-color: rgba(46, 144, 172, 0.3);
  transform: scale(1.06);
}
.EstiloSidebarÍtemConSubmenú.ÍtemAbierto > .EstiloSidebarEnlaceMenú {
  background: linear-gradient(90deg, rgba(46, 144, 172, 0.12), rgba(46, 144, 172, 0.04));
  color: #1A6B85 !important;
  border-left-color: #2E90AC;
}
.EstiloSidebarÍtemConSubmenú.ÍtemAbierto > .EstiloSidebarEnlaceMenú .EstiloSidebarÍconoMenú {
  background: rgba(46, 144, 172, 0.18);
  border-color: rgba(46, 144, 172, 0.35);
}

.EstiloSidebarÍconoMenú {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: #64748B;
}
.EstiloSidebarÍconoMenú.Primario {
  color: #2E90AC;
}
.EstiloSidebarÍconoMenú img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  display: block;
}

.EstiloSidebarTextoMenú {
  flex: 1;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  transition: color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.EstiloSidebarChevron {
  font-size: 10px !important;
  color: #8A93A3;
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.EstiloSidebarÍtemConSubmenú.ÍtemAbierto > .EstiloSidebarEnlaceMenú .EstiloSidebarChevron,
.EstiloSidebarÍtemConSubmenú.ÍtemAbierto > .EstiloSidebarEnlaceNivel2 .EstiloSidebarChevron {
  transform: rotate(180deg);
  color: #2E90AC;
}
.EstiloSidebarÍtemConSubmenú.ÍtemAbierto > .EstiloSidebarSubmenú {
  max-height: 2400px;
  opacity: 1;
}
.EstiloSidebarÍtemConSubmenú.ÍtemAbierto > .EstiloSidebarSubmenúNivel2 {
  max-height: 800px;
  opacity: 1;
}

.EstiloSidebarSubmenú {
  list-style: none;
  padding: 4px 0 6px;
  margin: 0 0 0 22px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: #F7F9FB;
  border-radius: 0 0 8px 8px;
  border-left: 2px solid rgba(46, 144, 172, 0.2);
  transition: max-height 0.35s ease, opacity 0.28s ease;
}

.EstiloSidebarEnlaceSubmenú,
.EstiloSidebarEnlaceNivel2 {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #64748B !important;
  text-decoration: none !important;
  background: transparent;
  border: none;
  border-radius: 6px;
  margin: 2px 6px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  line-height: 1.4;
  cursor: pointer;
}
.EstiloSidebarEnlaceSubmenú::before,
.EstiloSidebarEnlaceNivel2::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8A93A3;
  flex-shrink: 0;
  transition: background-color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloSidebarEnlaceSubmenú span,
.EstiloSidebarEnlaceNivel2 span {
  flex: 1;
  white-space: normal;
  word-break: break-word;
}
.EstiloSidebarEnlaceSubmenú:hover,
.EstiloSidebarEnlaceNivel2:hover {
  background: rgba(46, 144, 172, 0.09);
  color: #1A6B85 !important;
  font-weight: 600;
}
.EstiloSidebarEnlaceSubmenú:hover::before,
.EstiloSidebarEnlaceNivel2:hover::before {
  background: #2E90AC;
  transform: scale(1.4);
}

.EstiloSidebarEnlaceNivel2 {
  width: calc(100% - 12px);
  text-align: left;
}
.EstiloSidebarEnlaceNivel2:hover {
  background: rgba(254, 163, 33, 0.08);
  color: #C97D10 !important;
}
.EstiloSidebarEnlaceNivel2:hover::before {
  background: #FEA321;
}
.EstiloSidebarÍtemConSubmenú.ÍtemAbierto > .EstiloSidebarEnlaceNivel2 {
  background: rgba(254, 163, 33, 0.07);
  color: #C97D10 !important;
}
.EstiloSidebarÍtemConSubmenú.ÍtemAbierto > .EstiloSidebarEnlaceNivel2::before {
  background: #FEA321;
}

.EstiloSidebarSubmenúNivel2 {
  list-style: none;
  padding: 3px 0 4px;
  margin: 0 0 0 28px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: #F7F9FB;
  border-radius: 0 0 6px 6px;
  border-left: 2px solid rgba(254, 163, 33, 0.25);
  transition: max-height 0.28s ease, opacity 0.2s ease;
}

.EstiloSidebarEnlaceNivel3 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #8A93A3 !important;
  text-decoration: none !important;
  border-radius: 6px;
  margin: 1px 4px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  line-height: 1.4;
}
.EstiloSidebarEnlaceNivel3::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8A93A3;
  flex-shrink: 0;
  transition: background-color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloSidebarEnlaceNivel3:hover {
  background: rgba(46, 144, 172, 0.08);
  color: #1A6B85 !important;
  font-weight: 500;
}
.EstiloSidebarEnlaceNivel3:hover::before {
  background: #2E90AC;
  transform: scale(1.5);
}

.EstiloSidebarDivisor {
  height: 1px;
  background: #E2E8F0;
  margin: 4px 10px;
  opacity: 0.5;
}

.EstiloSidebarPieSalir {
  padding: 10px 10px 14px;
  border-top: 1px solid #E2E8F0;
  flex-shrink: 0;
  background: #FFFFFF;
}

.EstiloSidebarBtnSalir {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(231, 76, 60, 0.05);
  border: 1px solid rgba(231, 76, 60, 0.14);
  color: #E74C3C !important;
  text-decoration: none !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: 100%;
  cursor: pointer;
}
.EstiloSidebarBtnSalir:focus-visible {
  outline: 2px solid #E74C3C;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloSidebarBtnSalir .EstiloSidebarÍconoMenú {
  background: rgba(231, 76, 60, 0.08);
  border-color: rgba(231, 76, 60, 0.18);
}
.EstiloSidebarBtnSalir:hover {
  background: rgba(231, 76, 60, 0.12);
  border-color: rgba(231, 76, 60, 0.3);
  transform: translateX(3px);
}
.EstiloSidebarBtnSalir:hover .EstiloSidebarÍconoMenú {
  background: rgba(231, 76, 60, 0.16);
}

.EstiloSidebarFondo {
  position: fixed;
  inset: 0;
  background: rgba(7, 33, 94, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: calc(300 - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.EstiloSidebarFondo.Visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0s;
}
@media (min-width: 993px) {
  .EstiloSidebarFondo {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .EstiloSidebar,
  .EstiloSidebarFondo,
  .EstiloSidebarSubmenú,
  .EstiloSidebarSubmenúNivel2 {
    transition: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloPiePáginaCampus,
.EstiloPiePágina {
  margin-top: 48px;
  background: #0E3D4D;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.EstiloPiePáginaCampus::before,
.EstiloPiePágina::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  pointer-events: none;
}
.EstiloPiePáginaCampus::after,
.EstiloPiePágina::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46, 144, 172, 0.4) 40%, rgba(254, 163, 33, 0.4) 70%, transparent);
}

.EstiloPiePáginaInterior {
  position: relative;
  z-index: 1;
  padding: 40px 0 20px;
}

.EstiloPiePáginaFilaSuperior {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
@media (max-width: 768px) {
  .EstiloPiePáginaFilaSuperior {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
  }
}

.EstiloMarcaPie {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  flex-shrink: 0;
}
.EstiloMarcaPie:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: inherit;
}
@media (max-width: 768px) {
  .EstiloMarcaPie {
    justify-content: center;
  }
}

.EstiloContenedorLogoPie {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.EstiloContenedorLogoPie img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.EstiloTextosLogoPie {
  display: flex;
  flex-direction: column;
}

.EstiloNombreSistemaPie {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.2;
}

.EstiloVersiónPie {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.36);
  margin-top: 2px;
}

.EstiloColumnasEnlacesPie {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
@media (max-width: 768px) {
  .EstiloColumnasEnlacesPie {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
}

.EstiloColumnaEnlacePie {
  flex: 1;
  min-width: 0;
}

.EstiloTítuloColumnaEnlacePie {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.32);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-bottom: 12px;
}

.EstiloListaEnlacesPie {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 768px) {
  .EstiloListaEnlacesPie {
    align-items: center;
  }
}

.EstiloEnlacePie {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.48);
  text-decoration: none !important;
  transition: color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloEnlacePie:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloEnlacePie:hover {
  color: #4EC3E4;
}

.EstiloPiePáginaFilaInferior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 20px;
}
@media (max-width: 768px) {
  .EstiloPiePáginaFilaInferior {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }
}

.EstiloTextoCopyrightPie {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.26);
  margin: 0;
}

.EstiloCréditoDesarrolloPie {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.24);
}
.EstiloCréditoDesarrolloPie i {
  font-size: 9px;
  color: rgba(46, 144, 172, 0.5);
}

.EstiloPieDerecho {
  text-align: center;
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #64748B;
  opacity: 0.85;
}

.EstiloPieLogin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
  text-align: center;
}

.EstiloPieCiudad,
.EstiloPieDerechos {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #8A93A3;
  letter-spacing: 0.3px;
}

.TarjetaPie {
  padding: 12px 20px;
  background: #F7F9FB;
  border-top: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-radius: 0 0 22px 22px;
}

.TarjetaPieCiudad {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
}

.TarjetaPieDerechos {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #8A93A3;
}

.MarcaSistema {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-wrap: wrap;
  justify-content: center;
  animation: EntradaMarca 0.7s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.MarcaSistemaNombre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}
.MarcaSistemaNombre i {
  color: #2E90AC;
  font-size: 15px;
}

.MarcaSeparador {
  color: rgba(255, 255, 255, 0.22);
  font-size: 13px;
}

.MarcaFecha,
.MarcaReferencia {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
}

@keyframes EntradaMarca {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .MarcaSistema {
    animation: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloBotónIrArriba {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: #2E90AC;
  color: #FFFFFF;
  box-shadow: 0 12px 40px rgba(46, 144, 172, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.85);
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 200;
  cursor: pointer;
}
.EstiloBotónIrArriba:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónIrArriba.EstiloVisible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.EstiloBotónIrArriba:hover {
  background: #1A6B85;
  transform: translateY(-2px);
}
@media (max-width: 576px) {
  .EstiloBotónIrArriba {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    width: 46px;
    height: 46px;
  }
}

.EstiloBotónIrArribaConProgreso {
  position: relative;
  background: #FFFFFF;
  color: #2E90AC;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
}
.EstiloBotónIrArribaConProgreso svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.EstiloBotónIrArribaConProgreso circle {
  fill: none;
  stroke: #2E90AC;
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}
.EstiloBotónIrArribaConProgreso i {
  position: relative;
  z-index: 1;
}

.EstiloBotónWhatsAppFlotante {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: calc(24px + env(safe-area-inset-left, 0px));
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding-right: 0;
  border-radius: 999px;
  background: #25D366;
  color: #FFFFFF;
  text-decoration: none !important;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
  overflow: hidden;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 200;
  border: none;
  cursor: pointer;
}
.EstiloBotónWhatsAppFlotante:focus-visible {
  outline: 2px solid #25D366;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónWhatsAppFlotante i {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.EstiloBotónWhatsAppFlotante:hover {
  background: #1EBE5D;
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55);
  padding-right: 16px;
}
.EstiloBotónWhatsAppFlotante:hover .EstiloTextoWhatsAppFlotante {
  max-width: 180px;
  opacity: 1;
  margin-left: 2px;
}
@media (max-width: 576px) {
  .EstiloBotónWhatsAppFlotante {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: calc(16px + env(safe-area-inset-left, 0px));
    height: 46px;
  }
  .EstiloBotónWhatsAppFlotante i {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }
}

.EstiloBotónWhatsAppFlotanteConPulso {
  animation: EstiloPulsoWhatsApp 2.4s ease-in-out infinite;
}

@keyframes EstiloPulsoWhatsApp {
  0%, 100% {
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
  }
  50% {
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.7), 0 0 0 10px rgba(37, 211, 102, 0.12);
  }
}
.EstiloTextoWhatsAppFlotante {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  transition: max-width 0.28s ease, opacity 0.28s ease, margin-left 0.28s ease;
}

.EstiloBotónWhatsAppBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #E74C3C;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid #FFFFFF;
}

.EstiloBotónFijoInferior {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  z-index: 200;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

@media (hover: none) {
  .EstiloBotónIrArriba:hover {
    transform: none;
  }
  .EstiloBotónWhatsAppFlotante:hover {
    background: #25D366;
    padding-right: 0;
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
  }
  .EstiloBotónWhatsAppFlotante:hover .EstiloTextoWhatsAppFlotante {
    max-width: 0;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .EstiloBotónIrArriba,
  .EstiloBotónWhatsAppFlotante,
  .EstiloBotónWhatsAppFlotanteConPulso {
    animation: none;
    transition: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* =========================================
   FONDO
   ========================================= */
.EstiloFondoBienvenida {
  background: linear-gradient(145deg, #0E3D4D 0%, #1A6B85 45%, #2E90AC 100%);
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
@media (max-width: 480px) {
  .EstiloFondoBienvenida {
    padding: 16px 12px;
  }
}
.EstiloFondoBienvenida::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(254, 163, 33, 0.18) 0%, transparent 70%);
  top: -200px;
  right: -200px;
  pointer-events: none;
}
@media (max-width: 576px) {
  .EstiloFondoBienvenida::before {
    width: 380px;
    height: 380px;
    top: -100px;
    right: -100px;
  }
}
.EstiloFondoBienvenida::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1.2px, transparent 1.2px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* =========================================
   PARTÍCULAS FLOTANTES
   ========================================= */
.EstiloBienvenidaPartículas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.EstiloBienvenidaPartícula {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.4;
}
.EstiloBienvenidaPartícula--1 {
  width: 200px;
  height: 200px;
  background: rgba(254, 163, 33, 0.3);
  top: 10%;
  left: 5%;
  animation: EstiloBienvenidaFlotar1 22s ease-in-out infinite;
}
.EstiloBienvenidaPartícula--2 {
  width: 140px;
  height: 140px;
  background: rgba(78, 195, 228, 0.28);
  top: 70%;
  left: 15%;
  animation: EstiloBienvenidaFlotar2 26s ease-in-out infinite;
}
.EstiloBienvenidaPartícula--3 {
  width: 180px;
  height: 180px;
  background: rgba(254, 163, 33, 0.22);
  top: 25%;
  right: 8%;
  animation: EstiloBienvenidaFlotar3 30s ease-in-out infinite;
}
.EstiloBienvenidaPartícula--4 {
  width: 120px;
  height: 120px;
  background: rgba(78, 195, 228, 0.25);
  bottom: 15%;
  right: 20%;
  animation: EstiloBienvenidaFlotar1 28s ease-in-out infinite reverse;
}
.EstiloBienvenidaPartícula--5 {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.12);
  top: 50%;
  left: 50%;
  animation: EstiloBienvenidaFlotar2 24s ease-in-out infinite;
}
.EstiloBienvenidaPartícula--6 {
  width: 160px;
  height: 160px;
  background: rgba(254, 163, 33, 0.18);
  bottom: 5%;
  left: 40%;
  animation: EstiloBienvenidaFlotar3 32s ease-in-out infinite;
}
@media (max-width: 480px) {
  .EstiloBienvenidaPartícula {
    filter: blur(30px);
    opacity: 0.3;
  }
  .EstiloBienvenidaPartícula--1, .EstiloBienvenidaPartícula--3, .EstiloBienvenidaPartícula--6 {
    width: 120px;
    height: 120px;
  }
}

@keyframes EstiloBienvenidaFlotar1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, 30px) scale(1.15);
  }
}
@keyframes EstiloBienvenidaFlotar2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-50px, 40px) scale(1.1);
  }
}
@keyframes EstiloBienvenidaFlotar3 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -50px) scale(1.08);
  }
}
/* =========================================
   ESCENA — FLUJO NATURAL SIN CORTES
   ========================================= */
.EstiloBienvenidaEscena {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 768px) {
  .EstiloBienvenidaEscena {
    gap: 20px;
  }
}
@media (max-width: 480px) {
  .EstiloBienvenidaEscena {
    gap: 16px;
  }
}

/* =========================================
   MARCA SUPERIOR
   ========================================= */
.EstiloBienvenidaSuperior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.EstiloBienvenidaSuperiorMarca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.EstiloBienvenidaSuperiorLogo {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.EstiloBienvenidaSuperiorLogo img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
@media (max-width: 480px) {
  .EstiloBienvenidaSuperiorLogo {
    width: 44px;
    height: 44px;
  }
}

.EstiloBienvenidaSuperiorTextos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.EstiloBienvenidaSuperiorNombre {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.15;
  letter-spacing: -0.2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.EstiloBienvenidaSuperiorNombre span {
  color: #FEA321;
}

.EstiloBienvenidaSuperiorLema {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.3;
}
@media (max-width: 480px) {
  .EstiloBienvenidaSuperiorLema {
    display: none;
  }
}

.EstiloBienvenidaSuperiorBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}
@media (max-width: 576px) {
  .EstiloBienvenidaSuperiorBadge {
    padding: 7px 14px;
    font-size: 10.5px;
  }
}

.EstiloBienvenidaSuperiorPunto {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  flex-shrink: 0;
}
.EstiloBienvenidaSuperiorPunto::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #22C55E;
  opacity: 0.5;
  animation: EstiloBienvenidaPulso 2s ease-out infinite;
}

@keyframes EstiloBienvenidaPulso {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}
/* =========================================
   CONTENIDO CENTRAL
   ========================================= */
.EstiloBienvenidaCentral {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 20px 12px;
}
@media (max-width: 480px) {
  .EstiloBienvenidaCentral {
    gap: 12px;
    padding: 12px 0;
  }
}

/* =========================================
   ESCUDO
   ========================================= */
.EstiloBienvenidaEscudoAnillo {
  position: relative;
  width: clamp(110px, 16vw, 144px);
  height: clamp(110px, 16vw, 144px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 8px;
}
.EstiloBienvenidaEscudoAnillo::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px dashed rgba(254, 163, 33, 0.5);
  animation: EstiloBienvenidaGirarAnillo 28s linear infinite;
  will-change: transform;
}
.EstiloBienvenidaEscudoAnillo::after {
  content: "";
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  border: 1px solid rgba(78, 195, 228, 0.3);
  animation: EstiloBienvenidaPulsoAnillo 3.5s ease-in-out infinite;
  will-change: transform, opacity;
}
@media (max-width: 480px) {
  .EstiloBienvenidaEscudoAnillo::after {
    display: none;
  }
}

@keyframes EstiloBienvenidaGirarAnillo {
  to {
    transform: rotate(360deg);
  }
}
@keyframes EstiloBienvenidaPulsoAnillo {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.1;
  }
}
.EstiloBienvenidaEscudoInterior {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.EstiloBienvenidaEscudoImagen {
  width: 76%;
  height: 76%;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================
   NOMBRE INSTITUCIÓN
   ========================================= */
.EstiloBienvenidaNombreInstitución {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.4rem, 4.2vw, 2.2rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin: 0;
  max-width: 820px;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
  text-wrap: balance;
}

/* =========================================
   RESOLUCIÓN
   ========================================= */
.EstiloBienvenidaResolucion {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(12px, 1.5vw, 13px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
  margin: 0;
  max-width: 620px;
  text-wrap: balance;
}

/* =========================================
   DATOS LEGALES
   ========================================= */
.EstiloBienvenidaDatosLegales {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.EstiloBienvenidaDatoLegal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.EstiloBienvenidaDatoLegal i {
  font-size: 11px;
  color: #FEA321;
  flex-shrink: 0;
}

.EstiloBienvenidaDatoLegalEtiqueta {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.EstiloBienvenidaDatoLegalValor {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

/* =========================================
   LEMA
   ========================================= */
.EstiloBienvenidaLemaInstitucional {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 680px;
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

.EstiloBienvenidaLemaLinea {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  max-width: 80px;
}

.EstiloBienvenidaTextoLema {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(13px, 1.7vw, 15px);
  font-weight: 500;
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
  margin: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  text-align: center;
}
.EstiloBienvenidaTextoLema i {
  color: #FEA321;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 4px;
}

/* =========================================
   BOTÓN PRINCIPAL
   ========================================= */
.EstiloBienvenidaBotónIngresar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: clamp(56px, 10vw, 64px);
  padding: 0 clamp(24px, 5vw, 48px);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(15px, 2vw, 16px);
  font-weight: 800;
  background: #FFFFFF;
  color: #1A6B85 !important;
  border: none;
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.3px;
  width: 100%;
  max-width: 420px;
  margin-top: 16px;
}
.EstiloBienvenidaBotónIngresar:focus-visible {
  outline: 2px solid #FEA321;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBienvenidaBotónIngresar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(46, 144, 172, 0.15), transparent);
  transform: translateX(-100%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.EstiloBienvenidaBotónIngresar:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.25);
  color: #0E3D4D !important;
}
.EstiloBienvenidaBotónIngresar:hover::before {
  transform: translateX(100%);
}
.EstiloBienvenidaBotónIngresar:hover .EstiloBienvenidaBotónIngresarFlecha {
  transform: translateX(6px);
}
.EstiloBienvenidaBotónIngresar:active {
  transform: translateY(-1px);
}
.EstiloBienvenidaBotónIngresar > i:first-child {
  font-size: clamp(18px, 2.5vw, 22px);
  color: #2E90AC;
  flex-shrink: 0;
}
.EstiloBienvenidaBotónIngresar span {
  white-space: nowrap;
}
@media (max-width: 480px) {
  .EstiloBienvenidaBotónIngresar {
    padding: 0 24px;
  }
}
@media (hover: none) {
  .EstiloBienvenidaBotónIngresar:hover {
    transform: none;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.2);
  }
  .EstiloBienvenidaBotónIngresar:hover .EstiloBienvenidaBotónIngresarFlecha {
    transform: none;
  }
}

.EstiloBienvenidaBotónIngresarFlecha {
  transition: transform 0.28s ease;
  font-size: 15px;
  color: #2E90AC;
  flex-shrink: 0;
}

/* =========================================
   PIE
   ========================================= */
.EstiloBienvenidaPie {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.EstiloBienvenidaPieTexto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.3px;
  text-align: center;
}
.EstiloBienvenidaPieTexto i {
  font-size: 10px;
  color: rgba(78, 195, 228, 0.7);
}
@media (max-width: 480px) {
  .EstiloBienvenidaPieTexto {
    font-size: 10px;
    flex-direction: column;
    gap: 4px;
  }
}

/* =========================================
   REDUCED MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  .EstiloBienvenidaEscudoAnillo::before,
  .EstiloBienvenidaEscudoAnillo::after,
  .EstiloBienvenidaSuperiorPunto::after,
  .EstiloBienvenidaPartícula {
    animation: none;
  }
  .EstiloBienvenidaBotónIngresar {
    transition: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloCuerpoCampus {
  background: #F4F6F9;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  color: #1E293B;
  overflow-x: hidden;
}

.EstiloCampusContenedor {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 32px) 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 768px) {
  .EstiloCampusContenedor {
    padding: 20px 16px 32px;
    gap: 20px;
  }
}
@media (max-width: 480px) {
  .EstiloCampusContenedor {
    padding: 16px 12px 32px;
    gap: 16px;
  }
}

.EstiloPuntoVivo {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #27AE60;
  margin-right: 4px;
  animation: EstiloPulsoVivo 2s ease-in-out infinite;
}

@keyframes EstiloPulsoVivo {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.3);
  }
}
.EstiloFondoModalProgreso {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: #0E3D4D;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.EstiloContenedorAnimaciónCarga {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.EstiloAroLoaderCampus {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.EstiloAroLoaderCampus::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: #FEA321;
  border-right-color: rgba(254, 163, 33, 0.35);
  animation: EstiloCampusGirar 0.9s linear infinite;
}
.EstiloAroLoaderCampus::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid rgba(78, 195, 228, 0.25);
  animation: EstiloCampusPulsoAro 2.4s ease-in-out infinite;
}

@keyframes EstiloCampusGirar {
  to {
    transform: rotate(360deg);
  }
}
@keyframes EstiloCampusPulsoAro {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.1;
  }
}
.EstiloImagenLoaderCampus {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
  animation: EstiloCampusPulsoLogo 1.6s ease-in-out infinite;
}

@keyframes EstiloCampusPulsoLogo {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.7;
  }
}
.EstiloTextoCargando {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.3px;
}

.EstiloPuntosAnimadosCarga::after {
  content: "";
  animation: EstiloCampusPuntos 1.4s steps(4, end) infinite;
}

@keyframes EstiloCampusPuntos {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "";
  }
}
.EstiloAnimaciónEntrada {
  animation: EstiloCampusEntrar 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.EstiloAnimaciónEntradaRetardada {
  animation: EstiloCampusEntrar 0.5s 0.12s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes EstiloCampusEntrar {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================
   HERO
   ========================================= */
.EstiloHeroCampus {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #0E3D4D 0%, #1A6B85 55%, #2E90AC 100%);
  color: #FFFFFF;
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 20px 50px rgba(14, 61, 77, 0.25);
  isolation: isolate;
}
@media (max-width: 480px) {
  .EstiloHeroCampus {
    padding: 20px 16px;
    border-radius: 16px;
  }
}
.EstiloHeroCampus__Fondo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.EstiloHeroCampus__Orbe {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.EstiloHeroCampus__Orbe--1 {
  width: 480px;
  height: 480px;
  background: rgba(254, 163, 33, 0.22);
  top: -200px;
  right: -140px;
}
.EstiloHeroCampus__Orbe--2 {
  width: 360px;
  height: 360px;
  background: rgba(78, 195, 228, 0.2);
  bottom: -180px;
  left: -100px;
}
.EstiloHeroCampus__Trama {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, white, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, white, transparent 85%);
}

.EstiloHeroCampusContenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .EstiloHeroCampusContenido {
    flex-direction: column;
    align-items: flex-start;
  }
}

.EstiloHeroCampusIzquierda {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 24px);
  flex: 1;
  min-width: 0;
}
@media (max-width: 576px) {
  .EstiloHeroCampusIzquierda {
    flex-direction: column;
    align-items: flex-start;
  }
}

.EstiloHeroCampusEscudo {
  width: clamp(96px, 12vw, 128px);
  height: clamp(96px, 12vw, 128px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3), inset 0 0 0 4px rgba(255, 255, 255, 0.3);
  position: relative;
}
.EstiloHeroCampusEscudo::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px dashed rgba(254, 163, 33, 0.5);
  animation: EstiloCampusGirar 30s linear infinite;
}
.EstiloHeroCampusEscudo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 480px) {
  .EstiloHeroCampusEscudo {
    width: 84px;
    height: 84px;
    padding: 8px;
  }
}

.EstiloHeroCampusTextos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

.EstiloHeroCampusSaludo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.EstiloHeroCampusSaludo i {
  font-size: 11px;
  color: #FEA321;
}
@media (max-width: 480px) {
  .EstiloHeroCampusSaludo {
    font-size: 10px;
    padding: 5px 12px;
  }
}

.EstiloHeroCampusTítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.7px;
  text-wrap: balance;
}

.EstiloHeroCampusDerecha {
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .EstiloHeroCampusDerecha {
    width: 100%;
  }
}

.EstiloHeroCampusAño {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 32px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width: 200px;
}
@media (max-width: 768px) {
  .EstiloHeroCampusAño {
    min-width: 0;
    text-align: left;
    padding: 16px 20px;
  }
}

.EstiloHeroCampusAñoEtiqueta {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

.EstiloHeroCampusAñoValor {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  color: #FEA321;
  line-height: 1;
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
}

.EstiloHeroCampusChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
@media (max-width: 480px) {
  .EstiloHeroCampusChips {
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
  }
}

.EstiloHeroCampusChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.EstiloHeroCampusChip i {
  font-size: 10px;
  color: #FEA321;
}
.EstiloHeroCampusChip--Acento {
  background: rgba(254, 163, 33, 0.15);
  border-color: rgba(254, 163, 33, 0.35);
  color: #FEA321;
  font-weight: 600;
}
.EstiloHeroCampusChip--Acento i {
  color: #FEA321;
}
@media (max-width: 480px) {
  .EstiloHeroCampusChip {
    padding: 6px 12px;
    font-size: 11px;
  }
}

.EstiloHeroCampusLema {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid #FEA321;
  border-radius: 0 8px 8px 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  font-style: italic;
  line-height: 1.55;
  width: 100%;
}
.EstiloHeroCampusLema i {
  color: #FEA321;
  font-size: 13px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .EstiloHeroCampusLema {
    font-size: 12px;
    padding: 12px 16px;
  }
}

/* =========================================
   STATS
   ========================================= */
.EstiloCampusGridStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 640px) {
  .EstiloCampusGridStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .EstiloCampusGridStats {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

.EstiloTarjetaEstadística {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.EstiloTarjetaEstadística::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.EstiloTarjetaEstadística:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
}
@media (hover: none) {
  .EstiloTarjetaEstadística:hover {
    transform: none;
  }
}
.EstiloTarjetaEstadística--Azul::before {
  background: #2E90AC;
}
.EstiloTarjetaEstadística--Naranja::before {
  background: #FEA321;
}
.EstiloTarjetaEstadística--Verde::before {
  background: #27AE60;
}
.EstiloTarjetaEstadística--Morado::before {
  background: #7C5CBF;
}

.EstiloÍconoEstadística {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.EstiloÍconoEstadística--Azul {
  background: #F0F9FC;
  color: #2E90AC;
}
.EstiloÍconoEstadística--Naranja {
  background: #FFF4E5;
  color: #FEA321;
}
.EstiloÍconoEstadística--Verde {
  background: #EDFAF3;
  color: #27AE60;
}
.EstiloÍconoEstadística--Morado {
  background: #F4F0FF;
  color: #7C5CBF;
}

.EstiloContenidoEstadística {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.EstiloNúmeroEstadística {
  display: block;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0E3D4D;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.EstiloEtiquetaEstadística {
  display: block;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  line-height: 1.3;
}

/* =========================================
   SECCIÓN GENÉRICA
   ========================================= */
.EstiloCampusSección {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (max-width: 480px) {
  .EstiloCampusSección {
    padding: 16px;
  }
}

.EstiloCampusSecciónEncabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F1F5F9;
  flex-wrap: wrap;
}

.EstiloCampusSecciónTítuloGrupo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.EstiloCampusSecciónÍcono {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}
.EstiloCampusSecciónÍcono--Azul {
  background: #F0F9FC;
  color: #2E90AC;
}
.EstiloCampusSecciónÍcono--Naranja {
  background: #FFF4E5;
  color: #FEA321;
}
.EstiloCampusSecciónÍcono--Verde {
  background: #EDFAF3;
  color: #27AE60;
}
.EstiloCampusSecciónÍcono--Morado {
  background: #F4F0FF;
  color: #7C5CBF;
}

.EstiloCampusSecciónEtiqueta {
  display: block;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: #8A93A3;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 3px;
}

.EstiloCampusSecciónTítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  font-weight: 800;
  color: #0E3D4D;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.EstiloCampusSecciónBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(39, 174, 96, 0.1);
  border: 1px solid rgba(39, 174, 96, 0.22);
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #0D4A2F;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.EstiloCampusSecciónBadge i {
  font-size: 6px;
  animation: EstiloPulsoVivo 2s ease-in-out infinite;
}
.EstiloCampusSecciónBadge--Morado {
  background: #F4F0FF;
  border-color: rgba(124, 92, 191, 0.22);
  color: #3C2585;
}
.EstiloCampusSecciónBadge--Morado i {
  font-size: 12px;
  animation: none;
}

/* =========================================
   FILA CAMPUS (8/4)
   ========================================= */
.EstiloFilaCampus {
  align-items: flex-start;
}

.EstiloFilaCampus > [class*=col-] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 768px) {
  .EstiloFilaCampus > [class*=col-] {
    gap: 16px;
  }
}

/* =========================================
   NOTICIAS
   ========================================= */
.EstiloTarjetaNoticia {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloTarjetaNoticia:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloTarjetaNoticia:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
  border-color: rgba(46, 144, 172, 0.3);
}
.EstiloTarjetaNoticia:hover .EstiloImagenNoticia {
  transform: scale(1.08);
}
.EstiloTarjetaNoticia:hover .EstiloÍconoNoticiaOverlay {
  opacity: 1;
  transform: translate(0, 0);
}
.EstiloTarjetaNoticia:hover .EstiloPieNoticiaLeer {
  opacity: 1;
  transform: translateX(0);
}
@media (hover: none) {
  .EstiloTarjetaNoticia:hover {
    transform: none;
  }
}

.EstiloCajaImagenNoticia {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #F1F5F9;
  flex-shrink: 0;
}

.EstiloImagenNoticia {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) cubic-bezier(0.25, 0.8, 0.25, 1);
}

.EstiloOverlayImagenNoticia {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 61, 77, 0.75) 0%, rgba(14, 61, 77, 0.15) 45%, transparent 70%);
}

.EstiloEtiquetaCategoríaNoticia {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.95);
  color: #1A6B85;
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.EstiloEtiquetaCategoríaNoticia i {
  font-size: 9px;
  color: #2E90AC;
}

.EstiloÍconoNoticiaOverlay {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #1A6B85;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  opacity: 0;
  transform: translate(6px, -6px);
  transition: opacity 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@media (hover: none) {
  .EstiloÍconoNoticiaOverlay {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.EstiloContenidoInternoNoticia {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px;
  gap: 8px;
  min-width: 0;
}

.EstiloTítuloNoticia {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0E3D4D;
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.EstiloResumenNoticia {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.EstiloPieNoticia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #8A93A3;
}

.EstiloPieNoticiaFecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.EstiloPieNoticiaFecha i {
  color: #2E90AC;
}

.EstiloPieNoticiaLeer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #2E90AC;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.EstiloPieNoticiaLeer i {
  font-size: 10px;
}
@media (hover: none) {
  .EstiloPieNoticiaLeer {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =========================================
   EVENTOS
   ========================================= */
.EstiloListaEventos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.EstiloÍtemEvento {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: #F7F9FB;
  border: 1px solid transparent;
  min-width: 0;
}
.EstiloÍtemEvento:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloÍtemEvento:hover {
  background: #FFFFFF;
  border-color: rgba(46, 144, 172, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.EstiloÍtemEvento:hover .EstiloCajaFechaEvento {
  transform: scale(1.06) rotate(-3deg);
}
.EstiloÍtemEvento:hover .EstiloFlechaEvento {
  opacity: 1;
  transform: translateX(0);
  color: #2E90AC;
}
.EstiloÍtemEvento:hover .EstiloTítuloEvento {
  color: #2E90AC;
}
@media (hover: none) {
  .EstiloÍtemEvento:hover .EstiloCajaFechaEvento {
    transform: none;
  }
}

.EstiloCajaFechaEvento {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.EstiloCajaFechaAzul {
  background: linear-gradient(135deg, #F0F9FC, rgba(46, 144, 172, 0.08));
  color: #1A6B85;
}

.EstiloCajaFechaAmarilla {
  background: linear-gradient(135deg, #FFF4E5, rgba(254, 163, 33, 0.12));
  color: #C97D10;
}

.EstiloCajaFechaHoy {
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(46, 144, 172, 0.18), 0 8px 20px rgba(46, 144, 172, 0.3);
}

.EstiloDíaEvento {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.EstiloMesEvento {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 3px;
}

.EstiloEtiquetaEventoHoy {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-block;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 9px;
  font-weight: 800;
  color: #FFFFFF;
  background: #FEA321;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 8px rgba(254, 163, 33, 0.4);
  white-space: nowrap;
}

.EstiloDetalleEvento {
  flex: 1;
  min-width: 0;
}

.EstiloTítuloEvento {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0E3D4D;
  margin: 0 0 4px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.EstiloMetaEvento {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.EstiloMetaEvento span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
}
.EstiloMetaEvento i {
  color: #2E90AC;
  font-size: 10px;
}

.EstiloFlechaEvento {
  flex-shrink: 0;
  font-size: 13px;
  color: #8A93A3;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media (hover: none) {
  .EstiloFlechaEvento {
    opacity: 0.6;
    transform: translateX(0);
  }
}

/* =========================================
   GALERÍA — CARRUSEL
   ========================================= */
.EstiloCarruselGaleria {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  background: #F1F5F9;
}
.EstiloCarruselGaleria .EstiloCarruselInner {
  border-radius: 12px;
  overflow: hidden;
}
.EstiloCarruselGaleria .carousel-item {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.EstiloSlideGaleria {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  cursor: pointer;
  background: #F1F5F9;
}
@media (max-width: 768px) {
  .EstiloSlideGaleria {
    aspect-ratio: 4/3;
  }
}
.EstiloSlideGaleria:hover .EstiloImagenCarrusel {
  transform: scale(1.04);
}
.EstiloSlideGaleria:hover .EstiloBotónExpandirSlide {
  opacity: 1;
  transform: scale(1);
}
@media (hover: none) {
  .EstiloSlideGaleria .EstiloBotónExpandirSlide {
    opacity: 1;
    transform: scale(1);
  }
}

.EstiloImagenCarrusel {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) cubic-bezier(0.25, 0.8, 0.25, 1);
}

.EstiloOverlaySlideGaleria {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 61, 77, 0.85) 0%, rgba(14, 61, 77, 0.15) 40%, transparent 65%);
  pointer-events: none;
}

.EstiloBotónExpandirSlide {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #1A6B85;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 480px) {
  .EstiloBotónExpandirSlide {
    width: 36px;
    height: 36px;
    top: 12px;
    right: 12px;
  }
}

.EstiloPieSlideGaleria {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  z-index: 2;
  pointer-events: none;
}
.EstiloPieSlideGaleria i {
  color: #FEA321;
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloPieSlideGaleria span {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 480px) {
  .EstiloPieSlideGaleria {
    padding: 12px;
  }
  .EstiloPieSlideGaleria span {
    font-size: 12px;
  }
}

.EstiloControlCarrusel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1A6B85;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.2s ease, transform 0.2s ease;
  z-index: 3;
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.EstiloControlCarrusel:hover {
  background: #FFFFFF;
  transform: translateY(-50%) scale(1.08);
  color: #2E90AC;
}
.EstiloControlCarrusel.EstiloControlCarruselPrevio {
  left: 16px;
}
.EstiloControlCarrusel.EstiloControlCarruselSiguiente {
  right: 16px;
}
.EstiloControlCarrusel .EstiloControlCarruselÍcono {
  font-size: 16px;
  line-height: 1;
}
@media (max-width: 480px) {
  .EstiloControlCarrusel {
    width: 38px;
    height: 38px;
  }
  .EstiloControlCarrusel.EstiloControlCarruselPrevio {
    left: 8px;
  }
  .EstiloControlCarrusel.EstiloControlCarruselSiguiente {
    right: 8px;
  }
}

.EstiloCarruselGaleria:hover .EstiloControlCarrusel {
  opacity: 1;
}

@media (hover: none) {
  .EstiloControlCarrusel {
    opacity: 1;
  }
}
/* Miniaturas */
.EstiloMiniaturasGaleria {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  overflow-x: auto;
  padding: 6px 2px 8px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.EstiloMiniaturasGaleria::-webkit-scrollbar {
  height: 4px;
}
.EstiloMiniaturasGaleria::-webkit-scrollbar-track {
  background: transparent;
}
.EstiloMiniaturasGaleria::-webkit-scrollbar-thumb {
  background: rgba(46, 144, 172, 0.3);
  border-radius: 999px;
}

.EstiloMiniaturaGaleria {
  flex: 0 0 auto;
  width: 90px;
  height: 66px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  background: #F1F5F9;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0.5;
  outline: none;
}
.EstiloMiniaturaGaleria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.EstiloMiniaturaGaleria:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.EstiloMiniaturaGaleria:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
}
.EstiloMiniaturaGaleria.active {
  opacity: 1;
  border-color: #FEA321;
  box-shadow: 0 4px 12px rgba(254, 163, 33, 0.4);
  transform: translateY(-2px);
}
.EstiloMiniaturaGaleria.active::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  pointer-events: none;
}
@media (max-width: 480px) {
  .EstiloMiniaturaGaleria {
    width: 72px;
    height: 54px;
  }
}

/* =========================================
   HONOR
   ========================================= */
.EstiloGrillaCuadroHonor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
@media (max-width: 480px) {
  .EstiloGrillaCuadroHonor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.EstiloTarjetaEstudianteHonor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(165deg, #FFFFFF 0%, #FFFFFF 55%, rgba(254, 163, 33, 0.04) 100%);
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px 16px 20px;
  overflow: hidden;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  min-width: 0;
  isolation: isolate;
}
.EstiloTarjetaEstudianteHonor::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
.EstiloTarjetaEstudianteHonor:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(46, 144, 172, 0.18), 0 8px 20px -8px rgba(0, 0, 0, 0.08);
  border-color: rgba(254, 163, 33, 0.4);
}
.EstiloTarjetaEstudianteHonor:hover .EstiloTarjetaHonor__CintaSuperior {
  transform: scaleX(1);
}
.EstiloTarjetaEstudianteHonor:hover .EstiloAnilloAvatarHonor {
  transform: rotate(180deg);
}
.EstiloTarjetaEstudianteHonor:hover .EstiloFotoEstudianteHonor {
  transform: scale(1.06);
}
.EstiloTarjetaEstudianteHonor:hover .EstiloInsigniaEstudianteHonor {
  transform: scale(1.15) rotate(-8deg);
  background: linear-gradient(135deg, #FEA321, #C97D10);
}
.EstiloTarjetaEstudianteHonor:hover .EstiloLogroComillaHonor {
  color: #FEA321;
  transform: scale(1.2);
}
@media (hover: none) {
  .EstiloTarjetaEstudianteHonor:hover {
    transform: none;
    box-shadow: none;
  }
  .EstiloTarjetaEstudianteHonor:hover .EstiloFotoEstudianteHonor {
    transform: none;
  }
  .EstiloTarjetaEstudianteHonor:hover .EstiloInsigniaEstudianteHonor {
    transform: none;
  }
}

.EstiloTarjetaHonor__BrilloFondo {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 163, 33, 0.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
  filter: blur(20px);
}

.EstiloTarjetaHonor__CintaSuperior {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FEA321, #4EC3E4, #FEA321);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.EstiloContenedorAvatarHonor {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.EstiloAnilloAvatarHonor {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px dashed rgba(254, 163, 33, 0.55);
  animation: EstiloCampusGirar 24s linear infinite;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.EstiloAnilloAvatarHonor--Interno {
  inset: -12px;
  border-style: solid;
  border-color: rgba(78, 195, 228, 0.25);
  border-width: 1px;
  animation-direction: reverse;
  animation-duration: 32s;
}

.EstiloFotoEstudianteHonor {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 4px solid #FFFFFF;
  box-shadow: 0 6px 20px rgba(46, 144, 172, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: 1;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) cubic-bezier(0.25, 0.8, 0.25, 1);
}

.EstiloInsigniaEstudianteHonor {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FEA321, #C97D10);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 12px rgba(254, 163, 33, 0.45);
  z-index: 2;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloInsigniaEstudianteHonor i {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.EstiloCuerpoTarjetaHonor {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.EstiloNombreEstudianteHonor {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #0E3D4D;
  margin: 0 0 8px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.EstiloEtiquetaCursoHonor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #1A6B85;
  background: #F0F9FC;
  border: 1px solid rgba(46, 144, 172, 0.18);
  border-radius: 999px;
  padding: 5px 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}
.EstiloEtiquetaCursoHonor i {
  font-size: 10px;
  color: #2E90AC;
}

.EstiloDivisorHonor {
  width: 40px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(254, 163, 33, 0.6), transparent);
  margin-bottom: 12px;
}

.EstiloLogroEstudianteHonor {
  position: relative;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
  padding: 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: italic;
}
.EstiloLogroEstudianteHonor .EstiloLogroComillaHonor {
  display: block;
  font-size: 12px;
  color: rgba(254, 163, 33, 0.5);
  margin-bottom: 4px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =========================================
   DOCUMENTOS
   ========================================= */
.EstiloListaDocumentos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.EstiloCajaÍtemDocumento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #F7F9FB;
  border: 1px solid #F1F5F9;
  border-radius: 8px;
  padding: 12px 14px 12px 12px;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  min-width: 0;
}
.EstiloCajaÍtemDocumento:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloCajaÍtemDocumento:hover {
  background: #F0F9FC;
  border-color: rgba(46, 144, 172, 0.3);
  transform: translateX(3px);
}
.EstiloCajaÍtemDocumento:hover .EstiloÍconoDescargaDocumento {
  background: #2E90AC;
  color: #FFFFFF;
  border-color: #2E90AC;
}
@media (hover: none) {
  .EstiloCajaÍtemDocumento:hover {
    transform: none;
  }
}

.EstiloTextoNombreDocumento {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1E293B;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.EstiloÍconoChipDocumento {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}

.EstiloÍconoDescargaDocumento {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =========================================
   FAQ
   ========================================= */
.EstiloCampusSecciónFAQ .EstiloAcordionPreguntas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.EstiloÍtemPregunta {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
  transition: box-shadow 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloÍtemPregunta:hover {
  border-color: rgba(46, 144, 172, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.EstiloÍtemPregunta:has(.accordion-button:not(.collapsed)) {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
  border-color: rgba(46, 144, 172, 0.35);
}
.EstiloÍtemPregunta--Azul:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(46, 144, 172, 0.4);
}
.EstiloÍtemPregunta--Naranja:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(254, 163, 33, 0.4);
}
.EstiloÍtemPregunta--Verde:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(39, 174, 96, 0.4);
}
.EstiloÍtemPregunta--Morado:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(124, 92, 191, 0.4);
}
.EstiloÍtemPregunta--Rojo:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(229, 72, 77, 0.4);
}

.EstiloBotónPregunta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #0E3D4D;
  background: transparent;
  padding: 12px 14px;
  box-shadow: none !important;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónPregunta::after {
  display: none;
}
.EstiloBotónPregunta:hover {
  background: #F7F9FB;
}
.EstiloBotónPregunta:focus {
  box-shadow: none;
  border-color: transparent;
}
.EstiloBotónPregunta:not(.collapsed) {
  background: #F7F9FB;
  color: #1A6B85;
}

.EstiloBotónPreguntaÍcono {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  background: #F7F9FB;
  color: #64748B;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloÍtemPregunta--Azul .EstiloBotónPreguntaÍcono {
  background: #F0F9FC;
  color: #2E90AC;
}
.EstiloÍtemPregunta--Naranja .EstiloBotónPreguntaÍcono {
  background: #FFF4E5;
  color: #FEA321;
}
.EstiloÍtemPregunta--Verde .EstiloBotónPreguntaÍcono {
  background: #EDFAF3;
  color: #27AE60;
}
.EstiloÍtemPregunta--Morado .EstiloBotónPreguntaÍcono {
  background: #F4F0FF;
  color: #7C5CBF;
}
.EstiloÍtemPregunta--Rojo .EstiloBotónPreguntaÍcono {
  background: #FEE2E2;
  color: #E5484D;
}

.EstiloBotónPreguntaTexto {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
  padding-right: 8px;
}

.EstiloBotónPreguntaChevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #64748B;
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónPregunta:not(.collapsed) .EstiloBotónPreguntaChevron {
  transform: rotate(180deg);
  background: #2E90AC;
  border-color: #2E90AC;
  color: #FFFFFF;
}

.EstiloCuerpoPregunta {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.6;
  padding: 10px 20px 14px 64px;
  background: #F7F9FB;
  border-top: 1px solid #F1F5F9;
}
@media (max-width: 480px) {
  .EstiloCuerpoPregunta {
    padding: 10px 16px 14px 16px;
  }
}

/* =========================================
   SERVICIOS
   ========================================= */
.EstiloListaServicios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.EstiloTarjetaServicioInstitucion {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
  padding: 12px 14px;
  background: #F7F9FB;
  border: 1px solid #F1F5F9;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloTarjetaServicioInstitucion:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloTarjetaServicioInstitucion:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
  background: #FFFFFF;
  border-color: rgba(46, 144, 172, 0.2);
}
.EstiloTarjetaServicioInstitucion:hover .EstiloContenedorÍconoServicio {
  transform: scale(1.1) rotate(-4deg);
}
.EstiloTarjetaServicioInstitucion:hover .EstiloFlechaServicioIndicador {
  transform: translateX(4px);
  opacity: 1;
  color: #2E90AC;
}
@media (hover: none) {
  .EstiloTarjetaServicioInstitucion:hover {
    transform: none;
    box-shadow: none;
    background: #F7F9FB;
  }
  .EstiloTarjetaServicioInstitucion .EstiloContenedorÍconoServicio {
    transform: none;
  }
}

.EstiloContenedorÍconoServicio {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  color: #FFFFFF;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloContenedorÍconoServicio--Primario {
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  box-shadow: 0 4px 12px rgba(46, 144, 172, 0.28);
}
.EstiloContenedorÍconoServicio--Exito {
  background: linear-gradient(135deg, #27AE60, #1A7A3C);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.28);
}
.EstiloContenedorÍconoServicio--Info {
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  box-shadow: 0 4px 12px rgba(46, 144, 172, 0.28);
}
.EstiloContenedorÍconoServicio--Advertencia {
  background: linear-gradient(135deg, #FEA321, #C97D10);
  box-shadow: 0 4px 12px rgba(254, 163, 33, 0.28);
}
.EstiloContenedorÍconoServicio--Peligro {
  background: linear-gradient(135deg, #E5484D, #E74C3C);
  box-shadow: 0 4px 12px rgba(229, 72, 77, 0.28);
}

.EstiloInfoServicio {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.EstiloTítuloServicio {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0E3D4D;
}

.EstiloSubtítuloServicio {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  margin-top: 2px;
}

.EstiloFlechaServicioIndicador {
  align-self: center;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  color: #8A93A3;
  opacity: 0.5;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =========================================
   CONTACTO
   ========================================= */
.EstiloListaContacto {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.EstiloÍtemContacto {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #F7F9FB;
  border: 1px solid #F1F5F9;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  min-width: 0;
}
.EstiloÍtemContacto:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloÍtemContacto:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
  background: #FFFFFF;
  border-color: rgba(46, 144, 172, 0.2);
}
.EstiloÍtemContacto:hover .EstiloÍconoContacto {
  transform: scale(1.08) rotate(-4deg);
}
.EstiloÍtemContacto:hover .EstiloFlechaContacto {
  opacity: 1;
  transform: translateX(3px);
  color: #2E90AC;
}
@media (hover: none) {
  .EstiloÍtemContacto:hover {
    transform: none;
    box-shadow: none;
  }
  .EstiloÍtemContacto .EstiloÍconoContacto {
    transform: none;
  }
}
.EstiloÍtemContacto:nth-child(1) .EstiloÍconoContacto {
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  color: #FFFFFF;
}
.EstiloÍtemContacto:nth-child(2) .EstiloÍconoContacto {
  background: linear-gradient(135deg, #27AE60, #1A7A3C);
  color: #FFFFFF;
}
.EstiloÍtemContacto:nth-child(3) .EstiloÍconoContacto {
  background: linear-gradient(135deg, #FEA321, #C97D10);
  color: #FFFFFF;
}

.EstiloÍconoContacto {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.EstiloTextoContacto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.EstiloTítuloContacto {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0E3D4D;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.EstiloSubtítuloContacto {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  margin-top: 2px;
}

.EstiloFlechaContacto {
  flex-shrink: 0;
  font-size: 12px;
  color: #8A93A3;
  opacity: 0.45;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =========================================
   ENLACES
   ========================================= */
.EstiloTarjetaEnlaceInterés {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #0E3D4D;
  text-decoration: none !important;
  border: 1px solid #F1F5F9;
  background: #F7F9FB;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloTarjetaEnlaceInterés:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloTarjetaEnlaceInterés:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
  background: #FFFFFF;
  border-color: rgba(46, 144, 172, 0.25);
}
.EstiloTarjetaEnlaceInterés:hover .EstiloÍconoEnlaceInterés {
  transform: scale(1.1) rotate(-6deg);
}
@media (hover: none) {
  .EstiloTarjetaEnlaceInterés:hover {
    transform: none;
    box-shadow: none;
  }
}

.row:has(.EstiloTarjetaEnlaceInterés) > div:nth-child(3n+1) .EstiloÍconoEnlaceInterés {
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  color: #FFFFFF;
}
.row:has(.EstiloTarjetaEnlaceInterés) > div:nth-child(3n+2) .EstiloÍconoEnlaceInterés {
  background: linear-gradient(135deg, #27AE60, #1A7A3C);
  color: #FFFFFF;
}
.row:has(.EstiloTarjetaEnlaceInterés) > div:nth-child(3n) .EstiloÍconoEnlaceInterés {
  background: linear-gradient(135deg, #FEA321, #C97D10);
  color: #FFFFFF;
}

.EstiloÍconoEnlaceInterés {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.EstiloTextoEnlaceInterés {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* =========================================
   ESTADOS VACÍOS
   ========================================= */
.EstiloEstadoVacíoContenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 24px 16px;
  color: #8A93A3;
  justify-content: center;
  width: 100%;
  min-height: 200px;
}

.EstiloEstadoVacíoCompacto {
  min-height: 180px;
  padding: 20px 16px;
}

.EstiloEstadoVacíoÍcono {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #F7F9FB;
  border: 2px dashed #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #8A93A3;
  margin-bottom: 4px;
}

.EstiloEstadoVacíoTítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #0E3D4D;
  margin: 0;
  line-height: 1.3;
}

.EstiloEstadoVacíoContenido p {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}

.EstiloEstadoVacíoFullWidth {
  width: 100%;
  grid-column: 1/-1;
}

/* =========================================
   BOTÓN IR ARRIBA
   ========================================= */
.EstiloBotónIrArriba {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(46, 144, 172, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(24px) scale(0.8);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1), background 0.25s ease, box-shadow 0.25s ease;
  z-index: 9999;
  outline: none;
}
.EstiloBotónIrArriba.EstiloVisible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.EstiloBotónIrArriba:hover {
  background: linear-gradient(135deg, #1A6B85, #0E3D4D);
  box-shadow: 0 14px 40px rgba(46, 144, 172, 0.55), 0 6px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px) scale(1.08);
}
.EstiloBotónIrArriba:active {
  transform: translateY(-2px) scale(0.96);
}
.EstiloBotónIrArriba:focus-visible {
  outline: 3px solid #FEA321;
  outline-offset: 3px;
}
.EstiloBotónIrArriba i {
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}
@media (max-width: 576px) {
  .EstiloBotónIrArriba {
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
  }
  .EstiloBotónIrArriba i {
    font-size: 16px;
  }
}
@media (hover: none) {
  .EstiloBotónIrArriba:hover {
    transform: translateY(0) scale(1);
  }
}

.EstiloBotónWhatsAppFlotante,
.EstiloTextoWhatsAppFlotante {
  display: none !important;
}

/* =========================================
   MODALES
   ========================================= */
.EstiloModalContenidoNoticia {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.18), 0 4px 20px rgba(0, 0, 0, 0.08);
}

.EstiloCabeceraHeroModalNoticia {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  flex-shrink: 0;
}
@media (max-width: 576px) {
  .EstiloCabeceraHeroModalNoticia {
    height: 200px;
  }
}

.EstiloImagenCabeceraModalNoticia {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.EstiloDegradadoHeroModalNoticia {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 61, 77, 0.95) 0%, rgba(14, 61, 77, 0.55) 42%, rgba(14, 61, 77, 0.05) 80%);
}

.EstiloBotónCerrarHeroModalNoticia {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  color: #1E293B;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónCerrarHeroModalNoticia:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónCerrarHeroModalNoticia:hover {
  background: #FFFFFF;
  color: #E5484D;
  transform: rotate(90deg);
}
@media (hover: none) {
  .EstiloBotónCerrarHeroModalNoticia:hover {
    transform: none;
  }
}

.EstiloTextoHeroModalNoticia {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 24px 24px 20px;
}
@media (max-width: 576px) {
  .EstiloTextoHeroModalNoticia {
    padding: 16px;
  }
}

.EstiloEtiquetaHeroModalNoticia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 5px 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.EstiloEtiquetaHeroModalNoticia i {
  font-size: 9px;
}

.EstiloCuerpoModalNoticia {
  padding: 24px;
}
@media (max-width: 576px) {
  .EstiloCuerpoModalNoticia {
    padding: 20px;
  }
}

.EstiloFechaModalNoticia {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.EstiloTítuloModalNoticia {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.25rem, 2.8vw, 1.55rem);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 10px;
  line-height: 1.25;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.EstiloTextoModalNoticia {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #1E293B;
  line-height: 1.75;
}
.EstiloTextoModalNoticia h1, .EstiloTextoModalNoticia h2, .EstiloTextoModalNoticia h3, .EstiloTextoModalNoticia h4, .EstiloTextoModalNoticia h5, .EstiloTextoModalNoticia h6 {
  color: #0E3D4D;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 20px 0 10px;
  line-height: 1.35;
}
.EstiloTextoModalNoticia h1:first-child, .EstiloTextoModalNoticia h2:first-child, .EstiloTextoModalNoticia h3:first-child, .EstiloTextoModalNoticia h4:first-child, .EstiloTextoModalNoticia h5:first-child, .EstiloTextoModalNoticia h6:first-child {
  margin-top: 0;
}
.EstiloTextoModalNoticia p {
  margin: 0 0 14px;
}
.EstiloTextoModalNoticia a {
  color: #2E90AC;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.EstiloTextoModalNoticia a:hover {
  color: #1A6B85;
}
.EstiloTextoModalNoticia strong, .EstiloTextoModalNoticia b {
  color: #0E3D4D;
  font-weight: 600;
}
.EstiloTextoModalNoticia ul, .EstiloTextoModalNoticia ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.EstiloTextoModalNoticia ul li, .EstiloTextoModalNoticia ol li {
  margin-bottom: 6px;
}
.EstiloTextoModalNoticia blockquote {
  margin: 0 0 14px;
  padding: 12px 20px;
  border-left: 3px solid #2E90AC;
  background: #F0F9FC;
  border-radius: 0 8px 8px 0;
  color: #0E3D4D;
  font-style: italic;
}
.EstiloTextoModalNoticia img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 6px 0 14px;
  display: block;
}
.EstiloTextoModalNoticia .ql-align-center {
  text-align: center;
}
.EstiloTextoModalNoticia .ql-align-right {
  text-align: right;
}
.EstiloTextoModalNoticia .ql-align-justify {
  text-align: justify;
}

.EstiloDialogVisorFoto {
  max-width: 720px;
}

.EstiloContenidoVisorFoto {
  background: transparent;
  border: none;
}

.EstiloContenedorImagenVisor {
  position: relative;
}

.EstiloBotónCerrarVisor {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  border: none;
  color: #1E293B;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
}
.EstiloBotónCerrarVisor:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}

.EstiloImagenVisorFoto {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 12px;
}

.EstiloPieFotoVisor {
  text-align: center;
  padding-top: 12px;
}
.EstiloPieFotoVisor p {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0;
}

.EstiloModalContenidoEvento {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.18), 0 4px 20px rgba(0, 0, 0, 0.08);
}

.EstiloCabeceraModalEvento {
  position: relative;
  background: linear-gradient(135deg, #0E3D4D 0%, #1A6B85 45%, #2E90AC 100%);
  padding: 24px 20px 20px;
  text-align: center;
}

.EstiloÍconoModalEvento {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.EstiloInsigniaEstado {
  display: inline-block;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.EstiloInsigniaEstadoHoy {
  background: #FEA321;
  color: #FFFFFF;
}

.EstiloInsigniaEstadoPróximo {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.EstiloTítuloModalEvento {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.3;
}

.EstiloCuerpoModalEvento {
  padding: 20px;
}

.EstiloFilaDetalleModalEvento {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #F1F5F9;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1E293B;
}
.EstiloFilaDetalleModalEvento i {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #F0F9FC;
  color: #2E90AC;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloFilaDetalleModalEvento:last-of-type {
  border-bottom: none;
}

.EstiloDescripciónModalEvento {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #1E293B;
  line-height: 1.7;
  margin: 16px 0 0;
}

/* =========================================
   FOOTER
   ========================================= */
.EstiloPiePáginaCampus {
  margin-top: 32px;
  background: #0E3D4D;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.EstiloPiePáginaCampus::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  pointer-events: none;
}
.EstiloPiePáginaCampus::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46, 144, 172, 0.4) 40%, rgba(254, 163, 33, 0.4) 70%, transparent);
}

.EstiloPiePáginaInterior {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px clamp(16px, 3vw, 32px) 20px;
}
@media (max-width: 768px) {
  .EstiloPiePáginaInterior {
    padding: 24px clamp(16px, 3vw, 24px) 20px;
  }
}
@media (max-width: 480px) {
  .EstiloPiePáginaInterior {
    padding: 24px 16px 20px;
  }
}

.EstiloPiePáginaFilaSuperior {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 992px) {
  .EstiloPiePáginaFilaSuperior {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}
@media (max-width: 768px) {
  .EstiloPiePáginaFilaSuperior {
    gap: 20px;
  }
}

.EstiloMarcaPieColumna {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.EstiloMarcaPie {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  align-self: flex-start;
}
.EstiloMarcaPie:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: inherit;
}

.EstiloContenedorLogoPie {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.EstiloContenedorLogoPie img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.EstiloTextosLogoPie {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.EstiloNombreSistemaPie {
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.2;
}

.EstiloVersiónPie {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
}

.EstiloDescripciónPie {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  max-width: 380px;
}

.EstiloColumnasEnlacesPie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 768px) {
  .EstiloColumnasEnlacesPie {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

.EstiloColumnaEnlacePie {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.EstiloTítuloColumnaEnlacePie {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.EstiloTítuloColumnaEnlacePie i {
  font-size: 10px;
  color: #4EC3E4;
}

.EstiloListaEnlacesPie {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.EstiloEnlacePie {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none !important;
  transition: color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: inline-block;
}
.EstiloEnlacePie:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloEnlacePie:hover {
  color: #4EC3E4;
  transform: translateX(2px);
}

.EstiloPiePáginaFilaInferior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
}
@media (max-width: 480px) {
  .EstiloPiePáginaFilaInferior {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

.EstiloTextoCopyrightPie {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
  line-height: 1.5;
}

.EstiloCréditoDesarrolloPie {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.32);
}
.EstiloCréditoDesarrolloPie i {
  font-size: 10px;
  color: rgba(46, 144, 172, 0.6);
}

/* =========================================
   REDUCED MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  .EstiloHeroCampusEscudo::after,
  .EstiloTarjetaEstadística,
  .EstiloTarjetaNoticia,
  .EstiloTarjetaEstudianteHonor,
  .EstiloCajaÍtemDocumento,
  .EstiloÍtemEvento,
  .EstiloTarjetaServicioInstitucion,
  .EstiloTarjetaEnlaceInterés,
  .EstiloÍtemContacto,
  .EstiloAroLoaderCampus::before,
  .EstiloAroLoaderCampus::after,
  .EstiloImagenLoaderCampus,
  .EstiloPuntoVivo,
  .EstiloCampusSecciónBadge i,
  .EstiloBotónIrArriba,
  .EstiloAnilloAvatarHonor,
  .EstiloTarjetaHonor__CintaSuperior,
  .EstiloControlCarrusel {
    animation: none !important;
    transition: none !important;
  }
  .EstiloAnimaciónEntrada,
  .EstiloAnimaciónEntradaRetardada {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloCuerpoSeguridadSistema {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 28px;
  background: #f4f6f9;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1E293B;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.EstiloContenedorSeguridadSistema {
  width: 100%;
  max-width: 1400px;
}

.EstiloTarjetaSeguridadSistema {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  animation: EstiloEntrarSeguridad 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes EstiloEntrarSeguridad {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.EstiloPanelInstitucionalSeguridad {
  background: linear-gradient(155deg, #0E3D4D 0%, #14566A 55%, #1B6B82 100%);
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  min-width: 0;
}
.EstiloPanelInstitucionalSeguridad::before {
  content: "";
  position: absolute;
  top: -140px;
  left: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 163, 33, 0.2), transparent 70%);
  pointer-events: none;
}
.EstiloPanelInstitucionalSeguridad::after {
  content: "";
  position: absolute;
  bottom: -160px;
  right: -160px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78, 195, 228, 0.16), transparent 70%);
  pointer-events: none;
}

.EstiloContenidoInstitucionalSeguridad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
}

.EstiloContenedorEscudoSeguridadSistema {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #FFFFFF;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 36px -12px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  margin-bottom: 4px;
}

.EstiloEscudoSeguridadSistema {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.EstiloNombreInstituciónSeguridadSistema {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  letter-spacing: -0.3px;
  margin: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.EstiloCajaAspectoLegalSeguridadSistema {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  margin: 0;
  overflow-wrap: anywhere;
  max-width: 380px;
}

.EstiloDatosLegalesSeguridadSistema {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  width: 100%;
}

.EstiloChipDatoLegalSeguridadSistema {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  padding: 8px 15px;
  white-space: nowrap;
  flex: 0 1 auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.EstiloChipDatoLegalSeguridadSistema strong {
  color: #FFFFFF;
  font-weight: 800;
  margin-right: 4px;
  opacity: 0.75;
}

.EstiloLemaInstitucionalSeguridadSistema {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
  border-left: 3px solid #FEA321;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0 12px 12px 0;
  text-align: left;
  margin: 6px 0 0;
  width: 100%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.EstiloLemaInstitucionalSeguridadSistema i {
  color: #FEA321;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 3px;
}
.EstiloLemaInstitucionalSeguridadSistema span {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.EstiloPanelFormularioSeguridadSistema {
  padding: 48px 56px 32px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  min-width: 0;
}

.EstiloBarraSuperiorFormularioSeguridad {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.EstiloEnlaceRegresarCampus {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #2E90AC;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(46, 144, 172, 0.06);
  border: 1px solid rgba(46, 144, 172, 0.12);
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloEnlaceRegresarCampus i {
  font-size: 11px;
}
.EstiloEnlaceRegresarCampus:hover {
  background: #2E90AC;
  color: #FFFFFF;
  border-color: #2E90AC;
}

.EstiloEncabezadoAccesoSeguridad {
  margin-bottom: 28px;
}

.EstiloTítuloAccesoSeguridad {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  color: #0E3D4D;
  letter-spacing: -0.6px;
  margin: 0 0 6px;
  line-height: 1.15;
}

.EstiloSubtítuloAccesoSeguridad {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
}

.EstiloGrupoCampoSeguridadSistema {
  margin-bottom: 16px;
}

.EstiloEtiquetaCampoSeguridadSistema {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0E3D4D;
  margin-bottom: 8px;
}
.EstiloEtiquetaCampoSeguridadSistema i {
  font-size: 11px;
  color: #2E90AC;
  width: 14px;
  text-align: center;
  opacity: 0.9;
}

.EstiloCampoConIconoSeguridadSistema {
  display: flex;
  align-items: center;
  border: 1.5px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  padding: 0 14px;
  background: #FFFFFF;
  height: 48px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloCampoConIconoSeguridadSistema > i {
  color: #64748B;
  font-size: 14px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  margin-right: 10px;
  transition: color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloCampoConIconoSeguridadSistema:hover:not(.EstiloCampoConIconoSeguridadSistemaError) {
  border-color: rgba(46, 144, 172, 0.4);
}
.EstiloCampoConIconoSeguridadSistema:focus-within {
  border-color: #2E90AC;
  box-shadow: 0 0 0 4px rgba(46, 144, 172, 0.1);
}
.EstiloCampoConIconoSeguridadSistema:focus-within > i {
  color: #2E90AC;
}

.EstiloCampoConIconoSeguridadSistemaError {
  border-color: #E74C3C !important;
  animation: EstiloShakeCampoError 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.EstiloCampoConIconoSeguridadSistemaError > i {
  color: #E74C3C;
}

@keyframes EstiloShakeCampoError {
  0%, 100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-9px);
  }
  30% {
    transform: translateX(8px);
  }
  45% {
    transform: translateX(-6px);
  }
  60% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-2px);
  }
}
.EstiloEntradaSeguridadSistema {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  flex: 1;
  min-width: 0;
  width: 100%;
  background: transparent !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #0E3D4D !important;
  letter-spacing: normal !important;
  padding: 0 !important;
  height: 100% !important;
  line-height: 1.2 !important;
  appearance: none;
  -webkit-appearance: none;
}
.EstiloEntradaSeguridadSistema::placeholder {
  color: #8A93A3;
  font-weight: 400;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
}
.EstiloEntradaSeguridadSistema:focus, .EstiloEntradaSeguridadSistema:focus-visible, .EstiloEntradaSeguridadSistema:hover, .EstiloEntradaSeguridadSistema:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.EstiloEntradaSeguridadSistema:-webkit-autofill, .EstiloEntradaSeguridadSistema:-webkit-autofill:hover, .EstiloEntradaSeguridadSistema:-webkit-autofill:focus {
  -webkit-text-fill-color: #0E3D4D;
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  transition: background-color 5000s ease-in-out 0s;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif !important;
  font-size: 16px !important;
}

input.EstiloEntradaSeguridadSistema[type=password] {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

select.EstiloEntradaSeguridadSistema {
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0 center !important;
  background-size: 11px !important;
  padding-right: 20px !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif !important;
  font-size: 16px !important;
}

.EstiloBotónMostrarClaveSeguridadSistema {
  border: none;
  background: none;
  color: #64748B;
  cursor: pointer;
  flex-shrink: 0;
  padding: 4px;
  transition: color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónMostrarClaveSeguridadSistema:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónMostrarClaveSeguridadSistema:hover {
  color: #2E90AC;
}

.EstiloFilaOpcionesSeguridadSistema {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
  margin-top: 4px;
}

.EstiloCheckRecuérdameSeguridadSistema {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1E293B;
  user-select: none;
}
.EstiloCheckRecuérdameSeguridadSistema input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(15, 23, 42, 0.18);
  background: #FFFFFF;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloCheckRecuérdameSeguridadSistema input[type=checkbox]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.EstiloCheckRecuérdameSeguridadSistema input[type=checkbox]:hover {
  border-color: #2E90AC;
}
.EstiloCheckRecuérdameSeguridadSistema input[type=checkbox]:checked {
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  border-color: #2E90AC;
}
.EstiloCheckRecuérdameSeguridadSistema input[type=checkbox]:checked::after {
  opacity: 1;
}
.EstiloCheckRecuérdameSeguridadSistema input[type=checkbox]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.2);
}
.EstiloCheckRecuérdameSeguridadSistema span {
  line-height: 1;
}

.EstiloEnlaceOlvidóSeguridadSistema {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2E90AC;
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloEnlaceOlvidóSeguridadSistema:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloEnlaceOlvidóSeguridadSistema:hover {
  color: #1A6B85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.EstiloBotónIniciarSesiónSistema {
  width: 100%;
  border: none;
  height: 50px;
  padding: 0 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  color: #FFFFFF !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 8px 20px -6px rgba(46, 144, 172, 0.35);
  letter-spacing: 0.2px;
}
.EstiloBotónIniciarSesiónSistema:focus-visible {
  outline: 2px solid #FEA321;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónIniciarSesiónSistema i {
  font-size: 14px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónIniciarSesiónSistema:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(46, 144, 172, 0.5);
  color: #FFFFFF !important;
}
.EstiloBotónIniciarSesiónSistema:hover i {
  transform: translateX(4px);
}
.EstiloBotónIniciarSesiónSistema:active {
  transform: translateY(0);
}
.EstiloBotónIniciarSesiónSistema:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.EstiloDerechosSeguridadSistema {
  display: block;
  text-align: center;
  margin: 18px 0 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  color: #8A93A3;
  line-height: 1.5;
}

.EstiloFondoModalRecuperación {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.EstiloFondoModalRecuperación.EstiloFondoModalRecuperaciónVisible {
  display: flex;
  animation: EstiloFondoModalEntrar 0.25s ease-out;
}

@keyframes EstiloFondoModalEntrar {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.EstiloModalRecuperación {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(15, 23, 42, 0.05);
  padding: 36px 28px 28px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  animation: EstiloModalEntrarSeguridad 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
}

@keyframes EstiloModalEntrarSeguridad {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.EstiloBotónCerrarModalRecuperación {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: #F4F6F9;
  color: #64748B;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónCerrarModalRecuperación:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónCerrarModalRecuperación:hover {
  background: #E74C3C;
  color: #FFFFFF;
  transform: rotate(90deg);
}

.EstiloEstadoModalRecuperación {
  display: none;
  text-align: center;
}
.EstiloEstadoModalRecuperación.EstiloEstadoModalRecuperaciónActivo {
  display: block;
}

.EstiloÍconoModalRecuperación {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(46, 144, 172, 0.1);
  color: #2E90AC;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.EstiloÍconoModalRecuperaciónÉxito {
  background: rgba(39, 174, 96, 0.12);
  color: #27AE60;
}

.EstiloTítuloModalRecuperación {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0E3D4D;
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}

.EstiloTextoModalRecuperación {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.6;
  margin: 0 0 18px;
}
.EstiloTextoModalRecuperación strong {
  color: #0E3D4D;
  font-weight: 800;
}

.EstiloAvisoAcadémicosRecuperación {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  background: rgba(254, 163, 33, 0.08);
  border: 1px solid rgba(254, 163, 33, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #C97D10;
  line-height: 1.55;
}
.EstiloAvisoAcadémicosRecuperación i {
  margin-top: 2px;
  font-size: 13px;
  flex-shrink: 0;
  color: #FEA321;
}

.EstiloGrupoCampoModalRecuperación {
  text-align: left;
  margin-bottom: 16px;
}

.EstiloMensajeErrorModalRecuperación {
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(231, 76, 60, 0.08);
  border-left: 3px solid #E74C3C;
  border-radius: 0 6px 6px 0;
  padding: 10px 12px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #E74C3C;
  text-align: left;
  margin: -4px 0 16px;
}
.EstiloMensajeErrorModalRecuperación i {
  font-size: 13px;
  flex-shrink: 0;
}
.EstiloMensajeErrorModalRecuperación.EstiloMensajeErrorModalRecuperaciónVisible {
  display: flex;
  animation: EstiloApareceMensajeError 0.3s ease both;
}

@keyframes EstiloApareceMensajeError {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.EstiloBotónSecundarioSeguridadSistema {
  width: 100%;
  border: 1.5px solid rgba(15, 23, 42, 0.12);
  background: #FFFFFF;
  height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: #0E3D4D;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónSecundarioSeguridadSistema:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónSecundarioSeguridadSistema:hover {
  background: #F4F6F9;
  border-color: rgba(46, 144, 172, 0.3);
  color: #2E90AC;
}

@media (max-width: 1280px) {
  .EstiloCuerpoSeguridadSistema {
    padding: 24px;
  }
  .EstiloContenedorSeguridadSistema {
    max-width: 1180px;
  }
  .EstiloPanelInstitucionalSeguridad {
    padding: 52px 44px;
  }
  .EstiloPanelFormularioSeguridadSistema {
    padding: 40px 44px 30px;
  }
}
@media (max-width: 1200px) {
  .EstiloContenedorSeguridadSistema {
    max-width: 1000px;
  }
  .EstiloPanelInstitucionalSeguridad {
    padding: 44px 36px;
  }
  .EstiloContenidoInstitucionalSeguridad {
    max-width: 360px;
    gap: 16px;
  }
  .EstiloContenedorEscudoSeguridadSistema {
    width: 100px;
    height: 100px;
  }
  .EstiloNombreInstituciónSeguridadSistema {
    font-size: 1.4rem;
  }
  .EstiloPanelFormularioSeguridadSistema {
    padding: 40px 36px 28px;
  }
  .EstiloTítuloAccesoSeguridad {
    font-size: 1.7rem;
  }
}
@media (max-width: 992px) {
  .EstiloCuerpoSeguridadSistema {
    padding: 24px;
    align-items: flex-start;
  }
  .EstiloContenedorSeguridadSistema {
    max-width: 680px;
    margin: 0 auto;
  }
  .EstiloTarjetaSeguridadSistema {
    grid-template-columns: 1fr;
    border-radius: 20px;
  }
  .EstiloPanelInstitucionalSeguridad {
    padding: 32px 28px 26px;
  }
  .EstiloPanelInstitucionalSeguridad::before, .EstiloPanelInstitucionalSeguridad::after {
    opacity: 0.6;
  }
  .EstiloContenidoInstitucionalSeguridad {
    gap: 12px;
    max-width: 100%;
  }
  .EstiloContenedorEscudoSeguridadSistema {
    width: 76px;
    height: 76px;
    padding: 7px;
    margin-bottom: 0;
    box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.12);
  }
  .EstiloNombreInstituciónSeguridadSistema {
    font-size: 1.15rem;
    line-height: 1.3;
  }
  .EstiloCajaAspectoLegalSeguridadSistema {
    display: none;
  }
  .EstiloDatosLegalesSeguridadSistema {
    gap: 6px;
  }
  .EstiloChipDatoLegalSeguridadSistema {
    font-size: 12px;
    padding: 6px 12px;
  }
  .EstiloLemaInstitucionalSeguridadSistema {
    display: none;
  }
  .EstiloPanelFormularioSeguridadSistema {
    padding: 30px 32px 26px;
  }
  .EstiloTítuloAccesoSeguridad {
    font-size: 1.55rem;
  }
}
@media (max-width: 768px) {
  .EstiloCuerpoSeguridadSistema {
    padding: 20px;
  }
  .EstiloPanelInstitucionalSeguridad {
    padding: 26px 22px 22px;
  }
  .EstiloContenedorEscudoSeguridadSistema {
    width: 68px;
    height: 68px;
    padding: 6px;
  }
  .EstiloNombreInstituciónSeguridadSistema {
    font-size: 1.05rem;
  }
  .EstiloPanelFormularioSeguridadSistema {
    padding: 26px 28px 24px;
  }
  .EstiloTítuloAccesoSeguridad {
    font-size: 1.45rem;
  }
  .EstiloEncabezadoAccesoSeguridad {
    margin-bottom: 24px;
  }
}
@media (max-width: 576px) {
  .EstiloCuerpoSeguridadSistema {
    padding: 16px;
    background: #eef1f6;
  }
  .EstiloContenedorSeguridadSistema {
    max-width: 100%;
  }
  .EstiloTarjetaSeguridadSistema {
    grid-template-columns: 1fr;
    border-radius: 18px;
    box-shadow: 0 18px 44px -20px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.04);
  }
  .EstiloPanelInstitucionalSeguridad {
    padding: 24px 20px 22px;
  }
  .EstiloPanelInstitucionalSeguridad::before {
    width: 200px;
    height: 200px;
    top: -80px;
    left: -80px;
  }
  .EstiloPanelInstitucionalSeguridad::after {
    width: 180px;
    height: 180px;
    bottom: -80px;
    right: -80px;
  }
  .EstiloContenidoInstitucionalSeguridad {
    gap: 10px;
  }
  .EstiloContenedorEscudoSeguridadSistema {
    width: 64px;
    height: 64px;
    padding: 5px;
    margin-bottom: 2px;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(255, 255, 255, 0.15);
  }
  .EstiloNombreInstituciónSeguridadSistema {
    font-size: 1rem;
    line-height: 1.3;
    text-align: center;
  }
  .EstiloCajaAspectoLegalSeguridadSistema {
    display: none;
  }
  .EstiloDatosLegalesSeguridadSistema {
    flex-wrap: wrap;
    gap: 6px;
  }
  .EstiloChipDatoLegalSeguridadSistema {
    font-size: 11.5px;
    padding: 5px 11px;
  }
  .EstiloLemaInstitucionalSeguridadSistema {
    display: none;
  }
  .EstiloPanelFormularioSeguridadSistema {
    padding: 22px 20px 24px;
  }
  .EstiloBarraSuperiorFormularioSeguridad {
    margin-bottom: 16px;
  }
  .EstiloEnlaceRegresarCampus {
    font-size: 12px;
    padding: 6px 12px;
  }
  .EstiloEncabezadoAccesoSeguridad {
    margin-bottom: 20px;
  }
  .EstiloTítuloAccesoSeguridad {
    font-size: 1.45rem;
  }
  .EstiloSubtítuloAccesoSeguridad {
    font-size: 14px;
  }
  .EstiloFilaOpcionesSeguridadSistema {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }
  .EstiloCheckRecuérdameSeguridadSistema {
    font-size: 13px;
  }
  .EstiloEnlaceOlvidóSeguridadSistema {
    font-size: 13px;
  }
  .EstiloBotónIniciarSesiónSistema {
    height: 48px;
    font-size: 14.5px;
  }
  .EstiloDerechosSeguridadSistema {
    margin-top: 14px;
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .EstiloCuerpoSeguridadSistema {
    padding: 12px;
  }
  .EstiloTarjetaSeguridadSistema {
    border-radius: 16px;
  }
  .EstiloPanelInstitucionalSeguridad {
    padding: 20px 16px 18px;
  }
  .EstiloContenedorEscudoSeguridadSistema {
    width: 56px;
    height: 56px;
    padding: 4px;
  }
  .EstiloNombreInstituciónSeguridadSistema {
    font-size: 0.95rem;
  }
  .EstiloPanelFormularioSeguridadSistema {
    padding: 20px 16px 22px;
  }
  .EstiloTítuloAccesoSeguridad {
    font-size: 1.35rem;
  }
  .EstiloBotónIniciarSesiónSistema {
    height: 46px;
  }
  .EstiloModalRecuperación {
    padding: 30px 22px 24px;
    border-radius: 16px;
    max-height: calc(100vh - 24px);
  }
  .EstiloTítuloModalRecuperación {
    font-size: 1.15rem;
  }
  .EstiloTextoModalRecuperación {
    font-size: 13.5px;
  }
}
@media (max-width: 420px) {
  .EstiloCuerpoSeguridadSistema {
    padding: 10px;
  }
  .EstiloPanelInstitucionalSeguridad {
    padding: 18px 14px 16px;
  }
  .EstiloContenedorEscudoSeguridadSistema {
    width: 50px;
    height: 50px;
    padding: 4px;
  }
  .EstiloNombreInstituciónSeguridadSistema {
    font-size: 0.88rem;
  }
  .EstiloChipDatoLegalSeguridadSistema {
    font-size: 10.5px;
    padding: 4px 9px;
  }
  .EstiloPanelFormularioSeguridadSistema {
    padding: 18px 14px 20px;
  }
  .EstiloTítuloAccesoSeguridad {
    font-size: 1.3rem;
  }
  .EstiloSubtítuloAccesoSeguridad {
    font-size: 13px;
  }
  .EstiloBotónIniciarSesiónSistema {
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .EstiloTarjetaSeguridadSistema,
  .EstiloCampoConIconoSeguridadSistemaError,
  .EstiloModalRecuperación,
  .EstiloFondoModalRecuperaciónVisible {
    animation: none !important;
    transition: none !important;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* =========================================
   LOGIN ADMIN — MINIMALISTA
   ========================================= */
.EstiloCuerpoSeguridadCampus {
  min-height: 100vh;
  min-height: 100svh;
  background: #F4F6F9;
  margin: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 32px);
}
.EstiloCuerpoSeguridadCampus::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #0E3D4D 0%, #1A6B85 45%, #2E90AC 100%);
  z-index: 0;
}
.EstiloCuerpoSeguridadCampus::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1.2px, transparent 1.2px);
  background-size: 32px 32px;
  z-index: 0;
  pointer-events: none;
}

.EstiloOrbeSeguridad {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  animation: EstiloOrbeFlotar 22s ease-in-out infinite;
}

.EstiloOrbeSeguridadUno {
  width: 460px;
  height: 460px;
  background: #FEA321;
  top: -160px;
  left: -140px;
}

.EstiloOrbeSeguridadDos {
  width: 400px;
  height: 400px;
  background: #4EC3E4;
  bottom: -160px;
  right: -120px;
  animation-delay: -8s;
}

@keyframes EstiloOrbeFlotar {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, 30px) scale(1.1);
  }
}
.EstiloContenedorSeguridad {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
}

.EstiloTarjetaSeguridad {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: clamp(24px, 5vw, 40px) clamp(20px, 4vw, 32px);
  box-shadow: 0 30px 70px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15);
  animation: EstiloCampusEntrar 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  position: relative;
}

@keyframes EstiloCampusEntrar {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.EstiloEncabezadoSeguridad {
  text-align: center;
  margin-bottom: 24px;
}

.EstiloIconoEscudoSeguridad {
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid #F1F5F9;
  box-shadow: 0 8px 24px rgba(46, 144, 172, 0.12);
}
.EstiloIconoEscudoSeguridad img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.EstiloTituloSeguridad {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.3rem, 3vw, 1.5rem);
  font-weight: 800;
  margin: 0 0 6px;
  color: #0E3D4D;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.EstiloSubtituloSeguridad {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #64748B;
  margin: 0;
  line-height: 1.55;
}

.EstiloAlertaSeguridad {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(231, 76, 60, 0.08);
  border: 1px solid rgba(231, 76, 60, 0.22);
  color: #5C0A0A;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}
.EstiloAlertaSeguridad i {
  color: #E74C3C;
  flex-shrink: 0;
}

.EstiloGrupoCampoSeguridad {
  margin-bottom: 16px;
}

.EstiloEtiquetaCampoSeguridad {
  display: block;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #0E3D4D;
}

.EstiloCampoConIconoSeguridad {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  padding: 12px 16px;
  background: #FFFFFF;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloCampoConIconoSeguridad:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloCampoConIconoSeguridad > i {
  color: #64748B;
  font-size: 15px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.EstiloCampoConIconoSeguridad:focus-within {
  border-color: #2E90AC;
  box-shadow: 0 0 0 4px rgba(46, 144, 172, 0.12);
}
.EstiloCampoConIconoSeguridad:focus-within > i {
  color: #2E90AC;
}

.EstiloEntradaSeguridad {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  flex: 1;
  min-width: 0;
  background: transparent !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #0E3D4D;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.EstiloEntradaSeguridad::placeholder {
  color: #8A93A3;
  letter-spacing: normal;
}
.EstiloEntradaSeguridad:focus, .EstiloEntradaSeguridad:focus-visible, .EstiloEntradaSeguridad:hover, .EstiloEntradaSeguridad:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

input.EstiloEntradaSeguridad[type=password] {
  letter-spacing: 2px;
}

select.EstiloEntradaSeguridad {
  letter-spacing: normal;
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.EstiloBotónMostrarClave {
  border: none;
  background: none;
  color: #64748B;
  cursor: pointer;
  font-size: 15px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónMostrarClave:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónMostrarClave:hover {
  color: #2E90AC;
}

.EstiloBotónIngresarSeguridad {
  width: 100%;
  border: none;
  height: clamp(48px, 10vw, 52px);
  padding: 0 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1A6B85 0%, #2E90AC 100%);
  color: #FFFFFF !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  box-shadow: 0 10px 25px rgba(46, 144, 172, 0.3);
  letter-spacing: 0.2px;
}
.EstiloBotónIngresarSeguridad:focus-visible {
  outline: 2px solid #FEA321;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónIngresarSeguridad i {
  font-size: 15px;
}
.EstiloBotónIngresarSeguridad:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(46, 144, 172, 0.5);
}
.EstiloBotónIngresarSeguridad:active {
  transform: translateY(0);
}

.EstiloPieSeguridad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  padding: 8px 16px;
  background: #F7F9FB;
  border: 1px solid #F1F5F9;
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  width: 100%;
}
.EstiloPieSeguridad i {
  color: #27AE60;
  font-size: 11px;
}

.EstiloOverlayProcesandoSeguridad {
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.EstiloProcesandoContenedorSeguridad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.EstiloProcesandoAroSeguridad {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #F0F9FC;
}
.EstiloProcesandoAroSeguridad::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #2E90AC;
  border-right-color: rgba(46, 144, 172, 0.35);
  animation: EstiloCampusGirar 0.8s linear infinite;
}

.EstiloProcesandoTextoSeguridad {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1A6B85;
  margin: 0;
}

.EstiloProcesandoPuntosSeguridad::after {
  content: "";
  animation: EstiloCampusPuntos 1.4s steps(4, end) infinite;
}

@keyframes EstiloCampusGirar {
  to {
    transform: rotate(360deg);
  }
}
@keyframes EstiloCampusPuntos {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "";
  }
}
/* =========================================
   PANEL ADMIN — BASE
   ========================================= */
.EstiloCuerpoAdministradorCampus {
  background: #F4F6F9;
  color: #1E293B;
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

.EstiloDistribuciónAdministrador {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
}

/* =========================================
   SIDEBAR MODERNO
   ========================================= */
.EstiloBarraLateralAdministrador {
  width: 280px;
  background: #0E3D4D;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 300;
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
}
.EstiloBarraLateralAdministrador::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}
.EstiloBarraLateralAdministrador > * {
  position: relative;
  z-index: 1;
}

.EstiloMarcaBarraLateral {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.EstiloÍconoMarca {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2E90AC, #FEA321);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(254, 163, 33, 0.25);
}
.EstiloÍconoMarca img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.EstiloTextosMarcaBarraLateral {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.EstiloNombreMarca {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  line-height: 1.15;
}

.EstiloLemaMarca {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.3px;
}

.EstiloNavegaciónAdministrador {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.EstiloNavegaciónAdministrador::-webkit-scrollbar {
  width: 4px;
}
.EstiloNavegaciónAdministrador::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}

.EstiloEtiquetaNav {
  display: block;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 1.3px;
  padding: 12px 12px 8px;
  margin-top: 8px;
}
.EstiloEtiquetaNav:first-child {
  margin-top: 0;
}

.EstiloÍtemNavegación {
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  padding: 11px 12px;
  border-radius: 12px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  width: 100%;
}
.EstiloÍtemNavegación:focus-visible {
  outline: 2px solid #FEA321;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloÍtemNavegación > i {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloÍtemNavegación span {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.EstiloÍtemNavegación:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
}
.EstiloÍtemNavegación:hover > i {
  background: rgba(254, 163, 33, 0.2);
  color: #FEA321;
}
.EstiloÍtemNavegación.EstiloÍtemNavegaciónActivo {
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.9), rgba(26, 107, 133, 0.95));
  color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(46, 144, 172, 0.35);
}
.EstiloÍtemNavegación.EstiloÍtemNavegaciónActivo::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  border-radius: 0 6px 6px 0;
  background: #FEA321;
  box-shadow: 0 0 12px rgba(254, 163, 33, 0.7);
}
.EstiloÍtemNavegación.EstiloÍtemNavegaciónActivo > i {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}
.EstiloÍtemNavegación.EstiloÍtemNavegaciónActivo:hover {
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.9), rgba(26, 107, 133, 0.95));
  color: #FFFFFF;
}
.EstiloÍtemNavegación.EstiloÍtemNavegaciónActivo:hover > i {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.EstiloPieBarraLateral {
  padding: 16px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
}

.EstiloBotónCerrarSesión {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid transparent;
  width: 100%;
  justify-content: flex-start;
  background: transparent;
}
.EstiloBotónCerrarSesión:focus-visible {
  outline: 2px solid #FEA321;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónCerrarSesión > i {
  width: 18px;
  text-align: center;
  font-size: 13px;
}
.EstiloBotónCerrarSesión:hover {
  background: rgba(229, 72, 77, 0.15);
  border-color: rgba(229, 72, 77, 0.35);
  color: #FFFFFF !important;
}

.EstiloFondoBarraLateralMóvil {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(14, 61, 77, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: calc(300 - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloFondoBarraLateralMóvil.EstiloFondoBarraLateralMóvilVisible {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 992px) {
  .EstiloFondoBarraLateralMóvil {
    display: block;
  }
}

/* =========================================
   CONTENIDO PRINCIPAL
   ========================================= */
.EstiloContenidoAdministrador {
  flex: 1;
  margin-left: 280px;
  padding: clamp(20px, 3vw, 32px);
  max-width: 100%;
  min-width: 0;
  transition: margin-left 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media (max-width: 992px) {
  .EstiloContenidoAdministrador {
    margin-left: 0;
    padding: 20px 16px;
  }
}
@media (max-width: 480px) {
  .EstiloContenidoAdministrador {
    padding: 16px 12px;
  }
}

/* =========================================
   ENCABEZADO
   ========================================= */
.EstiloEncabezadoContenido {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.EstiloEncabezadoContenido > div {
  flex: 1;
  min-width: 0;
}

.EstiloBotónMenúMóvil {
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  border-radius: 8px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: #0E3D4D;
  flex-shrink: 0;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónMenúMóvil:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónMenúMóvil i {
  font-size: 15px;
}
.EstiloBotónMenúMóvil:hover {
  background: #F0F9FC;
  border-color: rgba(46, 144, 172, 0.3);
  color: #2E90AC;
}
@media (max-width: 992px) {
  .EstiloBotónMenúMóvil {
    display: flex;
  }
}

.EstiloTítuloSección {
  margin: 0 0 4px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.3rem, 3vw, 1.55rem);
  font-weight: 800;
  color: #0E3D4D;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.EstiloDescripciónSección {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.5;
}

.EstiloBotónNuevoRegistro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  padding: 0 20px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, #FEA321, #C97D10);
  color: #FFFFFF !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 8px 20px rgba(254, 163, 33, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.EstiloBotónNuevoRegistro:focus-visible {
  outline: 2px solid #FEA321;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónNuevoRegistro i {
  font-size: 13px;
}
.EstiloBotónNuevoRegistro:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(254, 163, 33, 0.45);
}
.EstiloBotónNuevoRegistro:active {
  transform: translateY(0);
}
@media (max-width: 576px) {
  .EstiloBotónNuevoRegistro {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================
   DASHBOARD DE STATS
   ========================================= */
.EstiloDashboardStats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 992px) {
  .EstiloDashboardStats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .EstiloDashboardStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .EstiloDashboardStats {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.EstiloStatCard {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  min-width: 0;
  text-align: left;
}
.EstiloStatCard:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloStatCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
  border-color: rgba(46, 144, 172, 0.25);
}
.EstiloStatCard:hover .EstiloStatÍcono {
  transform: scale(1.08) rotate(-4deg);
}
@media (hover: none) {
  .EstiloStatCard:hover {
    transform: none;
  }
}

.EstiloStatÍcono {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #FFFFFF;
  font-size: 15px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloStatÍcono--Azul {
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  box-shadow: 0 4px 12px rgba(46, 144, 172, 0.3);
}
.EstiloStatÍcono--Naranja {
  background: linear-gradient(135deg, #FEA321, #C97D10);
  box-shadow: 0 4px 12px rgba(254, 163, 33, 0.3);
}
.EstiloStatÍcono--Verde {
  background: linear-gradient(135deg, #27AE60, #1A7A3C);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}
.EstiloStatÍcono--Morado {
  background: linear-gradient(135deg, #7C5CBF, #3C2585);
  box-shadow: 0 4px 12px rgba(124, 92, 191, 0.3);
}
.EstiloStatÍcono--Gris {
  background: linear-gradient(135deg, #64748B, #1E293B);
  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}

.EstiloStatContenido {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.EstiloStatValor {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0E3D4D;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.EstiloStatEtiqueta {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* =========================================
   PANELES
   ========================================= */
.EstiloPanelSección {
  display: none;
}
.EstiloPanelSección.EstiloPanelSecciónActivo {
  display: block;
  animation: EstiloCampusEntrar 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* =========================================
   GRIDS DE TARJETAS
   ========================================= */
.EstiloRejillaTarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
@media (max-width: 768px) {
  .EstiloRejillaTarjetas {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
@media (max-width: 480px) {
  .EstiloRejillaTarjetas {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

.EstiloRejillaHonor {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
@media (max-width: 480px) {
  .EstiloRejillaHonor {
    grid-template-columns: minmax(0, 1fr);
  }
}

.EstiloTarjetaRegistro {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  border: 1px solid #E2E8F0;
  border-left: 4px solid transparent;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.EstiloTarjetaRegistro:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
}
@media (hover: none) {
  .EstiloTarjetaRegistro:hover {
    transform: none;
  }
}
.EstiloTarjetaRegistro.EstiloTarjetaRegistroAzul {
  border-left-color: #2E90AC;
}
.EstiloTarjetaRegistro.EstiloTarjetaRegistroNaranja {
  border-left-color: #FEA321;
}

.EstiloEncabezadoTarjeta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.EstiloTítuloTarjeta {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  margin: 0;
  color: #0E3D4D;
  line-height: 1.3;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.EstiloAccionesTarjeta {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.EstiloBotónAcciónTarjeta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  border: 1px solid #F1F5F9;
  background: #F7F9FB;
  color: #64748B;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónAcciónTarjeta:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónAcciónTarjeta i {
  line-height: 1;
  font-size: 13px;
}
.EstiloBotónAcciónTarjeta:hover {
  background: #2E90AC;
  border-color: #2E90AC;
  color: #FFFFFF;
}
.EstiloBotónAcciónTarjeta.EstiloBotónAcciónTarjetaEliminar:hover {
  background: #E5484D;
  border-color: #E5484D;
  color: #FFFFFF;
}

.EstiloContenidoTarjetaTexto {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.6;
  max-height: 70px;
  overflow: hidden;
  margin-top: 8px;
  flex: 1;
}
.EstiloContenidoTarjetaTexto p {
  margin: 0 0 6px;
}

.EstiloFechaTarjeta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #8A93A3;
}
.EstiloFechaTarjeta i {
  color: #2E90AC;
  font-size: 11px;
}

/* =========================================
   INSIGNIAS DE ESTADO
   ========================================= */
.EstiloInsigniaEstado {
  display: inline-block;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.EstiloInsigniaHoy {
  background: rgba(254, 163, 33, 0.15);
  color: #C97D10;
  border: 1px solid rgba(254, 163, 33, 0.3);
}

.EstiloInsigniaPróximo {
  background: #EDFAF3;
  color: #1A7A3C;
  border: 1px solid rgba(39, 174, 96, 0.25);
}

.EstiloInsigniaPasado {
  background: rgba(100, 116, 139, 0.12);
  color: #64748B;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

.EstiloInsigniaPublicado {
  background: #EDFAF3;
  color: #1A7A3C;
  border: 1px solid rgba(39, 174, 96, 0.25);
}

.EstiloInsigniaBorrador {
  background: rgba(100, 116, 139, 0.12);
  color: #64748B;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

/* =========================================
   DETALLES DEL EVENTO
   ========================================= */
.EstiloDetalleEvento {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  margin-top: 8px;
}
.EstiloDetalleEvento i {
  width: 14px;
  text-align: center;
  color: #2E90AC;
  font-size: 12px;
  flex-shrink: 0;
}

/* =========================================
   GALERÍA
   ========================================= */
.EstiloRejillaGalería {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
@media (max-width: 480px) {
  .EstiloRejillaGalería {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.EstiloTarjetaGalería {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  aspect-ratio: 4/3;
  cursor: pointer;
}
.EstiloTarjetaGalería img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloTarjetaGalería:hover img {
  transform: scale(1.06);
}
.EstiloTarjetaGalería:hover .EstiloCapaGalería {
  opacity: 1;
}
@media (hover: none) {
  .EstiloTarjetaGalería .EstiloCapaGalería {
    opacity: 1;
  }
}

.EstiloCapaGalería {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(14, 61, 77, 0.9) 0%, rgba(14, 61, 77, 0) 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.EstiloTextoReferenciaGalería {
  color: #FFFFFF;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.EstiloAccionesGalería {
  display: flex;
  gap: 6px;
}

/* =========================================
   CUADRO DE HONOR
   ========================================= */
.EstiloTarjetaHonor {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  border: 1px solid #E2E8F0;
  position: relative;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.EstiloTarjetaHonor:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
}

.EstiloFotoHonor {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px;
  border: 3px solid #FEA321;
  box-shadow: 0 6px 16px rgba(254, 163, 33, 0.25);
}

.EstiloFotoHonorMarcador {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F4F6F9;
  color: #64748B;
  font-size: 30px;
  border: 3px solid #FEA321;
}

.EstiloNombreHonor {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 4px;
  color: #0E3D4D;
  line-height: 1.3;
}

.EstiloCursoHonor {
  display: inline-block;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #2E90AC;
  background: #F0F9FC;
  border-radius: 999px;
  padding: 3px 10px;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.EstiloMotivoHonor {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.EstiloAccionesHonor {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
}

/* =========================================
   DOCUMENTOS
   ========================================= */
.EstiloListaDocumentos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.EstiloFilaDocumento {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  border: 1px solid #E2E8F0;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  min-width: 0;
}
.EstiloFilaDocumento:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
  border-color: rgba(46, 144, 172, 0.2);
}
@media (max-width: 480px) {
  .EstiloFilaDocumento {
    padding: 12px;
    gap: 12px;
  }
}

.EstiloÍconoDocumento {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  color: #FFFFFF;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.EstiloÍconoDocumento i {
  line-height: 1;
}

.EstiloÍconoDocumentoPdf {
  background: linear-gradient(135deg, #E5484D, #E74C3C);
}

.EstiloÍconoDocumentoExcel {
  background: linear-gradient(135deg, #27AE60, #1A7A3C);
}

.EstiloÍconoDocumentoWord {
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
}

.EstiloÍconoDocumentoPowerpoint {
  background: linear-gradient(135deg, #FEA321, #C97D10);
}

.EstiloÍconoDocumentoImagen {
  background: linear-gradient(135deg, #7C5CBF, #3C2585);
}

.EstiloInfoDocumento {
  flex: 1;
  min-width: 0;
}

.EstiloNombreDocumento {
  margin: 0 0 4px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #0E3D4D;
}

.EstiloMetaDocumento {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  letter-spacing: 0.2px;
}

/* =========================================
   ESTADOS VACÍOS
   ========================================= */
.EstiloEstadoVacío {
  text-align: center;
  padding: 48px 20px;
  color: #8A93A3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.EstiloEstadoVacío i {
  font-size: 42px;
  margin-bottom: 8px;
  color: #E2E8F0;
}
.EstiloEstadoVacío p {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
}
@media (max-width: 480px) {
  .EstiloEstadoVacío {
    padding: 32px 16px;
  }
}

/* =========================================
   INDICACIONES — TABS (REDISEÑADO)
   ========================================= */
.EstiloTarjetaIndicaciones {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  border: 1px solid #E2E8F0;
}
@media (max-width: 480px) {
  .EstiloTarjetaIndicaciones {
    padding: 20px;
    border-radius: 12px;
  }
}

.EstiloTabsIndicaciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px dashed #F1F5F9;
}

.EstiloTabIndicaciones {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  color: #64748B;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  white-space: nowrap;
}
.EstiloTabIndicaciones:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloTabIndicaciones i {
  font-size: 14px;
}
.EstiloTabIndicaciones:hover {
  background: #F0F9FC;
  border-color: rgba(46, 144, 172, 0.4);
  color: #2E90AC;
  transform: translateY(-1px);
}
.EstiloTabIndicaciones.EstiloTabIndicacionesActivo {
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(46, 144, 172, 0.3);
}
.EstiloTabIndicaciones.EstiloTabIndicacionesActivo:hover {
  color: #FFFFFF;
  transform: translateY(-1px);
}
@media (max-width: 480px) {
  .EstiloTabIndicaciones {
    padding: 8px 14px;
    font-size: 12px;
  }
}

.EstiloPanelTabIndicaciones {
  display: none;
}
.EstiloPanelTabIndicaciones.EstiloPanelTabIndicacionesActivo {
  display: block;
  animation: EstiloCampusEntrar 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.EstiloEncabezadoTabIndicaciones {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #F1F5F9;
}
@media (max-width: 480px) {
  .EstiloEncabezadoTabIndicaciones {
    flex-direction: column;
    gap: 16px;
  }
}

.EstiloÍconoTabIndicaciones {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  min-width: 64px;
  aspect-ratio: 1/1;
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  position: relative;
}
.EstiloÍconoTabIndicaciones::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: calc(12px + 4px);
  border: 2px solid currentColor;
  opacity: 0.2;
}

.EstiloÍconoTabIndicacionesAzul {
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  color: #2E90AC;
}

.EstiloÍconoTabIndicacionesAzulOscuro {
  background: linear-gradient(135deg, #1A6B85, #0E3D4D);
  color: #1A6B85;
}

.EstiloÍconoTabIndicacionesNaranja {
  background: linear-gradient(135deg, #FEA321, #C97D10);
  color: #FEA321;
}

.EstiloÍconoTabIndicacionesMorado {
  background: linear-gradient(135deg, #7C5CBF, #3C2585);
  color: #7C5CBF;
}

.EstiloÍconoTabIndicacionesVerde {
  background: linear-gradient(135deg, #27AE60, #1A7A3C);
  color: #27AE60;
}

.EstiloTítuloTabIndicaciones {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0E3D4D;
  margin: 0 0 8px;
  line-height: 1.2;
  letter-spacing: -0.4px;
}

.EstiloTextoTabIndicaciones {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.7;
  margin: 0;
  max-width: 800px;
}

.EstiloGrupoInfoIndicaciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  .EstiloGrupoInfoIndicaciones {
    grid-template-columns: 1fr;
  }
}

.EstiloTarjetaInfoIndicaciones {
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloTarjetaInfoIndicaciones:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
}
.EstiloTarjetaInfoIndicaciones::before {
  position: absolute;
  top: -15px;
  right: -15px;
  font-size: 100px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.04;
  pointer-events: none;
}

.EstiloTarjetaInfoIndicacionesAnchoCompleto {
  grid-column: 1/-1;
}

.EstiloTarjetaInfoIndicacionesPermitido {
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.04), rgba(39, 174, 96, 0.01));
  border: 1px solid rgba(39, 174, 96, 0.2);
  border-left: 6px solid #27AE60;
}
.EstiloTarjetaInfoIndicacionesPermitido::before {
  content: "✓";
  color: #27AE60;
}
.EstiloTarjetaInfoIndicacionesPermitido .EstiloTítuloTarjetaInfoIndicaciones {
  color: #1A7A3C;
}
.EstiloTarjetaInfoIndicacionesPermitido .EstiloÍtemInfoIndicaciones i {
  color: #27AE60;
}

.EstiloTarjetaInfoIndicacionesRestringido {
  background: linear-gradient(135deg, rgba(229, 72, 77, 0.04), rgba(229, 72, 77, 0.01));
  border: 1px solid rgba(229, 72, 77, 0.2);
  border-left: 6px solid #E5484D;
}
.EstiloTarjetaInfoIndicacionesRestringido::before {
  content: "✕";
  color: #E5484D;
}
.EstiloTarjetaInfoIndicacionesRestringido .EstiloTítuloTarjetaInfoIndicaciones {
  color: #E5484D;
}
.EstiloTarjetaInfoIndicacionesRestringido .EstiloÍtemInfoIndicaciones i {
  color: #E5484D;
}

.EstiloTítuloTarjetaInfoIndicaciones {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.EstiloÍtemInfoIndicaciones {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1E293B;
  line-height: 1.6;
}
.EstiloÍtemInfoIndicaciones + .EstiloÍtemInfoIndicaciones {
  margin-top: 16px;
}
.EstiloÍtemInfoIndicaciones i {
  margin-top: 4px;
  font-size: 14px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

/* =========================================
   MODALES
   ========================================= */
.EstiloFondoModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(14, 61, 77, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 600;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.EstiloFondoModal.EstiloFondoModalVisible {
  display: flex;
  animation: EstiloModalEntradaFondo 0.2s ease-out;
}

@keyframes EstiloModalEntradaFondo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.EstiloModal {
  background: #FFFFFF;
  border-radius: 16px;
  width: 100%;
  max-width: 580px;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.18), 0 4px 20px rgba(0, 0, 0, 0.08);
  animation: EstiloModalAparecer 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@media (max-width: 480px) {
  .EstiloModal {
    max-width: 100%;
    max-height: 95vh;
    border-radius: 16px 16px 0 0;
    align-self: flex-end;
  }
}

.EstiloModalPequeño {
  max-width: 420px;
}

@keyframes EstiloModalAparecer {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.EstiloEncabezadoModal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #F1F5F9;
  gap: 12px;
}
.EstiloEncabezadoModal h2 {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #0E3D4D;
  letter-spacing: -0.3px;
}
@media (max-width: 480px) {
  .EstiloEncabezadoModal {
    padding: 16px;
  }
}

.EstiloBotónCerrarModal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 8px;
  border: 1px solid #F1F5F9;
  background: #F7F9FB;
  color: #64748B;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-shrink: 0;
}
.EstiloBotónCerrarModal:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónCerrarModal:hover {
  background: #FEE2E2;
  border-color: rgba(229, 72, 77, 0.3);
  color: #E5484D;
}

.EstiloCuerpoModal {
  padding: 24px;
  overflow-y: auto;
}
.EstiloCuerpoModal::-webkit-scrollbar {
  width: 6px;
}
.EstiloCuerpoModal::-webkit-scrollbar-thumb {
  background: rgba(46, 144, 172, 0.3);
  border-radius: 999px;
}
@media (max-width: 480px) {
  .EstiloCuerpoModal {
    padding: 16px;
  }
}

.EstiloCuerpoModalConfirmación {
  padding: 32px 24px 16px;
  text-align: center;
}
.EstiloCuerpoModalConfirmación h2 {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 8px;
  color: #0E3D4D;
}
.EstiloCuerpoModalConfirmación p {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #64748B;
}

.EstiloÍconoConfirmación {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(229, 72, 77, 0.12);
  color: #E5484D;
  font-size: 26px;
  margin: 0 auto 16px;
}

.EstiloPieModal {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid #F1F5F9;
  background: #F7F9FB;
}
@media (max-width: 480px) {
  .EstiloPieModal {
    padding: 16px;
    flex-direction: column-reverse;
  }
  .EstiloPieModal > button {
    width: 100%;
  }
}

.EstiloGrupoCampoModal {
  margin-bottom: 16px;
}
.EstiloGrupoCampoModal:last-child {
  margin-bottom: 0;
}
.EstiloGrupoCampoModal label {
  display: block;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #0E3D4D;
}

.EstiloEntradaModal,
.EstiloÁreaTextoModal,
.EstiloSelectModal {
  width: 100%;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  padding: 11px 14px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #0E3D4D;
  outline: none !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-family: inherit;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}
.EstiloEntradaModal::placeholder,
.EstiloÁreaTextoModal::placeholder,
.EstiloSelectModal::placeholder {
  color: #8A93A3;
}
.EstiloEntradaModal:focus, .EstiloEntradaModal:focus-visible,
.EstiloÁreaTextoModal:focus,
.EstiloÁreaTextoModal:focus-visible,
.EstiloSelectModal:focus,
.EstiloSelectModal:focus-visible {
  outline: none !important;
  border-color: #2E90AC;
  box-shadow: 0 0 0 4px rgba(46, 144, 172, 0.12);
}

.EstiloÁreaTextoModal {
  resize: vertical;
  min-height: 100px;
}

/* =========================================
   ZONA DE CARGA DE ARCHIVOS
   ========================================= */
.EstiloZonaCargaArchivo {
  border: 2px dashed #E2E8F0;
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: #F7F9FB;
}
.EstiloZonaCargaArchivo i {
  font-size: 28px;
  color: #2E90AC;
  margin-bottom: 8px;
  display: block;
}
.EstiloZonaCargaArchivo p {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
}
.EstiloZonaCargaArchivo:hover {
  border-color: #2E90AC;
  background: #F0F9FC;
}
.EstiloZonaCargaArchivo.EstiloZonaCargaArchivoActiva {
  border-color: #2E90AC;
  background: #F0F9FC;
  box-shadow: 0 0 0 4px rgba(46, 144, 172, 0.12);
}

.EstiloVistaPreviaArchivo {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #EDFAF3;
  border: 1px solid rgba(39, 174, 96, 0.25);
  border-radius: 8px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.EstiloVistaPreviaArchivo img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.EstiloVistaPreviaArchivo i {
  color: #27AE60;
  flex-shrink: 0;
}
.EstiloVistaPreviaArchivo span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #0D4A2F;
}

/* =========================================
   BOTONES DE MODAL (CORREGIDOS)
   ========================================= */
.EstiloBotónPrimario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  padding: 0 20px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0E3D4D 0%, #1A6B85 45%, #2E90AC 100%);
  color: #FFFFFF !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 6px 16px rgba(46, 144, 172, 0.25);
}
.EstiloBotónPrimario:focus-visible {
  outline: 2px solid #FEA321;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónPrimario i {
  font-size: 14px;
}
.EstiloBotónPrimario:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(46, 144, 172, 0.35);
}
.EstiloBotónPrimario:active {
  transform: translateY(0);
}

.EstiloBotónSecundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  padding: 0 20px;
  height: 42px;
  border-radius: 8px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0E3D4D !important; /* SOLUCIÓN AL TEXTO INVISIBLE */
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónSecundario:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónSecundario i {
  font-size: 14px;
  color: #64748B;
}
.EstiloBotónSecundario:hover {
  background: #F7F9FB;
  border-color: rgba(46, 144, 172, 0.4);
  color: #2E90AC !important;
  transform: translateY(-1px);
}
.EstiloBotónSecundario:hover i {
  color: #2E90AC;
}
.EstiloBotónSecundario:active {
  transform: translateY(0);
}

.EstiloBotónPeligro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  padding: 0 20px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, #E5484D, #E74C3C);
  color: #FFFFFF !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 6px 16px rgba(229, 72, 77, 0.3);
}
.EstiloBotónPeligro:focus-visible {
  outline: 2px solid #E5484D;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónPeligro i {
  font-size: 14px;
}
.EstiloBotónPeligro:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(229, 72, 77, 0.4);
}
.EstiloBotónPeligro:active {
  transform: translateY(0);
}

.EstiloSegmentadoHorario {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.EstiloOpciónHorario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  color: #64748B;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloOpciónHorario:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloOpciónHorario i {
  font-size: 12px;
}
.EstiloOpciónHorario:hover {
  border-color: #2E90AC;
  color: #2E90AC;
}
.EstiloOpciónHorario.EstiloOpciónHorarioActiva {
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(46, 144, 172, 0.3);
}
.EstiloOpciónHorario.EstiloOpciónHorarioActiva:hover {
  color: #FFFFFF;
}

/* =========================================
   EDITOR DE TEXTO ENRIQUECIDO (QUILL)
   ========================================= */
.EstiloEditorEnriquecido {
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  /* Estilos personalizados para los botones de Quill */
}
.EstiloEditorEnriquecido .ql-toolbar.ql-snow {
  border: 1.5px solid #E2E8F0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: #F7F9FB;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.EstiloEditorEnriquecido .ql-container.ql-snow {
  border: 1.5px solid #E2E8F0;
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  font-family: inherit;
  font-size: 15px;
}
.EstiloEditorEnriquecido .ql-editor {
  min-height: 250px;
  padding: 20px;
  line-height: 1.7;
  color: #0E3D4D;
}
.EstiloEditorEnriquecido .ql-editor.ql-blank::before {
  color: #8A93A3;
  font-style: normal;
  left: 20px;
}
.EstiloEditorEnriquecido .ql-snow .ql-picker-label:hover,
.EstiloEditorEnriquecido .ql-snow .ql-picker-item:hover,
.EstiloEditorEnriquecido .ql-snow button:hover {
  color: #2E90AC !important;
}
.EstiloEditorEnriquecido .ql-snow .ql-picker-label:hover .ql-stroke,
.EstiloEditorEnriquecido .ql-snow .ql-picker-item:hover .ql-stroke,
.EstiloEditorEnriquecido .ql-snow button:hover .ql-stroke {
  stroke: #2E90AC !important;
}
.EstiloEditorEnriquecido .ql-snow .ql-picker-label:hover .ql-fill,
.EstiloEditorEnriquecido .ql-snow .ql-picker-item:hover .ql-fill,
.EstiloEditorEnriquecido .ql-snow button:hover .ql-fill {
  fill: #2E90AC !important;
}
.EstiloEditorEnriquecido .ql-snow .ql-active .ql-stroke,
.EstiloEditorEnriquecido .ql-snow .ql-active .ql-fill {
  stroke: #2E90AC !important;
  fill: #2E90AC !important;
}
.EstiloEditorEnriquecido .ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #2E90AC;
  color: #2E90AC;
}
.EstiloEditorEnriquecido .ql-snow .ql-picker-options {
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
  border: 1px solid #E2E8F0;
}

/* =========================================
   OVERLAY PROCESANDO
   ========================================= */
.EstiloOverlayProcesandoAdminCampus {
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(14, 61, 77, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.EstiloOverlayProcesandoAdminCampus.EstiloOverlayProcesandoAdminCampusVisible {
  display: flex !important;
}

.EstiloProcesandoContenedorAdminCampus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.EstiloProcesandoAroAdminCampus {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.EstiloProcesandoAroAdminCampus::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #FEA321;
  border-right-color: rgba(254, 163, 33, 0.35);
  animation: EstiloCampusGirar 0.8s linear infinite;
}

.EstiloProcesandoTextoAdminCampus {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0.3px;
}

.EstiloProcesandoPuntosAdminCampus::after {
  content: "";
  animation: EstiloCampusPuntos 1.4s steps(4, end) infinite;
}

/* =========================================
   TOASTS
   ========================================= */
.EstiloContenedorToasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 700;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}
@media (max-width: 480px) {
  .EstiloContenedorToasts {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
}

.EstiloToast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
  min-width: 300px;
  max-width: 420px;
  border-left: 4px solid #27AE60;
  animation: EstiloToastEntrada 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
  pointer-events: all;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.EstiloToast i {
  font-size: 18px;
  color: #27AE60;
  flex-shrink: 0;
}
.EstiloToast span {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #0E3D4D;
  line-height: 1.4;
}
.EstiloToast.EstiloToastError {
  border-left-color: #E5484D;
}
.EstiloToast.EstiloToastError i {
  color: #E5484D;
}
@media (max-width: 480px) {
  .EstiloToast {
    min-width: 0;
    max-width: 100%;
  }
}

@keyframes EstiloToastEntrada {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 992px) {
  .EstiloBarraLateralAdministrador {
    transform: translateX(-100%);
    box-shadow: none;
  }
  .EstiloBarraLateralAdministrador.EstiloBarraLateralAdministradorVisible {
    transform: translateX(0);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  }
  .EstiloContenidoAdministrador {
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .EstiloOrbeSeguridad,
  .EstiloTarjetaSeguridad,
  .EstiloModal,
  .EstiloToast,
  .EstiloFondoModalVisible {
    animation: none;
    transition: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloCuerpoAdministrador {
  background: #F4F6F9;
  color: #1E293B;
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

/* =========================================
   SIDEBAR
   ========================================= */
.EstiloSidebarFondo {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000 !important;
  display: block !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  pointer-events: none;
}
.EstiloSidebarFondo.Visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s;
}

#SidebarPrincipal.EstiloSidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 340px !important;
  max-width: 94vw !important;
  height: 100vh !important;
  height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  color: #1E293B !important;
  border-right: 1px solid #E2E8F0 !important;
  z-index: 1100 !important;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.22) !important;
  transform: translateX(-105%) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s ease, visibility 0s linear 0.32s !important;
}
#SidebarPrincipal.EstiloSidebar.Abierto {
  transform: translateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s ease, visibility 0s !important;
}
#SidebarPrincipal.EstiloSidebar > * {
  position: relative !important;
  z-index: 1 !important;
}
@media (max-width: 992px) {
  #SidebarPrincipal.EstiloSidebar {
    width: 100vw !important;
    max-width: 100vw !important;
    border-right: none !important;
  }
}

#SidebarPrincipal .EstiloSidebarCabecera {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid #E2E8F0 !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.07), rgba(46, 144, 172, 0.02)) !important;
}

#SidebarPrincipal .EstiloSidebarCabeceraIzquierda {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#SidebarPrincipal .EstiloSidebarCabeceraIcono {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #2E90AC, #1A6B85) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 8px 18px -6px rgba(46, 144, 172, 0.55) !important;
}

#SidebarPrincipal .EstiloSidebarTítuloMarca {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0E3D4D !important;
  letter-spacing: -0.3px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#SidebarPrincipal .EstiloSidebarBtnCierre {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  color: #64748B !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
  font-size: 15px !important;
}
#SidebarPrincipal .EstiloSidebarBtnCierre:hover {
  background: rgba(231, 76, 60, 0.1) !important;
  border-color: rgba(231, 76, 60, 0.35) !important;
  color: #E74C3C !important;
  transform: rotate(90deg) !important;
}

#SidebarPrincipal .EstiloSidebarNavegación {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 14px !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
#SidebarPrincipal .EstiloSidebarNavegación::-webkit-scrollbar {
  width: 4px !important;
}
#SidebarPrincipal .EstiloSidebarNavegación::-webkit-scrollbar-track {
  background: transparent !important;
}
#SidebarPrincipal .EstiloSidebarNavegación::-webkit-scrollbar-thumb {
  background: rgba(46, 144, 172, 0.3) !important;
  border-radius: 100px !important;
}

#SidebarPrincipal .EstiloSidebarSección {
  padding: 0 !important;
}
#SidebarPrincipal .EstiloSidebarSección > ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#SidebarPrincipal .EstiloSidebarÍtemMenú {
  list-style: none !important;
  width: 100% !important;
}

#SidebarPrincipal .EstiloSidebarEnlaceMenú {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #1E293B !important;
  text-decoration: none !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  transition: all 0.22s ease !important;
  min-width: 0 !important;
  width: 100% !important;
  text-align: left !important;
  border: none !important;
  cursor: pointer !important;
  position: relative !important;
}
#SidebarPrincipal .EstiloSidebarEnlaceMenú:hover {
  background: rgba(46, 144, 172, 0.08) !important;
  color: #2E90AC !important;
}
#SidebarPrincipal .EstiloSidebarEnlaceMenú:hover .EstiloSidebarÍconoMenú {
  transform: scale(1.06) !important;
  box-shadow: 0 8px 18px -6px rgba(46, 144, 172, 0.45) !important;
}
#SidebarPrincipal .EstiloSidebarEnlaceMenú:hover .EstiloSidebarChevron {
  color: #2E90AC !important;
}
#SidebarPrincipal .EstiloSidebarEnlaceMenú:focus-visible {
  outline: 2px solid #2E90AC !important;
  outline-offset: 2px !important;
}

#SidebarPrincipal .EstiloSidebarÍtemMenú.ÍtemAbierto > .EstiloSidebarEnlaceMenú {
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.18), rgba(46, 144, 172, 0.1)) !important;
  color: #1A6B85 !important;
  box-shadow: inset 0 0 0 1px rgba(46, 144, 172, 0.18) !important;
}
#SidebarPrincipal .EstiloSidebarÍtemMenú.ÍtemAbierto > .EstiloSidebarEnlaceMenú .EstiloSidebarÍconoMenú {
  background: linear-gradient(135deg, #2E90AC, #1A6B85) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px -6px rgba(46, 144, 172, 0.5) !important;
}
#SidebarPrincipal .EstiloSidebarÍtemMenú.ÍtemAbierto > .EstiloSidebarEnlaceMenú .EstiloSidebarÍconoMenú img {
  filter: brightness(0) invert(1) !important;
}
#SidebarPrincipal .EstiloSidebarÍtemMenú.ÍtemAbierto > .EstiloSidebarEnlaceMenú .EstiloSidebarÍconoMenú i {
  color: #FFFFFF !important;
}
#SidebarPrincipal .EstiloSidebarÍtemMenú.ÍtemAbierto > .EstiloSidebarEnlaceMenú .EstiloSidebarChevron {
  color: #2E90AC !important;
  transform: rotate(180deg) !important;
}

#SidebarPrincipal .EstiloSidebarTextoMenú {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

#SidebarPrincipal .EstiloSidebarÍconoMenú {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #2E90AC !important;
  font-size: 16px !important;
  transition: all 0.25s ease !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}
#SidebarPrincipal .EstiloSidebarÍconoMenú img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  display: block !important;
}
#SidebarPrincipal .EstiloSidebarÍconoMenú i {
  color: inherit !important;
  background: none !important;
}

#SidebarPrincipal .EstiloSidebarChevron {
  font-size: 11px !important;
  color: #8A93A3 !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease, color 0.2s ease !important;
  margin-left: auto !important;
}

#SidebarPrincipal .EstiloSidebarSubmenú {
  list-style: none !important;
  margin: 6px 0 !important;
  padding: 8px 0 8px 22px !important;
  display: none !important;
  flex-direction: column !important;
  gap: 3px !important;
  border-left: 2px solid rgba(46, 144, 172, 0.3) !important;
  border-radius: 0 10px 10px 0 !important;
  background: rgba(46, 144, 172, 0.04) !important;
}

#SidebarPrincipal .EstiloSidebarSeparadorSubmenu {
  list-style: none !important;
  height: 1px !important;
  margin: 8px 12px 8px 4px !important;
  background: linear-gradient(90deg, transparent, #E2E8F0 30%, #E2E8F0 70%, transparent) !important;
  padding: 0 !important;
}

#SidebarPrincipal .EstiloSidebarEnlaceSubmenú {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 12px !important;
  border-radius: 8px !important;
  color: #64748B !important;
  text-decoration: none !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: left !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}
#SidebarPrincipal .EstiloSidebarEnlaceSubmenú::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(46, 144, 172, 0.4) !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}
#SidebarPrincipal .EstiloSidebarEnlaceSubmenú > span:first-child {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
}
#SidebarPrincipal .EstiloSidebarEnlaceSubmenú:hover {
  background: rgba(46, 144, 172, 0.09) !important;
  color: #1A6B85 !important;
}
#SidebarPrincipal .EstiloSidebarEnlaceSubmenú:hover::before {
  background: #2E90AC !important;
  transform: scale(1.4) !important;
}
#SidebarPrincipal .EstiloSidebarEnlaceSubmenú:focus-visible {
  outline: 2px solid #2E90AC !important;
  outline-offset: 2px !important;
}

#SidebarPrincipal .EstiloSidebarSubÍtemConSubmenú.ÍtemAbierto > .EstiloSidebarEnlaceSubmenú {
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.14), rgba(46, 144, 172, 0.06)) !important;
  color: #1A6B85 !important;
  box-shadow: inset 0 0 0 1px rgba(46, 144, 172, 0.15) !important;
}
#SidebarPrincipal .EstiloSidebarSubÍtemConSubmenú.ÍtemAbierto > .EstiloSidebarEnlaceSubmenú::before {
  background: #2E90AC !important;
  transform: scale(1.2) !important;
}
#SidebarPrincipal .EstiloSidebarSubÍtemConSubmenú.ÍtemAbierto > .EstiloSidebarEnlaceSubmenú .EstiloSidebarChevron {
  color: #2E90AC !important;
  transform: rotate(180deg) !important;
}

#SidebarPrincipal .EstiloSidebarSubmenuAnidado {
  list-style: none !important;
  margin: 6px 0 !important;
  padding: 6px 0 6px 20px !important;
  display: none !important;
  flex-direction: column !important;
  gap: 3px !important;
  border-left: 2px solid rgba(46, 144, 172, 0.22) !important;
  border-radius: 0 8px 8px 0 !important;
  background: rgba(46, 144, 172, 0.03) !important;
}

#SidebarPrincipal .EstiloSidebarEnlaceAnidado {
  padding: 9px 10px !important;
  font-size: 12.5px !important;
  color: #64748B !important;
  border-radius: 6px !important;
}
#SidebarPrincipal .EstiloSidebarEnlaceAnidado::before {
  width: 4px !important;
  height: 4px !important;
}
#SidebarPrincipal .EstiloSidebarEnlaceAnidado:hover {
  color: #1A6B85 !important;
  background: rgba(46, 144, 172, 0.08) !important;
}

#SidebarPrincipal .EstiloSidebarPieSalir {
  padding: 14px 16px 18px !important;
  border-top: 1px solid #E2E8F0 !important;
  background: #F7F9FB !important;
  flex-shrink: 0 !important;
}

#SidebarPrincipal .EstiloSidebarBtnSalir {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  border-radius: 12px !important;
  background: rgba(231, 76, 60, 0.06) !important;
  border: 1px solid rgba(231, 76, 60, 0.18) !important;
  color: #E74C3C !important;
  text-decoration: none !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
}
#SidebarPrincipal .EstiloSidebarBtnSalir .EstiloSidebarÍconoMenú {
  background: rgba(231, 76, 60, 0.1) !important;
  border-color: rgba(231, 76, 60, 0.25) !important;
  color: #E74C3C !important;
}
#SidebarPrincipal .EstiloSidebarBtnSalir:hover {
  background: rgba(231, 76, 60, 0.12) !important;
  border-color: rgba(231, 76, 60, 0.4) !important;
  color: #E74C3C !important;
  transform: translateX(3px) !important;
}

/* =========================================
   TOPBAR
   ========================================= */
.TopbarPrincipal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #E2E8F0;
  z-index: 900;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.TopbarBtnHamburguesa {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #0E3D4D;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 16px;
}
.TopbarBtnHamburguesa:hover {
  background: #F0F9FC;
  border-color: rgba(46, 144, 172, 0.3);
  color: #2E90AC;
}
.TopbarBtnHamburguesa:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
}

.TopbarMarca {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.EstiloTopbarLogo {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #F0F9FC;
  padding: 5px;
  object-fit: contain;
  flex-shrink: 0;
}

.TopbarTextoMarca {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.TopbarNombreSistema {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #0E3D4D;
  line-height: 1.15;
  letter-spacing: -0.2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.TopbarSubtítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 991px) {
  .TopbarSubtítulo {
    display: none;
  }
}

.TopbarLadoDerecho {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
}

/* =========================================
   NOTIFICACIONES RESPONSIVE
   ========================================= */
.TopbarNotificacionesTrigger {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #1E293B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-shrink: 0;
}
.TopbarNotificacionesTrigger i {
  font-size: 15px;
}
.TopbarNotificacionesTrigger:hover {
  background: #F0F9FC;
  border-color: rgba(46, 144, 172, 0.3);
  color: #2E90AC;
}
@media (max-width: 576px) {
  .TopbarNotificacionesTrigger {
    width: 38px;
    height: 38px;
  }
  .TopbarNotificacionesTrigger i {
    font-size: 14px;
  }
}

.TopbarNotificacionesBadge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #E74C3C;
  color: #FFFFFF;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
  line-height: 1;
}
@media (max-width: 576px) {
  .TopbarNotificacionesBadge {
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    padding: 0 4px;
    top: -2px;
    right: -2px;
  }
}

.TopbarDropdownNotificaciones {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s ease, visibility 0s linear 0.28s, transform 0.28s ease;
  z-index: 100;
}
.TopbarDropdownNotificaciones.DropdownAbierto {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.28s ease, visibility 0s, transform 0.28s ease;
}
@media (max-width: 991px) {
  .TopbarDropdownNotificaciones {
    width: 340px;
    right: -50px;
  }
}
@media (max-width: 576px) {
  .TopbarDropdownNotificaciones {
    position: fixed;
    top: calc(64px + 6px);
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    border-radius: 16px;
    transform: translateY(-12px);
    max-height: calc(100vh - 64px - 24px);
  }
  .TopbarDropdownNotificaciones.DropdownAbierto {
    transform: translateY(0);
  }
}

.TopbarNotificacionesEncabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.06), rgba(232, 146, 10, 0.04));
  border-bottom: 1px solid #F1F5F9;
}
.TopbarNotificacionesEncabezado h4 {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #0E3D4D;
}
@media (max-width: 576px) {
  .TopbarNotificacionesEncabezado {
    padding: 12px 16px;
  }
  .TopbarNotificacionesEncabezado h4 {
    font-size: 13px;
  }
}

.TopbarNotificacionesContador {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #2E90AC;
  background: rgba(46, 144, 172, 0.12);
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 576px) {
  .TopbarNotificacionesContador {
    font-size: 9px;
    padding: 3px 8px;
  }
}

.TopbarNotificacionesLista {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 400px;
  overflow-y: auto;
}
.TopbarNotificacionesLista::-webkit-scrollbar {
  width: 4px;
}
.TopbarNotificacionesLista::-webkit-scrollbar-track {
  background: transparent;
}
.TopbarNotificacionesLista::-webkit-scrollbar-thumb {
  background: rgba(46, 144, 172, 0.3);
  border-radius: 100px;
}
@media (max-width: 576px) {
  .TopbarNotificacionesLista {
    max-height: none;
    flex: 1;
    padding: 4px;
  }
}

.TopbarNotificacionItem {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.TopbarNotificacionItem:hover {
  background: #F7F9FB;
}
.TopbarNotificacionItem.NoLeida {
  background: rgba(46, 144, 172, 0.04);
}
.TopbarNotificacionItem.NoLeida:hover {
  background: rgba(46, 144, 172, 0.08);
}
.TopbarNotificacionItem + .TopbarNotificacionItem {
  margin-top: 2px;
}
@media (max-width: 576px) {
  .TopbarNotificacionItem {
    padding: 10px 8px;
    gap: 10px;
  }
}

.TopbarNotificacionIcono {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.TopbarNotificacionIcono--Primario {
  background: rgba(46, 144, 172, 0.12);
  color: #2E90AC;
}
.TopbarNotificacionIcono--Secundario {
  background: rgba(232, 146, 10, 0.14);
  color: #E8920A;
}
.TopbarNotificacionIcono--Aviso {
  background: rgba(245, 158, 11, 0.14);
  color: #F59E0B;
}
@media (max-width: 576px) {
  .TopbarNotificacionIcono {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
}

.TopbarNotificacionTexto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.TopbarNotificacionTitulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0E3D4D;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 576px) {
  .TopbarNotificacionTitulo {
    font-size: 12px;
  }
}

.TopbarNotificacionDescripcion {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 576px) {
  .TopbarNotificacionDescripcion {
    font-size: 11.5px;
    -webkit-line-clamp: 3;
  }
}

.TopbarNotificacionHora {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #8A93A3;
  margin-top: 2px;
}
@media (max-width: 576px) {
  .TopbarNotificacionHora {
    font-size: 10px;
  }
}

.TopbarNotificacionesPie {
  padding: 10px 16px;
  border-top: 1px solid #F1F5F9;
  text-align: center;
}
.TopbarNotificacionesPie a {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #2E90AC;
  text-decoration: none;
}
.TopbarNotificacionesPie a:hover {
  text-decoration: underline;
}
@media (max-width: 576px) {
  .TopbarNotificacionesPie {
    padding: 10px 12px;
  }
  .TopbarNotificacionesPie a {
    font-size: 12px;
  }
}

/* =========================================
   USUARIO TOPBAR
   ========================================= */
.TopbarUsuarioTrigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  max-width: 340px;
}
.TopbarUsuarioTrigger:hover {
  background: #F7F9FB;
  border-color: rgba(46, 144, 172, 0.3);
}
@media (max-width: 480px) {
  .TopbarUsuarioTrigger {
    max-width: 60px;
    padding: 4px;
  }
}

.TopbarAvatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  color: #FFFFFF;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.TopbarUsuarioTextos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 480px) {
  .TopbarUsuarioTextos {
    display: none;
  }
}

.TopbarUsuarioNombre {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0E3D4D;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.TopbarUsuarioIndicativo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #64748B;
  line-height: 1.2;
  white-space: nowrap;
}

.TopbarUsuarioChevron {
  font-size: 10px;
  color: #8A93A3;
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.TopbarUsuarioTrigger:hover .TopbarUsuarioChevron {
  transform: translateY(1px);
}
@media (max-width: 480px) {
  .TopbarUsuarioChevron {
    display: none;
  }
}

.TopbarDropdownUsuario {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 32px);
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s ease, visibility 0s linear 0.28s, transform 0.28s ease;
  z-index: 100;
}
.TopbarDropdownUsuario.DropdownAbierto {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.28s ease, visibility 0s, transform 0.28s ease;
}

.EstiloMenuUsuarioEncabezado {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.08), rgba(232, 146, 10, 0.05));
  border-bottom: 1px solid #F1F5F9;
}
.EstiloMenuUsuarioEncabezado > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.EstiloMenuUsuarioAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  color: #FFFFFF;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}

.EstiloMenuUsuarioNombre {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0E3D4D;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.EstiloMenuUsuarioRolPill {
  display: inline-block;
  align-self: flex-start;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #2E90AC;
  background: rgba(46, 144, 172, 0.12);
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.EstiloMenuUsuarioOpcion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  color: #1E293B !important;
  text-decoration: none !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloMenuUsuarioOpcion i {
  width: 16px;
  text-align: center;
  color: #64748B;
  font-size: 13px;
}
.EstiloMenuUsuarioOpcion:hover {
  background: #F7F9FB;
  color: #2E90AC !important;
}
.EstiloMenuUsuarioOpcion:hover i {
  color: #2E90AC;
}

.EstiloMenuUsuarioDivisor {
  height: 1px;
  background: #F1F5F9;
  margin: 4px 0;
}

.EstiloMenuUsuarioSalir {
  color: #E74C3C !important;
}
.EstiloMenuUsuarioSalir i {
  color: #E74C3C !important;
}
.EstiloMenuUsuarioSalir:hover {
  background: rgba(231, 76, 60, 0.08);
  color: #E74C3C !important;
}

/* =========================================
   CONTENIDO
   ========================================= */
.EstiloContenido {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  box-sizing: border-box;
  padding: 20px clamp(16px, 2.5vw, 32px) 24px;
  padding-top: calc(64px + 20px);
}

.EstiloFooter {
  width: 100%;
  margin-top: 8px;
  padding: 0 clamp(16px, 2.5vw, 32px) 32px;
  box-sizing: border-box;
}

/* =========================================
   TARJETA DEL COLEGIO
   ========================================= */
.EstiloTarjetaColegio {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #0E3D4D 0%, #1A6B85 60%, #2E90AC 100%);
  box-shadow: 0 20px 50px rgba(14, 61, 77, 0.25);
  isolation: isolate;
  padding: clamp(20px, 2.5vw, 32px);
  color: #FFFFFF;
}

.EstiloColegioFondo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.EstiloColegioOrbe {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.EstiloColegioOrbe--Uno {
  width: 380px;
  height: 380px;
  background: rgba(254, 163, 33, 0.2);
  top: -140px;
  right: -100px;
}
.EstiloColegioOrbe--Dos {
  width: 300px;
  height: 300px;
  background: rgba(78, 195, 228, 0.18);
  bottom: -140px;
  left: -80px;
}

.EstiloColegioTrama {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, white, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, white, transparent 85%);
}

.EstiloColegioContenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(16px, 2.5vw, 20px);
}

.EstiloColegioEscudoWrap {
  position: relative;
  width: clamp(96px, 12vw, 120px);
  height: clamp(96px, 12vw, 120px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.EstiloColegioEscudoAnillo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(254, 163, 33, 0.55);
  animation: EstiloGirarAnilloColegio 28s linear infinite;
  pointer-events: none;
}

@keyframes EstiloGirarAnilloColegio {
  to {
    transform: rotate(360deg);
  }
}
.EstiloColegioEscudoImagen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), inset 0 0 0 3px rgba(255, 255, 255, 0.25);
  z-index: 1;
}

.EstiloColegioEscudo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(46, 144, 172, 0.25));
}

.EstiloColegioTextos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.EstiloColegioNombre {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.5px;
  text-wrap: balance;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  overflow-wrap: anywhere;
}

.EstiloColegioResolucion {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  margin: 0;
  max-width: 640px;
  text-wrap: balance;
}

.EstiloColegioDatos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  width: 100%;
}

.EstiloColegioDato {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
.EstiloColegioDato i {
  font-size: 10px;
  color: #FEA321;
  flex-shrink: 0;
}
.EstiloColegioDato strong {
  color: #FFFFFF;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.EstiloColegioDatoLabel {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.EstiloEstadoColegio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #0D4A2F;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.EstiloEstadoColegio i {
  font-size: 8px;
  color: #27AE60;
  animation: EstiloPulsoConexion 1.8s ease-in-out infinite;
}
.EstiloEstadoColegio[data-estado=Inestable] {
  color: #7A3A00;
}
.EstiloEstadoColegio[data-estado=Inestable] i {
  color: #F59E0B;
}
.EstiloEstadoColegio[data-estado=SinConexion] {
  color: #5C0A0A;
}
.EstiloEstadoColegio[data-estado=SinConexion] i {
  color: #E74C3C;
}

.EstiloColegioLema {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0 0;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid #FEA321;
  border-radius: 0 8px 8px 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  font-style: italic;
  line-height: 1.55;
}
.EstiloColegioLema i {
  color: #FEA321;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 3px;
}

@keyframes EstiloPulsoConexion {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
/* =========================================
   SALUDO
   ========================================= */
.EstiloSaludo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  background: linear-gradient(135deg, #0E3D4D 0%, #1A6B85 45%, #2E90AC 100%);
  position: relative;
  overflow: hidden;
}
.EstiloSaludo::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 163, 33, 0.22), transparent 70%);
  pointer-events: none;
}

.EstiloSaludoIzquierda {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.EstiloSaludoIconoCirculo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.EstiloSaludoIconoCirculo i {
  font-size: 22px;
  color: #F9EB9B;
}

.EstiloSaludoTextos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.EstiloSaludoTexto {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.2px;
}

.EstiloSaludoSubtexto {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.45;
}

.EstiloFechaHora {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.EstiloFecha {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  text-transform: capitalize;
}

.EstiloHora {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* =========================================
   RADIOGRAFÍA + LATERAL
   ========================================= */
.EstiloFilaInferior {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.EstiloRadiografia,
.EstiloColumnaLateral {
  min-width: 0;
  align-self: start;
}

.EstiloRadiografia {
  container-name: Radiografia;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: fit-content;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
}

.EstiloColumnaLateral {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: fit-content;
}

.EstiloRadiografiaEncabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.EstiloRadiografiaEncabezado h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #0E3D4D;
  letter-spacing: -0.3px;
}
.EstiloRadiografiaEncabezado h2 i {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(46, 144, 172, 0.12);
  color: #2E90AC;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.EstiloBadgeVigencia {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.1), rgba(232, 146, 10, 0.08));
  border: 1px solid rgba(46, 144, 172, 0.22);
  color: #2E90AC;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.EstiloBadgeVigencia strong {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1A6B85;
}
.EstiloBadgeVigencia i {
  font-size: 12px;
}

.EstiloRadiografiaKpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.EstiloRadiografiaGraficas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.EstiloTarjetaKpi {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #F7F9FB, #FFFFFF);
  border: 1px solid #F1F5F9;
  border-left: 4px solid transparent;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}
.EstiloTarjetaKpi::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.08;
  pointer-events: none;
}
.EstiloTarjetaKpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
}

.EstiloTarjetaKpiPrimaria {
  border-left-color: #2E90AC;
}
.EstiloTarjetaKpiPrimaria::after {
  background: #2E90AC;
}

.EstiloTarjetaKpiSecundaria {
  border-left-color: #E8920A;
  align-items: flex-start;
}
.EstiloTarjetaKpiSecundaria::after {
  background: #E8920A;
}

.EstiloTarjetaKpiTerciaria {
  border-left-color: #7C3AED;
  align-items: flex-start;
}
.EstiloTarjetaKpiTerciaria::after {
  background: #7C3AED;
}

.EstiloKpiContenido {
  flex: 1;
  min-width: 0;
}

.EstiloIconoKpiCirculo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.EstiloIconoKpiCirculoPrimario {
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
}

.EstiloIconoKpiCirculoSecundario {
  background: linear-gradient(135deg, #E8920A, #C97D10);
}

.EstiloIconoKpiCirculoTerciaria {
  background: linear-gradient(135deg, #7C3AED, rgb(91.3451162791, 19.5739534884, 214.2260465116));
}

.EstiloKpiValor {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: #0E3D4D;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.EstiloKpiEtiqueta {
  display: block;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  line-height: 1.4;
  margin-top: 2px;
}

.EstiloBarraProgreso {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #E2E8F0;
  overflow: hidden;
  margin-top: 8px;
}

.EstiloBarraProgresoRelleno {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2E90AC, #4EC3E4);
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.EstiloBarraProgresoTexto {
  display: block;
  margin-top: 5px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  color: #8A93A3;
}

.EstiloTarjetaGrafica {
  min-width: 0;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #F7F9FB, #FFFFFF);
  border: 1px solid #F1F5F9;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.EstiloGraficaTitulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0E3D4D;
  align-self: flex-start;
}
.EstiloGraficaTitulo i {
  color: #2E90AC;
  font-size: 13px;
}

.EstiloGraficaContenedor {
  width: 140px;
  height: 140px;
  max-width: 100%;
  position: relative;
}

.EstiloLeyendaGrafica {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
}
.EstiloLeyendaGrafica li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748B;
}
.EstiloLeyendaGrafica li strong {
  margin-left: auto;
  color: #0E3D4D;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.EstiloPuntoLeyenda {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.EstiloReporteNuevos {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px dashed #E2E8F0;
}

.EstiloReporteNuevosEncabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 12px;
}
.EstiloReporteNuevosEncabezado h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #0E3D4D;
}
.EstiloReporteNuevosEncabezado h3 i {
  color: #7C3AED;
}

.EstiloReporteNuevosTotal {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
}
.EstiloReporteNuevosTotal strong {
  color: #7C3AED;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.EstiloGraficaBarras {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #F7F9FB, #FFFFFF);
  border: 1px solid #F1F5F9;
  border-radius: 16px;
  padding: 16px 10px 8px;
}
.EstiloGraficaBarras svg {
  display: block;
  max-width: 100%;
}

.EstiloRadiografiaDetalle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.EstiloDetallePill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #F7F9FB;
  border: 1px solid #E2E8F0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloDetallePill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--colorpill, #2E90AC);
  flex-shrink: 0;
}
.EstiloDetallePill strong {
  color: #0E3D4D;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.EstiloDetallePill:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.EstiloRadiografiaPie {
  margin-top: auto;
  padding-top: 20px;
}

.EstiloRadiografiaPieContenido {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.06), rgba(232, 146, 10, 0.06));
  border: 1px solid rgba(46, 144, 172, 0.14);
}

.EstiloRadiografiaPieTexto {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  line-height: 1.5;
}
.EstiloRadiografiaPieTexto i {
  color: #2E90AC;
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

.EstiloRadiografiaPieEnlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  color: #FFFFFF !important;
  text-decoration: none !important;
  text-align: center;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 20px -6px rgba(46, 144, 172, 0.4);
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloRadiografiaPieEnlace:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloRadiografiaPieEnlace:hover {
  transform: translateY(-2px);
  color: #FFFFFF !important;
  box-shadow: 0 12px 26px -6px rgba(46, 144, 172, 0.5);
}

.EstiloSeccionAccesosDirectos,
.EstiloTarjetaSesion {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
}

.EstiloTituloSeccionLateral,
.EstiloSesionTitulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #0E3D4D;
}
.EstiloTituloSeccionLateral i,
.EstiloSesionTitulo i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: rgba(46, 144, 172, 0.12);
  color: #2E90AC;
}

.EstiloTituloSeccionLateral i {
  background: rgba(232, 146, 10, 0.14);
  color: #E8920A;
}

.EstiloSesionTitulo i {
  background: rgba(46, 144, 172, 0.12);
  color: #2E90AC;
}

.EstiloAccesosDirectos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.EstiloAccesoDirecto {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 64px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #F7F9FB, #FFFFFF);
  border: 1px solid #F1F5F9;
  border-radius: 16px;
  text-decoration: none !important;
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloAccesoDirecto:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloAccesoDirecto:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1);
  border-color: rgba(46, 144, 172, 0.2);
}
.EstiloAccesoDirecto:hover .EstiloAccesoDirectoFlecha {
  transform: translateX(3px);
  opacity: 1;
  color: #2E90AC;
}

.EstiloAccesoDirectoIcono {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.EstiloAccesoDirectoIconoPrimario {
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
}

.EstiloAccesoDirectoIconoSecundario {
  background: linear-gradient(135deg, #E8920A, #C97D10);
}

.EstiloAccesoDirectoIconoInfo {
  background: linear-gradient(135deg, #3B82F6, rgb(10.7034146341, 95.1414634146, 233.0965853659));
}

.EstiloAccesoDirectoIconoPregunta {
  background: linear-gradient(135deg, #7C3AED, rgb(91.3451162791, 19.5739534884, 214.2260465116));
}

.EstiloAccesoDirectoTexto {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0E3D4D;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.EstiloAccesoDirectoFlecha {
  font-size: 11px;
  color: #8A93A3;
  opacity: 0.5;
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.EstiloListaConexion {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.EstiloItemConexion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  transition: background 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloItemConexion:hover {
  background: #F7F9FB;
}
.EstiloItemConexion + .EstiloItemConexion {
  border-top: 1px dashed #E2E8F0;
}

.EstiloItemConexionIcono {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.12), rgba(46, 144, 172, 0.06));
  color: #2E90AC;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}

.EstiloItemConexionTextos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.EstiloSesionEtiqueta {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #8A93A3;
}

.EstiloSesionValor {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #0E3D4D;
  overflow-wrap: anywhere;
}

.EstiloBotonSoporteEmergencia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(231, 76, 60, 0.08);
  border: 1px dashed rgba(231, 76, 60, 0.35);
  color: #E74C3C !important;
  text-decoration: none !important;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.35;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotonSoporteEmergencia:focus-visible {
  outline: 2px solid #E74C3C;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotonSoporteEmergencia i {
  font-size: 15px;
  flex-shrink: 0;
}
.EstiloBotonSoporteEmergencia:hover {
  background: rgba(231, 76, 60, 0.14);
}

/* =========================================
   FOOTER
   ========================================= */
.EstiloFooterTarjeta {
  position: relative;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  padding: 32px 24px 20px;
  overflow: hidden;
}
.EstiloFooterTarjeta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #1A6B85 0%, #2E90AC 100%);
}

.EstiloFooterContenido {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 24px;
}

.EstiloFooterMarcaColumna {
  grid-column: auto;
}

.EstiloFooterColumna {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.EstiloFooterColumna a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1E293B !important;
  text-decoration: none !important;
  overflow-wrap: anywhere;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloFooterColumna a:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloFooterColumna a i {
  width: 14px;
  flex-shrink: 0;
  color: #2E90AC;
}
.EstiloFooterColumna a:hover {
  color: #2E90AC !important;
}
.EstiloFooterColumna a:hover i {
  color: #2E90AC;
}
.EstiloFooterColumna span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748B;
  overflow-wrap: anywhere;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.EstiloFooterColumna span i {
  width: 14px;
  flex-shrink: 0;
  color: #2E90AC;
}

.EstiloFooterTituloColumna {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #8A93A3;
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(46, 144, 172, 0.15);
  display: inline-block;
  align-self: flex-start;
}

.EstiloFooterLogoFila {
  display: flex;
  align-items: center;
  gap: 12px;
}
.EstiloFooterLogoFila img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #F0F9FC;
  padding: 5px;
  object-fit: contain;
}

.EstiloFooterMarca {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #0E3D4D;
  letter-spacing: -0.2px;
}

.EstiloFooterDescripcion {
  margin: 0;
  max-width: 340px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.65;
}

.EstiloFooterRedes {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}
.EstiloFooterRedes a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F7F9FB;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 17px;
  border: 1.5px solid transparent;
  text-decoration: none !important;
  position: relative;
}
.EstiloFooterRedes a:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloFooterRedes a i {
  color: inherit;
  transition: transform 0.25s ease;
}
.EstiloFooterRedes a:hover i {
  transform: scale(1.15);
}

.EstiloFooterRedEstilo--WhatsApp {
  color: #25D366 !important;
}
.EstiloFooterRedEstilo--WhatsApp:hover {
  background: #25D366 !important;
  color: #FFFFFF !important;
  border-color: #25D366 !important;
  box-shadow: 0 10px 20px -6px rgba(37, 211, 102, 0.5) !important;
  transform: translateY(-3px) !important;
}

.EstiloFooterRedEstilo--YouTube {
  color: #FF0000 !important;
}
.EstiloFooterRedEstilo--YouTube:hover {
  background: #FF0000 !important;
  color: #FFFFFF !important;
  border-color: #FF0000 !important;
  box-shadow: 0 10px 20px -6px rgba(255, 0, 0, 0.5) !important;
  transform: translateY(-3px) !important;
}

.EstiloFooterRedEstilo--Correo {
  color: #2E90AC !important;
}
.EstiloFooterRedEstilo--Correo:hover {
  background: #2E90AC !important;
  color: #FFFFFF !important;
  border-color: #2E90AC !important;
  box-shadow: 0 10px 20px -6px rgba(46, 144, 172, 0.5) !important;
  transform: translateY(-3px) !important;
}

.EstiloFooterDivisor {
  height: 1px;
  background: linear-gradient(90deg, transparent, #E2E8F0 20%, #E2E8F0 80%, transparent);
  margin: 24px 0 16px;
}

.EstiloFooterDerechos {
  display: block;
  text-align: center;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #8A93A3;
  line-height: 1.5;
}

/* =========================================
   WHATSAPP FLOTANTE
   ========================================= */
.EstiloBotonWhatsAppFlotante {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #25D366, #1EBE5D);
  color: #FFFFFF;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4);
  z-index: 900;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotonWhatsAppFlotante:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 16px 40px rgba(37, 211, 102, 0.5);
}
.EstiloBotonWhatsAppFlotante:active {
  transform: translateY(-2px) scale(0.98);
}
@media (max-width: 480px) {
  .EstiloBotonWhatsAppFlotante {
    bottom: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
    font-size: 22px;
  }
}

/* =========================================
   MODALES DE CONEXIÓN
   ========================================= */
.EstiloModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 33, 94, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.EstiloModalOverlay.EstiloModalVisible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0s;
}

.EstiloModalConexion {
  width: 100%;
  max-width: 420px;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.18), 0 4px 20px rgba(0, 0, 0, 0.08);
  animation: EstiloModalEntrar 0.35s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
.EstiloModalConexion h3 {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #0E3D4D;
  margin: 0 0 8px;
}
.EstiloModalConexion p {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.6;
  margin: 0 0 16px;
}

@keyframes EstiloModalEntrar {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.EstiloModalIcono {
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(46, 144, 172, 0.12);
  color: #2E90AC;
}

.EstiloModalIconoWhatsApp {
  background: rgba(37, 211, 102, 0.12);
  color: #25D366;
}

.EstiloModalContactoWhatsApp {
  text-align: left;
}
.EstiloModalContactoWhatsApp h3 {
  text-align: center;
}
.EstiloModalContactoWhatsApp > p {
  text-align: center;
}

.EstiloModalAdvertencia .EstiloModalIcono {
  background: rgba(245, 158, 11, 0.14);
  color: #F59E0B;
}

.EstiloModalError .EstiloModalIcono {
  background: rgba(231, 76, 60, 0.12);
  color: #E74C3C;
}

.EstiloFormularioContacto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.EstiloFormularioContacto label {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
}
.EstiloFormularioContacto input, .EstiloFormularioContacto select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  font-family: inherit;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #0E3D4D;
  outline: none;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloFormularioContacto input:focus, .EstiloFormularioContacto select:focus {
  border-color: #2E90AC;
  box-shadow: 0 0 0 4px rgba(46, 144, 172, 0.12);
}
.EstiloFormularioContacto input:disabled, .EstiloFormularioContacto select:disabled {
  background: #F7F9FB;
  color: #64748B;
}

.EstiloModalContactoBotones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.EstiloBotonModal {
  min-height: 46px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.EstiloBotonModal:focus-visible {
  outline: 2px solid #2E90AC;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotonModal:hover {
  transform: translateY(-2px);
}
.EstiloBotonModal:active {
  transform: translateY(0);
}

.EstiloBotonModalCancelar {
  background: #F7F9FB;
  color: #1E293B;
  border: 1.5px solid #E2E8F0;
}
.EstiloBotonModalCancelar:hover {
  background: #F4F6F9;
}

.EstiloBotonModalWhatsApp {
  background: linear-gradient(135deg, #25D366, #1EBE5D);
  color: #FFFFFF;
  box-shadow: 0 8px 20px -6px rgba(37, 211, 102, 0.5);
}

.EstiloBotonModalAdvertencia {
  background: linear-gradient(135deg, #F59E0B, rgb(196.9291338583, 126.7125984252, 8.0708661417));
  color: #FFFFFF;
  width: 100%;
  box-shadow: 0 8px 20px -6px rgba(245, 158, 11, 0.5);
}

.EstiloModalSpinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 3px solid rgba(46, 144, 172, 0.2);
  border-top-color: #2E90AC;
  border-radius: 50%;
  animation: EstiloGirarSpinner 0.8s linear infinite;
}

@keyframes EstiloGirarSpinner {
  to {
    transform: rotate(360deg);
  }
}
/* =========================================
   CONTENT QUERIES
   ========================================= */
@container Radiografia (min-width: 520px) {
  .EstiloRadiografiaPieContenido {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
  }
  .EstiloRadiografiaPieTexto {
    max-width: 480px;
    align-items: center;
  }
  .EstiloRadiografiaPieEnlace {
    white-space: nowrap;
  }
}
/* =========================================
   RESPONSIVE
   ========================================= */
@media (min-width: 640px) {
  .EstiloColegioContenido {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 24px;
  }
  .EstiloColegioTextos {
    align-items: flex-start;
  }
  .EstiloColegioDatos {
    justify-content: flex-start;
  }
  .EstiloEstadoColegio {
    align-self: flex-start;
  }
}
@media (min-width: 720px) {
  .EstiloSaludo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    gap: 14px;
  }
  .EstiloSaludoIzquierda {
    flex: 1;
    width: auto;
    gap: 16px;
  }
  .EstiloSaludoIconoCirculo {
    width: 56px;
    height: 56px;
  }
  .EstiloSaludoTexto {
    font-size: 1.3rem;
  }
  .EstiloFechaHora {
    align-items: flex-end;
    text-align: right;
    gap: 4px;
  }
}
@media (min-width: 992px) {
  .EstiloFilaInferior {
    grid-template-columns: minmax(0, 2.2fr) minmax(320px, 1fr);
    gap: 20px;
  }
  .EstiloColumnaLateral {
    gap: 20px;
  }
}
@media (max-width: 991px) {
  .TopbarSubtítulo {
    display: none;
  }
  .TopbarNombreSistema {
    font-size: 13px;
  }
  .EstiloFooterContenido {
    grid-template-columns: 1fr 1fr;
  }
  .EstiloFooterMarcaColumna {
    grid-column: 1/-1;
  }
}
@media (max-width: 640px) {
  .EstiloFooterContenido {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .EstiloFooterMarcaColumna {
    grid-column: auto;
  }
  .EstiloFooterTarjeta {
    padding: 20px 16px;
  }
  .EstiloFooterRedes a {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .EstiloColegioLema {
    font-size: 12px;
    padding: 12px 16px;
  }
}
@media (max-width: 576px) {
  .TopbarUsuarioTextos,
  .TopbarUsuarioChevron {
    display: none;
  }
  .TopbarUsuarioTrigger {
    padding: 4px;
  }
  .EstiloFechaHora {
    align-items: flex-start;
  }
  .EstiloHora {
    font-size: 18px;
  }
  .TopbarNombreSistema {
    font-size: 12px;
  }
  .EstiloTopbarLogo {
    width: 32px;
    height: 32px;
  }
  .EstiloContenido {
    padding-left: 12px;
    padding-right: 12px;
  }
  .EstiloFooter {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #SidebarPrincipal.EstiloSidebar,
  .EstiloSidebarFondo,
  .EstiloBarraProgresoRelleno,
  .TopbarDropdownNotificaciones,
  .TopbarDropdownUsuario,
  .EstiloColegioEscudoAnillo {
    transition: none;
  }
  .EstiloEstadoColegio i,
  .EstiloColegioEscudoAnillo,
  .EstiloModalSpinner {
    animation: none;
  }
  .EstiloModalConexion {
    animation: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloCuerpoError {
  min-height: 100vh;
  min-height: 100svh;
  background: linear-gradient(150deg, #0E3D4D 0%, #1A6B85 45%, #2E90AC 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}
.EstiloCuerpoError::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(254, 163, 33, 0.15) 0%, transparent 70%);
  top: -150px;
  right: -150px;
  pointer-events: none;
}
.EstiloCuerpoError::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1.2px, transparent 1.2px);
  background-size: 32px 32px;
  pointer-events: none;
}

.EstiloContenedorError {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  text-align: center;
  color: #FFFFFF;
}

.EstiloCódigoError {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(5rem, 20vw, 9rem);
  font-weight: 800;
  background: linear-gradient(135deg, #FEA321, #4EC3E4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: 20px;
  display: block;
  animation: EstiloErrorEntrada 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.EstiloÍconoError {
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: EstiloErrorEntrada 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.EstiloTítuloError {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 16px;
  line-height: 1.25;
  animation: EstiloErrorEntrada 0.6s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.EstiloMensajeError {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
  margin: 0 0 32px;
  max-width: 440px;
  margin-inline: auto;
  animation: EstiloErrorEntrada 0.6s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.EstiloAccionesError {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  animation: EstiloErrorEntrada 0.6s 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.EstiloBotónErrorPrimario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  min-height: 44px;
  border-radius: 8px;
  background: #FFFFFF;
  color: #1A6B85 !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónErrorPrimario:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónErrorPrimario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
}

.EstiloBotónErrorSecundario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  min-height: 44px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloBotónErrorSecundario:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: inherit;
}
.EstiloBotónErrorSecundario:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

@keyframes EstiloErrorEntrada {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .EstiloCódigoError,
  .EstiloÍconoError,
  .EstiloTítuloError,
  .EstiloMensajeError,
  .EstiloAccionesError {
    animation: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
html, body {
  min-height: 100%;
}

.EstiloCuerpoPagina {
  background: #F4F6F9;
  color: #1E293B;
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  box-sizing: border-box;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.EstiloCuerpoPaginaFija {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.EstiloPagina {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px clamp(12px, 2vw, 24px) 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .EstiloPagina {
    padding: 12px 16px 16px;
  }
}
@media (max-width: 480px) {
  .EstiloPagina {
    padding: 12px 8px 16px;
    gap: 12px;
  }
}

.EstiloCuerpoPaginaFija .EstiloPagina,
.EstiloPagina:has(.EstiloPaginaCardTabla) {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

body:has(.EstiloPaginaCardTabla) {
  height: 100%;
  overflow: hidden;
}

.EstiloPaginaHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #0E3D4D 0%, #1A6B85 55%, #2E90AC 130%);
  border-radius: 16px;
  color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 12px 34px -14px rgba(14, 61, 77, 0.55), 0 2px 8px -3px rgba(14, 61, 77, 0.3);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  isolation: isolate;
}
.EstiloPaginaHeader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(254, 163, 33, 0.22), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(255, 255, 255, 0.07), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.EstiloPaginaHeader::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 163, 33, 0.16), transparent 70%);
  pointer-events: none;
  animation: EstiloHeaderHalo 14s ease-in-out infinite;
  z-index: 0;
  will-change: transform, opacity;
}
@media (max-width: 480px) {
  .EstiloPaginaHeader {
    padding: 12px 12px;
    gap: 12px;
    border-radius: 12px;
  }
}

@keyframes EstiloHeaderHalo {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translate3d(-14px, 10px, 0) scale(1.08);
    opacity: 1;
  }
}
.EstiloPaginaHeaderTexto {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.EstiloPaginaHeaderTitulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 480px) {
  .EstiloPaginaHeaderTitulo {
    font-size: 0.95rem;
    gap: 6px;
  }
}

.EstiloPaginaHeaderSeparador {
  color: rgba(255, 255, 255, 0.42);
  font-size: 1.1em;
  line-height: 1;
}

.EstiloPaginaHeaderSección {
  opacity: 0.78;
  font-weight: 600;
  font-size: 0.85em;
}

.EstiloPaginaHeaderVersión {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px -3px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}
.EstiloPaginaHeaderVersión i {
  font-size: 9px;
  opacity: 0.9;
}
@media (max-width: 480px) {
  .EstiloPaginaHeaderVersión {
    height: 18px;
    padding: 0 6px;
    font-size: 9px;
  }
}

.EstiloPaginaHeaderSubtitulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  margin: 3px 0 0;
  line-height: 1.35;
}
@media (max-width: 480px) {
  .EstiloPaginaHeaderSubtitulo {
    display: none;
  }
}

.EstiloPaginaHeaderIcono {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  z-index: 1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 22px -14px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloPaginaHeaderIcono:hover {
  transform: translateY(-1px) rotate(-1.5deg);
}
.EstiloPaginaHeaderIcono img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
@media (max-width: 480px) {
  .EstiloPaginaHeaderIcono {
    width: 44px;
    height: 44px;
    padding: 6px;
    border-radius: 8px;
  }
}

.EstiloPaginaCard {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(14, 61, 77, 0.04);
  border: 1px solid #E2E8F0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex-shrink: 0;
  position: relative;
}

.EstiloPaginaCardBody {
  padding: 16px;
}
@media (max-width: 480px) {
  .EstiloPaginaCardBody {
    padding: 12px;
  }
}

.EstiloPaginaCardTabla {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.EstiloCampo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.EstiloCampoLabel {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #0E3D4D;
  letter-spacing: 0;
  margin-bottom: 1px;
}

.EstiloEntrada,
.EstiloSelect {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  font-family: inherit;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0E3D4D;
  outline: none;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(14, 61, 77, 0.03);
}
.EstiloEntrada::placeholder,
.EstiloSelect::placeholder {
  color: #8A93A3;
  font-weight: 400;
}
.EstiloEntrada:hover:not(:focus):not(:disabled),
.EstiloSelect:hover:not(:focus):not(:disabled) {
  border-color: rgba(46, 144, 172, 0.4);
}
.EstiloEntrada:focus,
.EstiloSelect:focus {
  border-color: #2E90AC;
  box-shadow: 0 0 0 4px rgba(46, 144, 172, 0.12), 0 1px 2px rgba(14, 61, 77, 0.06);
}
.EstiloEntrada:focus-visible,
.EstiloSelect:focus-visible {
  outline: none;
}
.EstiloEntrada:disabled,
.EstiloSelect:disabled {
  background: #F7F9FB;
  cursor: not-allowed;
  opacity: 0.75;
}
@media (max-width: 480px) {
  .EstiloEntrada,
  .EstiloSelect {
    height: 38px;
    font-size: 12px;
  }
}

.EstiloEntradaCentrada {
  text-align: center;
}

.EstiloSelect {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
  transition: background-position 0.2s ease cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloSelect:hover:not(:focus) {
  background-position: right 11px center;
}

.EstiloFormularioBotones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #E2E8F0;
}
@media (max-width: 480px) {
  .EstiloFormularioBotones {
    padding-top: 12px;
    margin-top: 12px;
    gap: 8px;
  }
  .EstiloFormularioBotones > button, .EstiloFormularioBotones > input[type=button], .EstiloFormularioBotones > a {
    flex: 1;
    min-width: calc(50% - 8px);
  }
}

.EstiloBtnPrincipal,
.EstiloBtnSecundario,
.EstiloBtnCancelar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-family: inherit;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  white-space: nowrap;
  border: 1.5px solid transparent;
  text-decoration: none !important;
  position: relative;
  overflow: visible;
  user-select: none;
}
.EstiloBtnPrincipal::before,
.EstiloBtnSecundario::before,
.EstiloBtnCancelar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 60%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  overflow: hidden;
}
.EstiloBtnPrincipal i,
.EstiloBtnSecundario i,
.EstiloBtnCancelar i {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.EstiloBtnPrincipal:hover:not(:disabled):not(.aspNetDisabled)::before,
.EstiloBtnSecundario:hover:not(:disabled):not(.aspNetDisabled)::before,
.EstiloBtnCancelar:hover:not(:disabled):not(.aspNetDisabled)::before {
  opacity: 1;
}
.EstiloBtnPrincipal:focus-visible,
.EstiloBtnSecundario:focus-visible,
.EstiloBtnCancelar:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.35);
}
.EstiloBtnPrincipal:disabled, .EstiloBtnPrincipal.aspNetDisabled, .EstiloBtnPrincipal[disabled],
.EstiloBtnSecundario:disabled,
.EstiloBtnSecundario.aspNetDisabled,
.EstiloBtnSecundario[disabled],
.EstiloBtnCancelar:disabled,
.EstiloBtnCancelar.aspNetDisabled,
.EstiloBtnCancelar[disabled] {
  opacity: 0.55;
  cursor: not-allowed !important;
  transform: none !important;
  filter: grayscale(0.35);
  box-shadow: none !important;
}
.EstiloBtnPrincipal:disabled::before, .EstiloBtnPrincipal.aspNetDisabled::before, .EstiloBtnPrincipal[disabled]::before,
.EstiloBtnSecundario:disabled::before,
.EstiloBtnSecundario.aspNetDisabled::before,
.EstiloBtnSecundario[disabled]::before,
.EstiloBtnCancelar:disabled::before,
.EstiloBtnCancelar.aspNetDisabled::before,
.EstiloBtnCancelar[disabled]::before {
  opacity: 0 !important;
}
.EstiloBtnPrincipal:active:not(:disabled):not(.aspNetDisabled),
.EstiloBtnSecundario:active:not(:disabled):not(.aspNetDisabled),
.EstiloBtnCancelar:active:not(:disabled):not(.aspNetDisabled) {
  transform: translateY(0) scale(0.98);
}
@media (max-width: 480px) {
  .EstiloBtnPrincipal,
  .EstiloBtnSecundario,
  .EstiloBtnCancelar {
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }
  .EstiloBtnPrincipal i,
  .EstiloBtnSecundario i,
  .EstiloBtnCancelar i {
    font-size: 12px;
  }
}

.EstiloBtnPrincipal {
  background: linear-gradient(135deg, #2E90AC 0%, #1A6B85 100%);
  color: #FFFFFF !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 16px -6px rgba(46, 144, 172, 0.5);
}
.EstiloBtnPrincipal:hover:not(:disabled):not(.aspNetDisabled) {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 12px 24px -8px rgba(46, 144, 172, 0.6);
}
.EstiloBtnPrincipal:disabled, .EstiloBtnPrincipal.aspNetDisabled, .EstiloBtnPrincipal[disabled] {
  background: linear-gradient(135deg, #64748B 0%, #1E293B 100%);
}

.EstiloBtnSecundario {
  background: #FFFFFF;
  border-color: #E2E8F0;
  color: #0E3D4D !important;
  box-shadow: 0 1px 2px rgba(14, 61, 77, 0.04);
}
.EstiloBtnSecundario:hover:not(:disabled):not(.aspNetDisabled) {
  background: #F7F9FB;
  border-color: rgba(46, 144, 172, 0.35);
  color: #2E90AC !important;
  transform: translateY(-1px);
}

.EstiloBtnCancelar {
  background: linear-gradient(135deg, #E8920A 0%, #C97D10 100%);
  color: #FFFFFF !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 16px -6px rgba(232, 146, 10, 0.5);
}
.EstiloBtnCancelar:hover:not(:disabled):not(.aspNetDisabled) {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 12px 24px -8px rgba(232, 146, 10, 0.6);
}

.EstiloBtnIcono {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  color: #2E90AC;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-shrink: 0;
}
.EstiloBtnIcono:hover {
  background: #F0F9FC;
  border-color: #2E90AC;
  transform: translateY(-1px);
}
.EstiloBtnIcono:active {
  transform: translateY(0) scale(0.96);
}
.EstiloBtnIcono:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.3);
}
.EstiloBtnIcono:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.EstiloLinkAccion {
  background: none;
  border: none;
  padding: 4px 2px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #2E90AC;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  font-family: inherit;
  transition: color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloLinkAccion::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloLinkAccion:hover {
  color: #1A6B85;
}
.EstiloLinkAccion:hover::after {
  transform: scaleX(1);
}
.EstiloLinkAccion:focus-visible {
  outline: none;
  color: #1A6B85;
}
.EstiloLinkAccion:focus-visible::after {
  transform: scaleX(1);
}

.EstiloTooltip {
  position: relative;
}
.EstiloTooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 12px;
  background: #0E3D4D;
  color: #FFFFFF;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.25);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.EstiloTooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #0E3D4D;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 100;
}
.EstiloTooltip:hover::after, .EstiloTooltip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.EstiloTooltip:hover::before, .EstiloTooltip:focus-visible::before {
  opacity: 1;
}
@media (max-width: 480px) {
  .EstiloTooltip::after, .EstiloTooltip::before {
    display: none;
  }
}

.EstiloTablaContenedor {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(46, 144, 172, 0.35) transparent;
  position: relative;
}
.EstiloTablaContenedor::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.EstiloTablaContenedor::-webkit-scrollbar-track {
  background: transparent;
}
.EstiloTablaContenedor::-webkit-scrollbar-thumb {
  background: rgba(46, 144, 172, 0.35);
  border-radius: 8px;
}
.EstiloTablaContenedor::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 107, 133, 0.55);
}
@media (max-width: 480px) {
  .EstiloTablaContenedor {
    border-radius: 8px;
  }
}

.EstiloTabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: inherit;
  font-size: 12px;
  min-width: 720px;
  background: #FFFFFF;
}
.EstiloTabla .EstiloTablaHeader,
.EstiloTabla thead tr {
  background: #2E90AC !important;
}
.EstiloTabla th,
.EstiloTabla .EstiloTablaHeaderCell,
.EstiloTabla .EstiloTablaHeader th {
  background: #2E90AC !important;
  padding: 9px 12px;
  text-align: center;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF !important;
  letter-spacing: 0.2px;
  white-space: nowrap;
  border: none;
  vertical-align: middle;
  cursor: default;
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.EstiloTabla th:first-child,
.EstiloTabla .EstiloTablaHeaderCell:first-child {
  padding-left: 16px;
}
.EstiloTabla th:last-child,
.EstiloTabla .EstiloTablaHeaderCell:last-child {
  padding-right: 16px;
}
.EstiloTabla th:hover,
.EstiloTabla th:focus,
.EstiloTabla th:active,
.EstiloTabla .EstiloTablaHeaderCell:hover,
.EstiloTabla .EstiloTablaHeader:hover,
.EstiloTabla thead tr:hover,
.EstiloTabla thead th:hover {
  background: #2E90AC !important;
  color: #FFFFFF !important;
}
.EstiloTabla .EstiloTablaFila {
  border-bottom: 1px solid #F1F5F9;
  transition: background-color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloTabla .EstiloTablaFila:nth-child(even) {
  background: rgba(247, 249, 251, 0.4);
}
.EstiloTabla .EstiloTablaFila:hover {
  background: rgba(46, 144, 172, 0.05);
}
.EstiloTabla .EstiloTablaFila:last-child {
  border-bottom: none;
}
.EstiloTabla .EstiloTablaFila:last-child td,
.EstiloTabla .EstiloTablaFila:last-child .EstiloTablaBodyCell {
  border-bottom: none;
}
.EstiloTabla .EstiloTablaFila.Seleccionada {
  background: rgba(46, 144, 172, 0.1) !important;
  box-shadow: inset 3px 0 0 #2E90AC;
}
.EstiloTabla td,
.EstiloTabla .EstiloTablaBodyCell {
  padding: 3px 10px;
  color: #1E293B;
  vertical-align: middle;
  font-family: inherit;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  border: none;
  border-bottom: 1px solid #F1F5F9;
  background-clip: padding-box;
}
.EstiloTabla td:first-child,
.EstiloTabla .EstiloTablaBodyCell:first-child {
  padding-left: 16px;
}
.EstiloTabla td:last-child,
.EstiloTabla .EstiloTablaBodyCell:last-child {
  padding-right: 16px;
}

.EstiloTablaNum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #F7F9FB;
  color: #64748B;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.EstiloTablaInput {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0E3D4D;
  outline: none;
  text-align: center;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloTablaInput:hover:not([readonly]):not(:focus) {
  border-color: #F1F5F9;
  background: #FFFFFF;
}
.EstiloTablaInput:focus {
  border-color: #2E90AC;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.12);
}
.EstiloTablaInput[readonly], .EstiloTablaInput.EstiloTablaInputSoloLectura {
  background: transparent;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #0E3D4D;
  cursor: default;
  padding-left: 0;
  padding-right: 0;
}

.EstiloTablaSelect {
  width: 100%;
  height: 30px;
  padding: 0 30px 0 10px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background-color: transparent;
  font-family: inherit;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0E3D4D;
  outline: none;
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloTablaSelect:hover:not(:focus) {
  border-color: #F1F5F9;
  background-color: #FFFFFF;
}
.EstiloTablaSelect:focus {
  border-color: #2E90AC;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.12);
}

input.EstiloTablaCheckbox[type=checkbox],
.EstiloTablaCheckbox input[type=checkbox],
.EstiloTablaCheckbox {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 5px !important;
  border: 2px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  margin: 0 auto !important;
  vertical-align: middle !important;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  outline: none !important;
  display: inline-block !important;
}
input.EstiloTablaCheckbox[type=checkbox]::after,
.EstiloTablaCheckbox input[type=checkbox]::after,
.EstiloTablaCheckbox::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.3, 0.64, 1);
  pointer-events: none;
}
input.EstiloTablaCheckbox[type=checkbox]:hover,
.EstiloTablaCheckbox input[type=checkbox]:hover,
.EstiloTablaCheckbox:hover {
  border-color: #2E90AC !important;
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.1);
}
input.EstiloTablaCheckbox[type=checkbox]:checked,
.EstiloTablaCheckbox input[type=checkbox]:checked,
.EstiloTablaCheckbox:checked {
  background: linear-gradient(135deg, #2E90AC, #1A6B85) !important;
  border-color: #2E90AC !important;
  box-shadow: 0 4px 10px -4px rgba(46, 144, 172, 0.5);
}
input.EstiloTablaCheckbox[type=checkbox]:checked::after,
.EstiloTablaCheckbox input[type=checkbox]:checked::after,
.EstiloTablaCheckbox:checked::after {
  opacity: 1;
  transform: scale(1);
}
input.EstiloTablaCheckbox[type=checkbox]:focus-visible,
.EstiloTablaCheckbox input[type=checkbox]:focus-visible,
.EstiloTablaCheckbox:focus-visible {
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.3);
}
@media (max-width: 480px) {
  input.EstiloTablaCheckbox[type=checkbox],
  .EstiloTablaCheckbox input[type=checkbox],
  .EstiloTablaCheckbox {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
  }
}

.EstiloTabla .EstiloTablaBodyCell > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.EstiloBarraTablaInferior {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #F1F5F9;
  background: linear-gradient(180deg, #F7F9FB 0%, rgba(247, 249, 251, 0.6) 100%);
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .EstiloBarraTablaInferior {
    padding: 12px;
    gap: 8px;
  }
}

.EstiloBarraTablaInferiorAcciones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .EstiloBarraTablaInferiorAcciones {
    gap: 8px;
  }
}

.EstiloBarraTablaInferiorMovimiento {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
  border-left: 1px solid #E2E8F0;
  margin-left: 4px;
}
@media (max-width: 480px) {
  .EstiloBarraTablaInferiorMovimiento {
    padding-left: 0;
    border-left: none;
    margin-left: 0;
  }
}

.EstiloBarraTablaInferiorBotones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
@media (max-width: 480px) {
  .EstiloBarraTablaInferiorBotones {
    gap: 8px;
  }
  .EstiloBarraTablaInferiorBotones > button, .EstiloBarraTablaInferiorBotones > input[type=button], .EstiloBarraTablaInferiorBotones > a {
    flex: 1;
    min-width: calc(50% - 8px);
  }
}

.EstiloContenedorToasts {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10000;
  pointer-events: none;
  max-width: min(400px, 100vw - 32px);
}
@media (max-width: 480px) {
  .EstiloContenedorToasts {
    top: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
}

.EstiloToast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #FFFFFF;
  color: #0E3D4D;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 30px -10px rgba(14, 61, 77, 0.35), 0 2px 6px -2px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #2E90AC;
  pointer-events: auto;
  animation: EstiloToastEntrar 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  line-height: 1.35;
}
.EstiloToast i {
  font-size: 16px;
  flex-shrink: 0;
  color: #2E90AC;
}
.EstiloToast span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.EstiloToast.EstiloToastExito {
  border-left-color: #2E90AC;
}
.EstiloToast.EstiloToastExito i {
  color: #2E90AC;
}
.EstiloToast.EstiloToastError {
  border-left-color: #E8920A;
}
.EstiloToast.EstiloToastError i {
  color: #E8920A;
}
.EstiloToast.EstiloToastAviso {
  border-left-color: #F59E0B;
}
.EstiloToast.EstiloToastAviso i {
  color: #F59E0B;
}
.EstiloToast.Saliendo {
  animation: EstiloToastSalir 0.26s ease forwards;
}

@keyframes EstiloToastEntrar {
  from {
    opacity: 0;
    transform: translateX(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes EstiloToastSalir {
  to {
    opacity: 0;
    transform: translateX(24px) scale(0.96);
  }
}
.EstiloLoaderOverlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: EstiloLoaderFadeIn 0.2s ease-out;
}

@keyframes EstiloLoaderFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.EstiloLoaderContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
  min-width: 250px;
  text-align: center;
}

.EstiloLoaderAro {
  position: relative;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}
.EstiloLoaderAro::before, .EstiloLoaderAro::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}
.EstiloLoaderAro::before {
  border-top-color: #2E90AC;
  border-right-color: rgba(46, 144, 172, 0.3);
  animation: EstiloLoaderGirar 0.9s linear infinite;
}
.EstiloLoaderAro::after {
  inset: 8px;
  border-top-color: #FEA321;
  border-left-color: rgba(254, 163, 33, 0.3);
  animation: EstiloLoaderGirar 1.4s linear infinite reverse;
}

@keyframes EstiloLoaderGirar {
  to {
    transform: rotate(360deg);
  }
}
.EstiloLoaderTexto {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0E3D4D;
  letter-spacing: -0.2px;
  text-align: center;
}

.EstiloLoaderPuntos::after {
  content: "";
  animation: EstiloLoaderPuntosAnim 1.4s steps(4, end) infinite;
}

@keyframes EstiloLoaderPuntosAnim {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "";
  }
}
.EstiloEstadoVacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 32px 20px;
  min-height: 200px;
}

.EstiloEstadoVacioIcono {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.1), rgba(46, 144, 172, 0.05));
  border: 2px dashed rgba(46, 144, 172, 0.3);
  color: #2E90AC;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.EstiloEstadoVacioTitulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #0E3D4D;
  margin: 0;
}

.EstiloEstadoVacioDescripcion {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  margin: 0;
  max-width: 340px;
  line-height: 1.5;
}

.EstiloOffcanvasCabecera {
  padding: 16px;
  border-bottom: 1px solid #E2E8F0;
  background: linear-gradient(135deg, #0E3D4D, #1A6B85);
  color: #FFFFFF;
}
.EstiloOffcanvasCabecera .offcanvas-title, .EstiloOffcanvasCabecera h5 {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.2px;
}
.EstiloOffcanvasCabecera .btn-close {
  filter: invert(1) brightness(2);
  opacity: 0.8;
}
.EstiloOffcanvasCabecera .btn-close:hover {
  opacity: 1;
}

.EstiloOffcanvasCuerpo {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.EstiloOffcanvasDescripcion {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
  padding: 8px 12px;
  background: #F0F9FC;
  border-radius: 8px;
  border-left: 3px solid #2E90AC;
}

/* ============================================================
   TEMA OSCURO GLOBAL
   Se activa cuando <html data-tema="oscuro">
   Usa invert + hue-rotate para preservar la identidad de color
   (azul sigue siendo azul, solo cambia luminosidad).
   Los medios (imágenes, videos, iframes) se contra-invierten
   para que se vean normales.
   ============================================================ */
html[data-tema=oscuro] {
  filter: invert(1) hue-rotate(180deg) brightness(0.94) contrast(1.04);
  background: #0F172A;
}
html[data-tema=oscuro] img,
html[data-tema=oscuro] video,
html[data-tema=oscuro] iframe,
html[data-tema=oscuro] canvas,
html[data-tema=oscuro] embed,
html[data-tema=oscuro] object,
html[data-tema=oscuro] picture,
html[data-tema=oscuro] svg image,
html[data-tema=oscuro] [class*=Escudo],
html[data-tema=oscuro] [class*=Logo],
html[data-tema=oscuro] [class*=Imagen],
html[data-tema=oscuro] [id*=Escudo],
html[data-tema=oscuro] [id*=Logo],
html[data-tema=oscuro] [id*=Imagen] {
  filter: invert(1) hue-rotate(180deg);
}
html[data-tema=oscuro] input[type=date],
html[data-tema=oscuro] input[type=time],
html[data-tema=oscuro] input[type=datetime-local],
html[data-tema=oscuro] input[type=month],
html[data-tema=oscuro] input[type=week],
html[data-tema=oscuro] input[type=color] {
  color-scheme: dark;
}

@media (max-width: 480px) {
  .EstiloLoaderContent {
    min-width: 220px;
    padding: 16px;
  }
  .EstiloLoaderAro {
    width: 46px;
    height: 46px;
  }
  .EstiloLoaderTexto {
    font-size: 12px;
  }
  .EstiloBarraTablaInferiorAcciones {
    flex-direction: column;
    gap: 8px;
  }
  .EstiloBarraTablaInferiorMovimiento {
    padding-left: 0;
    border-left: none;
  }
}
@media (max-width: 768px) {
  html, body,
  .EstiloCuerpoPagina,
  .EstiloCuerpoPaginaFija,
  .EstiloCuerpoPaginaFija .EstiloPagina,
  .EstiloPagina,
  .EstiloPagina:has(.EstiloPaginaCardTabla),
  body:has(.EstiloPaginaCardTabla) {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .EstiloPagina {
    display: block;
  }
  .EstiloPaginaCardTabla {
    flex: none;
    min-height: 0;
    overflow: hidden;
    margin-top: 12px;
  }
  .EstiloPaginaCardTabla .EstiloTablaContenedor {
    flex: none;
    max-height: 65vh;
    overflow-y: auto;
    overflow-x: auto;
  }
  .EstiloTablaContenedor {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .EstiloTabla,
  .EstiloTablaHeader,
  .EstiloTablaFila {
    display: table;
  }
  .EstiloTablaHeader,
  .EstiloTablaFila {
    display: table-row;
  }
  .EstiloTablaHeaderCell,
  .EstiloTablaBodyCell {
    display: table-cell;
  }
  .EstiloTabla {
    min-width: 640px;
    font-size: 11px;
  }
  .EstiloTabla th,
  .EstiloTabla .EstiloTablaHeaderCell {
    padding: 8px 8px;
    font-size: 10.5px;
    letter-spacing: 0.1px;
  }
  .EstiloTabla th:first-child,
  .EstiloTabla .EstiloTablaHeaderCell:first-child {
    padding-left: 12px;
  }
  .EstiloTabla th:last-child,
  .EstiloTabla .EstiloTablaHeaderCell:last-child {
    padding-right: 12px;
  }
  .EstiloTabla td,
  .EstiloTabla .EstiloTablaBodyCell {
    padding: 3px 8px;
    font-size: 11px;
  }
  .EstiloTabla td:first-child,
  .EstiloTabla .EstiloTablaBodyCell:first-child {
    padding-left: 12px;
  }
  .EstiloTabla td:last-child,
  .EstiloTabla .EstiloTablaBodyCell:last-child {
    padding-right: 12px;
  }
  .EstiloTablaInput,
  .EstiloTablaSelect {
    height: 28px;
    font-size: 11px;
    padding: 0 6px;
  }
  .EstiloTablaSelect {
    padding-right: 24px;
  }
  .EstiloTablaCheckbox {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }
  .EstiloBarraTablaInferior {
    padding: 12px;
    gap: 8px;
  }
  .EstiloBarraTablaInferiorAcciones {
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .EstiloLoaderOverlay,
  .EstiloBtnPrincipal,
  .EstiloBtnSecundario,
  .EstiloBtnCancelar,
  .EstiloBtnIcono,
  .EstiloLinkAccion,
  .EstiloPaginaHeaderIcono,
  .EstiloToast {
    animation: none !important;
    transition: none !important;
  }
  .EstiloLoaderAro::before,
  .EstiloLoaderAro::after,
  .EstiloLoaderPuntos::after,
  .EstiloPaginaHeader::after {
    animation: none;
  }
  .EstiloTooltip::after,
  .EstiloTooltip::before {
    transition: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloFondoAutenticidad {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.EstiloFondoBurbuja {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}

.EstiloFondoBurbujaUno {
  top: -120px;
  left: -100px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(46, 144, 172, 0.35), transparent 70%);
}

.EstiloFondoBurbujaDos {
  bottom: -140px;
  right: -120px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(232, 146, 10, 0.28), transparent 70%);
}

.EstiloFondoBurbujaTres {
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(78, 195, 228, 0.16), transparent 70%);
}

.EstiloPaginaAutenticidad {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: linear-gradient(180deg, #F4F7FB 0%, #EAF0F6 100%);
}
@media (max-width: 480px) {
  .EstiloPaginaAutenticidad {
    padding: 16px 12px;
  }
}

.EstiloContenedorAutenticidad {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.EstiloMarcaAutenticidad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(46, 144, 172, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 24px -12px rgba(14, 61, 77, 0.15);
}
@media (max-width: 480px) {
  .EstiloMarcaAutenticidad {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

.EstiloMarcaEscudo {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0E3D4D, #1A6B85);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px -8px rgba(46, 144, 172, 0.55);
}
.EstiloMarcaEscudo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.EstiloMarcaTexto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.EstiloMarcaNombre {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0E3D4D;
  letter-spacing: -0.1px;
  line-height: 1.2;
}

.EstiloMarcaCiudad {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  letter-spacing: 0.3px;
}

.EstiloTarjetaAutenticidad {
  width: 100%;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 25px 60px -22px rgba(14, 61, 77, 0.3), 0 0 0 1px rgba(46, 144, 172, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.EstiloEncabezadoAutenticidad {
  padding: 24px 20px 20px;
  text-align: center;
  background: linear-gradient(135deg, #0E3D4D 0%, #1A6B85 100%);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.EstiloEncabezadoAutenticidad::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0, transparent 40%), radial-gradient(circle at 80% 70%, rgba(254, 163, 33, 0.18) 0, transparent 45%);
  pointer-events: none;
}
.EstiloEncabezadoAutenticidad::after {
  content: "";
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 163, 33, 0.22), transparent 70%);
  pointer-events: none;
}
@media (max-width: 480px) {
  .EstiloEncabezadoAutenticidad {
    padding: 20px 16px 16px;
  }
}

.EstiloIconoAutenticidad {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 26px;
  color: #FFFFFF;
  position: relative;
  z-index: 1;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.35);
  animation: PulsoIcono 3s ease-in-out infinite;
}

@keyframes PulsoIcono {
  0%, 100% {
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(255, 255, 255, 0.35);
  }
  50% {
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.35), 0 0 0 12px rgba(255, 255, 255, 0);
  }
}
.EstiloTituloAutenticidad {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.2rem, 2.8vw, 1.45rem);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.3px;
  position: relative;
  z-index: 1;
}

.EstiloSubtituloAutenticidad {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  margin: 8px auto 0;
  max-width: 420px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.EstiloCuerpoAutenticidad {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 480px) {
  .EstiloCuerpoAutenticidad {
    padding: 16px;
  }
}

.EstiloCampoAutenticidad {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.EstiloEtiquetaAutenticidad {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #0E3D4D;
  letter-spacing: 0.2px;
}
.EstiloEtiquetaAutenticidad i {
  color: #2E90AC;
  font-size: 12px;
}

.EstiloEntradaConIcono {
  position: relative;
  width: 100%;
}

.EstiloEntradaAutenticidad {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  font-family: inherit;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #0E3D4D;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloEntradaAutenticidad::placeholder {
  color: #8A93A3;
  text-transform: none;
  letter-spacing: 0.3px;
  font-weight: 400;
}
.EstiloEntradaAutenticidad:focus {
  border-color: #2E90AC;
  box-shadow: 0 0 0 4px rgba(46, 144, 172, 0.14);
  background: #FCFDFF;
}
.EstiloEntradaAutenticidad:hover:not(:focus) {
  border-color: rgba(46, 144, 172, 0.45);
}

.EstiloAyudaAutenticidad {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.4;
  padding-left: 2px;
}
.EstiloAyudaAutenticidad::before {
  content: "·  ";
  color: #2E90AC;
  font-weight: 800;
}

.EstiloBtnValidar {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #2E90AC, #1A6B85);
  color: #FFFFFF;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: 0.4px;
  box-shadow: 0 12px 28px -12px rgba(46, 144, 172, 0.65);
  margin-top: 8px;
}
.EstiloBtnValidar::before {
  content: "\f002";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
}
.EstiloBtnValidar:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(46, 144, 172, 0.75);
}
.EstiloBtnValidar:active {
  transform: translateY(0) scale(0.99);
}
.EstiloBtnValidar.aspNetDisabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.EstiloResultadoAutenticidad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 20px 16px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  animation: AparecerResultado 0.35s ease-out;
}
@media (max-width: 480px) {
  .EstiloResultadoAutenticidad {
    padding: 16px 12px;
  }
}

@keyframes AparecerResultado {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.EstiloResultadoValido {
  background: linear-gradient(180deg, #ECFDF5 0%, #F0FDFA 100%);
  border-color: #A7F3D0;
}

.EstiloResultadoInvalido {
  background: linear-gradient(180deg, #FEF2F2 0%, #FFF1F2 100%);
  border-color: #FECACA;
}

.EstiloIconoResultado {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #FFFFFF;
  flex-shrink: 0;
}
.EstiloResultadoValido .EstiloIconoResultado {
  background: linear-gradient(135deg, #10B981, #047857);
  box-shadow: 0 14px 30px -12px rgba(16, 185, 129, 0.6);
  animation: SelloVálido 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.EstiloResultadoInvalido .EstiloIconoResultado {
  background: linear-gradient(135deg, #EF4444, #B91C1C);
  box-shadow: 0 14px 30px -12px rgba(239, 68, 68, 0.6);
}

@keyframes SelloVálido {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
.EstiloTituloResultado {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #0E3D4D;
  margin: 0;
  letter-spacing: -0.2px;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
}

.EstiloMensajeResultado {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #64748B;
  margin: 0;
  max-width: 440px;
  line-height: 1.55;
}

.EstiloDatosReporte {
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid rgba(46, 144, 172, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  box-shadow: 0 4px 12px -6px rgba(14, 61, 77, 0.08);
}
@media (max-width: 480px) {
  .EstiloDatosReporte {
    padding: 12px;
  }
}

.EstiloFilaDato {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px dashed rgba(226, 232, 240, 0.75);
  flex-wrap: wrap;
}
.EstiloFilaDato:last-child {
  border-bottom: none;
}
@media (max-width: 480px) {
  .EstiloFilaDato {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

.EstiloEtiquetaDato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.EstiloEtiquetaDato i {
  color: #2E90AC;
  font-size: 11px;
  width: 12px;
  text-align: center;
}

.EstiloValorDato {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0E3D4D;
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .EstiloValorDato {
    text-align: left;
    width: 100%;
  }
}

.EstiloValorDestacado {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #0E3D4D;
}

.EstiloBtnNuevaConsulta {
  margin-top: 12px;
  height: 42px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  color: #0E3D4D;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.2px;
}
.EstiloBtnNuevaConsulta::before {
  content: "\f060";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
}
.EstiloBtnNuevaConsulta:hover {
  background: #F7F9FB;
  border-color: rgba(46, 144, 172, 0.4);
  color: #2E90AC;
  transform: translateY(-1px);
}
.EstiloBtnNuevaConsulta:active {
  transform: translateY(0) scale(0.98);
}

.EstiloPieAutenticidad {
  padding: 12px 20px;
  border-top: 1px solid #F1F5F9;
  background: #F7F9FB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .EstiloPieAutenticidad {
    padding: 12px;
    flex-direction: column;
    text-align: center;
  }
}

.EstiloPieMarca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #0E3D4D;
  letter-spacing: 0.3px;
}
.EstiloPieMarca i {
  color: #2E90AC;
  font-size: 10px;
}

.EstiloPieSistema {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  letter-spacing: 0.3px;
}

.EstiloAyudaInferior {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  border: 1px solid rgba(46, 144, 172, 0.08);
  text-align: center;
}
.EstiloAyudaInferior i {
  color: #2E90AC;
  font-size: 12px;
  flex-shrink: 0;
}
.EstiloAyudaInferior span {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .EstiloIconoAutenticidad,
  .EstiloIconoResultado,
  .EstiloResultadoAutenticidad {
    animation: none !important;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
html, body {
  height: 100%;
  margin: 0;
}

.EstiloSalidaCuerpo {
  min-height: 100vh;
  min-height: 100svh;
  background: #F4F6F9;
  color: #0E3D4D;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (max-width: 480px) {
  .EstiloSalidaCuerpo {
    padding: 12px;
  }
}

.EstiloSalidaFondo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.EstiloSalidaFondo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(14, 61, 77, 0.07) 1px, transparent 0);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
}

.EstiloSalidaBurbuja {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  z-index: 0;
  will-change: transform;
}

.EstiloSalidaBurbujaUno {
  top: -180px;
  left: -140px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(46, 144, 172, 0.35), transparent 70%);
  animation: EstiloSalidaBurbujaUnoAnim 18s ease-in-out infinite;
}

.EstiloSalidaBurbujaDos {
  bottom: -180px;
  right: -140px;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(254, 163, 33, 0.4), transparent 70%);
  animation: EstiloSalidaBurbujaDosAnim 22s ease-in-out infinite;
}

.EstiloSalidaBurbujaTres {
  top: 55%;
  right: 15%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(14, 61, 77, 0.25), transparent 70%);
  animation: EstiloSalidaBurbujaTresAnim 16s ease-in-out infinite;
}

@keyframes EstiloSalidaBurbujaUnoAnim {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(30px, 25px, 0) scale(1.08);
  }
}
@keyframes EstiloSalidaBurbujaDosAnim {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-25px, -20px, 0) scale(1.06);
  }
}
@keyframes EstiloSalidaBurbujaTresAnim {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.35;
  }
  50% {
    transform: translate3d(-20px, 15px, 0) scale(1.1);
    opacity: 0.55;
  }
}
.EstiloSalidaTarjeta {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 580px;
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  padding: 32px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 60px -20px rgba(14, 61, 77, 0.28), 0 12px 24px -12px rgba(14, 61, 77, 0.18), 0 0 0 1px #E2E8F0;
  animation: EstiloSalidaTarjetaEntrada 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 768px) {
  .EstiloSalidaTarjeta {
    padding: 24px 20px;
    max-width: 520px;
  }
}
@media (max-width: 480px) {
  .EstiloSalidaTarjeta {
    padding: 20px 16px 16px;
    gap: 12px;
    border-radius: 12px;
    max-width: 100%;
  }
}

@keyframes EstiloSalidaTarjetaEntrada {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.EstiloSalidaBarraSuperior {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #0E3D4D 0%, #2E90AC 45%, #FEA321 100%);
  background-size: 200% 100%;
  animation: EstiloSalidaBarraSuperiorAnim 6s ease-in-out infinite;
}
.EstiloSalidaBarraSuperior::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  animation: EstiloSalidaBarraBrillo 3.5s ease-in-out infinite;
}

@keyframes EstiloSalidaBarraSuperiorAnim {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes EstiloSalidaBarraBrillo {
  0% {
    background-position: -60% 0;
  }
  100% {
    background-position: 160% 0;
  }
}
.EstiloSalidaIconoContenedor {
  position: relative;
  width: 108px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .EstiloSalidaIconoContenedor {
    width: 92px;
    height: 92px;
  }
}

.EstiloSalidaIcono {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #2E90AC 0%, #1A6B85 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 12px 28px -10px rgba(46, 144, 172, 0.65);
  overflow: hidden;
}
.EstiloSalidaIcono::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.28), transparent 45%);
  pointer-events: none;
}
.EstiloSalidaIcono i {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  line-height: 1;
  animation: EstiloSalidaIconoBalanceo 3s ease-in-out infinite;
  transform-origin: 70% 70%;
}
@media (max-width: 480px) {
  .EstiloSalidaIcono {
    font-size: 36px;
  }
}

@keyframes EstiloSalidaIconoBalanceo {
  0%, 100% {
    transform: rotate(-9deg);
  }
  50% {
    transform: rotate(11deg);
  }
}
.EstiloSalidaIconoAnillo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #2E90AC;
  opacity: 0;
  animation: EstiloSalidaAnilloExpansivo 3s ease-out infinite;
  pointer-events: none;
}
.EstiloSalidaIconoAnillo.EstiloSalidaIconoAnilloDos {
  animation-delay: 1.5s;
}

@keyframes EstiloSalidaAnilloExpansivo {
  0% {
    opacity: 0.6;
    transform: scale(0.85);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
.EstiloSalidaBadge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(46, 144, 172, 0.1);
  border: 1px solid rgba(46, 144, 172, 0.22);
  color: #2E90AC;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.EstiloSalidaTítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #0E3D4D;
  margin: 0;
  letter-spacing: -0.6px;
  line-height: 1.15;
  max-width: 420px;
}
@media (max-width: 480px) {
  .EstiloSalidaTítulo {
    font-size: 1.35rem;
  }
}

.EstiloSalidaSubtítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #64748B;
  margin: 0;
  line-height: 1.55;
  max-width: 420px;
}

.EstiloSalidaNota {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 460px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.05), rgba(254, 163, 33, 0.08));
  border: 1px solid rgba(46, 144, 172, 0.12);
  border-radius: 12px;
  text-align: left;
  margin-top: 4px;
}
@media (max-width: 480px) {
  .EstiloSalidaNota {
    padding: 8px 12px;
    gap: 8px;
    text-align: left;
  }
}

.EstiloSalidaNotaIcono {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #2E90AC 0%, #1A6B85 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 14px -6px rgba(46, 144, 172, 0.5);
}
.EstiloSalidaNotaIcono i {
  line-height: 1;
  color: #FFFFFF;
}
@media (max-width: 480px) {
  .EstiloSalidaNotaIcono {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
}

.EstiloSalidaNotaTexto {
  flex: 1;
  min-width: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0E3D4D;
  line-height: 1.5;
}
.EstiloSalidaNotaTexto strong {
  color: #2E90AC;
  font-weight: 800;
}

.EstiloSalidaSeparador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 4px 0;
  position: relative;
}
.EstiloSalidaSeparador::before, .EstiloSalidaSeparador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #E2E8F0 50%, transparent);
}
.EstiloSalidaSeparador span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #E2E8F0;
  flex-shrink: 0;
}
.EstiloSalidaSeparador span:nth-child(2) {
  background: #2E90AC;
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.15);
}

.EstiloSalidaContador {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.06), rgba(46, 144, 172, 0.02));
  border: 1px solid rgba(46, 144, 172, 0.12);
}
@media (max-width: 480px) {
  .EstiloSalidaContador {
    padding: 12px;
  }
}

.EstiloSalidaContadorEncabezado {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.EstiloSalidaContadorNúmero {
  display: inline-flex;
  align-items: baseline;
}
.EstiloSalidaContadorNúmero strong {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: #2E90AC;
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  min-width: 76px;
  text-align: center;
  display: inline-block;
}
@media (max-width: 480px) {
  .EstiloSalidaContadorNúmero strong {
    font-size: 2.5rem;
    min-width: 64px;
  }
}

.EstiloSalidaContadorUnidad {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
  letter-spacing: 0.3px;
}

.EstiloSalidaContadorBarra {
  width: 100%;
  height: 6px;
  background: rgba(46, 144, 172, 0.12);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.EstiloSalidaContadorBarraRelleno {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #2E90AC 0%, #FEA321 100%);
  border-radius: 999px;
  transition: width 1s linear;
  position: relative;
  overflow: hidden;
}
.EstiloSalidaContadorBarraRelleno::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: EstiloSalidaBarraProgresoBrillo 1.8s ease-in-out infinite;
}

@keyframes EstiloSalidaBarraProgresoBrillo {
  0% {
    background-position: -40% 0;
  }
  100% {
    background-position: 140% 0;
  }
}
.EstiloSalidaContadorEtiqueta {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #64748B;
  margin: 0;
  letter-spacing: 0.2px;
  text-align: center;
}

.EstiloSalidaBoton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  height: 48px;
  margin-top: 8px;
  padding: 0 16px;
  background: linear-gradient(135deg, #2E90AC 0%, #1A6B85 100%);
  color: #FFFFFF !important;
  border: none;
  border-radius: 8px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 10px 24px -8px rgba(46, 144, 172, 0.55);
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloSalidaBoton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 55%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.EstiloSalidaBoton i,
.EstiloSalidaBoton span {
  position: relative;
  z-index: 1;
}
.EstiloSalidaBoton i {
  font-size: 14px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.EstiloSalidaBoton:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 16px 30px -8px rgba(46, 144, 172, 0.7);
}
.EstiloSalidaBoton:hover::before {
  opacity: 1;
}
.EstiloSalidaBoton:hover i {
  transform: translateX(4px);
}
.EstiloSalidaBoton:active {
  transform: translateY(0) scale(0.98);
}
.EstiloSalidaBoton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.35), 0 10px 24px -8px rgba(46, 144, 172, 0.55);
}
@media (max-width: 480px) {
  .EstiloSalidaBoton {
    height: 46px;
    font-size: 13px;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .EstiloSalidaBurbuja,
  .EstiloSalidaTarjeta,
  .EstiloSalidaBarraSuperior,
  .EstiloSalidaBarraSuperior::after,
  .EstiloSalidaIcono i,
  .EstiloSalidaIconoAnillo,
  .EstiloSalidaContadorBarraRelleno::after,
  .EstiloSalidaBoton {
    animation: none !important;
    transition: none !important;
  }
  .EstiloSalidaBoton:hover i {
    transform: none;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.EstiloPreferenciasIntro {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.08), rgba(254, 163, 33, 0.06));
  border: 1px solid rgba(46, 144, 172, 0.15);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.EstiloPreferenciasIntro::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 144, 172, 0.12), transparent 70%);
  pointer-events: none;
}
@media (max-width: 480px) {
  .EstiloPreferenciasIntro {
    padding: 12px;
    gap: 8px;
  }
}

.EstiloPreferenciasIntroIcono {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #2E90AC 0%, #1A6B85 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 10px 22px -8px rgba(46, 144, 172, 0.55);
}
@media (max-width: 480px) {
  .EstiloPreferenciasIntroIcono {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

.EstiloPreferenciasIntroTítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #0E3D4D;
  margin: 0;
  letter-spacing: -0.2px;
  line-height: 1.3;
}

.EstiloPreferenciasIntroDescripción {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  margin: 3px 0 0;
  line-height: 1.5;
}

.EstiloPreferenciasSección {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 16px;
  border-bottom: 1px dashed #E2E8F0;
}
.EstiloPreferenciasSección.EstiloPreferenciasSecciónÚltima {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.EstiloPreferenciasSecciónEncabezado {
  display: flex;
  align-items: center;
  gap: 12px;
}

.EstiloPreferenciasSecciónIcono {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(46, 144, 172, 0.12), rgba(46, 144, 172, 0.04));
  color: #2E90AC;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 1px solid rgba(46, 144, 172, 0.15);
}

.EstiloPreferenciasSecciónTítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #0E3D4D;
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.EstiloPreferenciasSecciónDescripción {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  margin: 2px 0 0;
  line-height: 1.45;
}

.EstiloPreferenciasLista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.EstiloPreferencia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.EstiloPreferencia:hover {
  border-color: rgba(46, 144, 172, 0.3);
  box-shadow: 0 6px 18px -10px rgba(14, 61, 77, 0.2);
}
@media (max-width: 480px) {
  .EstiloPreferencia {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }
}

.EstiloPreferenciaInfo {
  flex: 1;
  min-width: 0;
}

.EstiloPreferenciaTítulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0E3D4D;
  margin: 0;
  letter-spacing: -0.2px;
  line-height: 1.3;
}

.EstiloPreferenciaDescripción {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  margin: 4px 0 0;
  line-height: 1.5;
  max-width: 520px;
}

.EstiloPreferenciaControl {
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .EstiloPreferenciaControl {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
}

.EstiloPreferenciaControles {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.EstiloToggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.EstiloToggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.EstiloToggle .EstiloTogglePista {
  position: relative;
  width: 48px;
  height: 26px;
  background: #E2E8F0;
  border-radius: 13px;
  transition: background-color 0.25s ease;
  flex-shrink: 0;
}
.EstiloToggle .EstiloTogglePista::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(14, 61, 77, 0.25);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.EstiloToggle input:checked ~ .EstiloTogglePista {
  background: linear-gradient(135deg, #2E90AC 0%, #1A6B85 100%);
  box-shadow: 0 0 0 1px rgba(46, 144, 172, 0.15) inset;
}
.EstiloToggle input:checked ~ .EstiloTogglePista::after {
  transform: translateX(22px);
}
.EstiloToggle input:focus-visible ~ .EstiloTogglePista {
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.25);
}
.EstiloToggle .EstiloToggleEtiqueta {
  margin-left: 10px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  min-width: 80px;
}
.EstiloToggle input:checked ~ .EstiloToggleEtiqueta {
  color: #2E90AC;
}

.EstiloSegmentado {
  display: inline-flex;
  padding: 4px;
  background: #F7F9FB;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  gap: 2px;
}
.EstiloSegmentado button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: transparent;
  padding: 7px 14px;
  border-radius: calc(8px - 3px);
  font-family: inherit;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  white-space: nowrap;
  line-height: 1;
}
.EstiloSegmentado button i {
  font-size: 11px;
}
.EstiloSegmentado button:hover:not(.Activo) {
  color: #0E3D4D;
  background: rgba(255, 255, 255, 0.7);
}
.EstiloSegmentado button.Activo {
  background: #FFFFFF;
  color: #2E90AC;
  font-weight: 800;
  box-shadow: 0 2px 8px -2px rgba(14, 61, 77, 0.2), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.EstiloSegmentado button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.3);
}
@media (max-width: 480px) {
  .EstiloSegmentado {
    width: 100%;
  }
  .EstiloSegmentado button {
    flex: 1;
    padding: 8px 6px;
    font-size: 11px;
  }
}

.EstiloPreferenciasFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed #E2E8F0;
}
@media (max-width: 480px) {
  .EstiloPreferenciasFooter {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .EstiloPreferenciasFooter > button,
  .EstiloPreferenciasFooter > a {
    width: 100%;
  }
}

.EstiloBtnOculto {
  display: none !important;
  visibility: hidden;
  position: absolute;
  left: -9999px;
}

@media (prefers-reduced-motion: reduce) {
  .EstiloToggle .EstiloTogglePista,
  .EstiloToggle .EstiloTogglePista::after,
  .EstiloSegmentado button,
  .EstiloPreferencia {
    transition: none !important;
  }
}
@keyframes EstiloEsqueletoBrillo {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* ============================================================
   TRIGGER DE NOTIFICACIONES (la campana)
   ============================================================ */
.TopbarNotificacionesTrigger {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  color: #0E3D4D;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-shrink: 0;
}
.TopbarNotificacionesTrigger i {
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.TopbarNotificacionesTrigger:hover {
  color: #2E90AC;
  border-color: rgba(46, 144, 172, 0.35);
  background: #F0F9FC;
  transform: translateY(-1px);
}
.TopbarNotificacionesTrigger:hover i {
  transform: rotate(-12deg);
}
.TopbarNotificacionesTrigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.3);
}
.TopbarNotificacionesTrigger.Activa {
  color: #2E90AC;
  border-color: #2E90AC;
  background: #F0F9FC;
}
.TopbarNotificacionesTrigger.Activa i {
  animation: TopbarNotificacionesCampanaTimbre 0.6s ease-in-out;
}

@keyframes TopbarNotificacionesCampanaTimbre {
  0%, 100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-14deg);
  }
  40% {
    transform: rotate(12deg);
  }
  60% {
    transform: rotate(-8deg);
  }
  80% {
    transform: rotate(6deg);
  }
}
.TopbarNotificacionesBadge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #E8920A;
  color: #FFFFFF;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px -1px rgba(232, 146, 10, 0.5);
  animation: TopbarNotificacionesBadgePulso 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes TopbarNotificacionesBadgePulso {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
/* ============================================================
   DROPDOWN
   ============================================================ */
.TopbarDropdownNotificaciones {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 400px;
  max-width: calc(100vw - 32px);
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 20px 50px -15px rgba(14, 61, 77, 0.35), 0 6px 16px -8px rgba(14, 61, 77, 0.2), 0 0 0 1px #E2E8F0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 540px;
  text-align: left;
}
.TopbarDropdownNotificaciones.DropdownAbierto {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}
@media (max-width: 480px) {
  .TopbarDropdownNotificaciones {
    position: fixed;
    top: 66px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 90px);
  }
}

/* Los dropdowns cerrados no deben bloquear clics entre sí */
.TopbarDropdownUsuario:not(.DropdownAbierto),
.TopbarDropdownNotificaciones:not(.DropdownAbierto) {
  pointer-events: none !important;
}

/* ============================================================
   ENCABEZADO DEL DROPDOWN
   ============================================================ */
.TopbarNotificacionesEncabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #F1F5F9;
  background: linear-gradient(180deg, #F7F9FB 0%, #FFFFFF 100%);
  flex-shrink: 0;
}
.TopbarNotificacionesEncabezado h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0E3D4D;
  line-height: 1;
}
.TopbarNotificacionesEncabezado h4 i {
  font-size: 13px;
  color: #2E90AC;
}

.TopbarNotificacionesContador {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  background: rgba(232, 146, 10, 0.12);
  color: #E8920A;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 999px;
  border: 1px solid rgba(232, 146, 10, 0.25);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   LISTA
   ============================================================ */
.TopbarNotificacionesLista {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(46, 144, 172, 0.35) transparent;
}
.TopbarNotificacionesLista::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.TopbarNotificacionesLista::-webkit-scrollbar-track {
  background: transparent;
}
.TopbarNotificacionesLista::-webkit-scrollbar-thumb {
  background: rgba(46, 144, 172, 0.35);
  border-radius: 8px;
}
.TopbarNotificacionesLista::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 107, 133, 0.55);
}

/* ============================================================
   ESTADOS DE LA LISTA
   ============================================================ */
.TopbarNotificacionesCargando,
.TopbarNotificacionesVacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 20px;
  text-align: center;
  list-style: none;
}

.TopbarNotificacionesSpinner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(46, 144, 172, 0.15);
  border-top-color: #2E90AC;
  border-radius: 50%;
  animation: TopbarNotificacionesGirar 0.8s linear infinite;
}

@keyframes TopbarNotificacionesGirar {
  to {
    transform: rotate(360deg);
  }
}
.TopbarNotificacionesCargando span {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
}

.TopbarNotificacionesVacio i {
  font-size: 26px;
  color: rgba(46, 144, 172, 0.35);
  margin-bottom: 4px;
}

.TopbarNotificacionesVacio h5 {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0E3D4D;
  margin: 0;
}

.TopbarNotificacionesVacio p {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
  max-width: 260px;
}

/* ============================================================
   ITEM DE NOTIFICACIÓN
   ============================================================ */
.TopbarNotificacionItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #F1F5F9;
  cursor: pointer;
  transition: background-color 0.2s ease cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  text-decoration: none;
  color: inherit;
  list-style: none;
}
.TopbarNotificacionItem:hover {
  background: rgba(46, 144, 172, 0.04);
}
.TopbarNotificacionItem:last-child {
  border-bottom: none;
}
.TopbarNotificacionItem.NoLeida {
  background: rgba(46, 144, 172, 0.06);
}
.TopbarNotificacionItem.NoLeida::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #2E90AC;
}
.TopbarNotificacionItem.NoLeida:hover {
  background: rgba(46, 144, 172, 0.1);
}
.TopbarNotificacionItem.NoLeida .TopbarNotificacionTitulo {
  font-weight: 800;
}
.TopbarNotificacionItem.Saliendo {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.TopbarNotificacionIcono {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #FFFFFF;
  font-size: 15px;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.3);
}
.TopbarNotificacionIcono i {
  line-height: 1;
  color: #FFFFFF;
}

.TopbarNotificacionTexto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.TopbarNotificacionTitulo {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #0E3D4D;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.TopbarNotificacionDescripcion {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.TopbarNotificacionHora {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #8A93A3;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.TopbarNotificacionHora i {
  font-size: 9px;
  opacity: 0.8;
}

.TopbarNotificacionEliminar {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: #64748B;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-shrink: 0;
  opacity: 0;
}
.TopbarNotificacionItem:hover .TopbarNotificacionEliminar {
  opacity: 1;
}
.TopbarNotificacionEliminar:hover {
  background: rgba(46, 144, 172, 0.1);
  color: #2E90AC;
}
.TopbarNotificacionEliminar:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(46, 144, 172, 0.3);
}
.TopbarNotificacionEliminar i {
  pointer-events: none;
}

/* ============================================================
   PIE DEL DROPDOWN
   ============================================================ */
.TopbarNotificacionesPie {
  flex-shrink: 0;
  padding: 8px 12px;
  border-top: 1px solid #F1F5F9;
  background: #F7F9FB;
  display: flex;
  justify-content: center;
}

.TopbarNotificacionesAcción {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #2E90AC;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-family: inherit;
}
.TopbarNotificacionesAcción i {
  font-size: 11px;
}
.TopbarNotificacionesAcción:hover {
  background: rgba(46, 144, 172, 0.08);
  color: #1A6B85;
}
.TopbarNotificacionesAcción:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 144, 172, 0.25);
}
.TopbarNotificacionesAcción:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .TopbarNotificacionesBadge,
  .TopbarNotificacionesSpinner,
  .TopbarNotificacionesTrigger.Activa i,
  .TopbarDropdownNotificaciones,
  .TopbarNotificacionesTrigger,
  .TopbarNotificacionEliminar {
    animation: none !important;
    transition: none !important;
  }
}