/*
  =============================================================
  Widget ODS en Movimiento - ESPOL
  Archivo: widget-ods-espol.css
  Versión: 1.0.0

  Copyright © 2025 Amhed Flores, ESPOL.
  Todos los derechos reservados.

  Licencia de uso:
  Este software está protegido por derechos de autor. Su uso, copia, modificación o distribución está autorizado únicamente para fines académicos y de divulgación institucional dentro de ESPOL.
  Queda estrictamente prohibida su comercialización o utilización fuera de la institución sin el consentimiento expreso y por escrito de los autores.

  Para consultas o licencias especiales, contactar a: otri.espol.edu.ec
  -------------------------------------------------------------
  Descripción:
  Hoja de estilos principal para el "Widget ODS en Movimiento", desarrollado en el marco del proyecto web ESPOL 2025.
  Incluye:
    • Variables CSS para gestión de colores institucionales y personalización dinámica.
    • Estilos avanzados para ruleta ODS, panel lateral, pie de página, botones de accesibilidad, loader y soporte para modos claro/oscuro.
    • Animaciones y transiciones fluidas, diseño responsivo y enfoque en accesibilidad (alto contraste, preferencias de movimiento reducido, navegación por teclado).
    • Integración con JavaScript para actualización dinámica de variables y personalización en tiempo real.

  Equipo de desarrollo:
    Amhed Flores – Front-end Developer
    Cristina Quinde – Back-end Developer

  Institución:
    Departamento de Desarrollo, Gerencia de Comunicación de la ESPOL

  Compatibilidad:
    • Óptimo en navegadores modernos (Chrome, Firefox, Edge, Safari, Opera).
    • Uso intensivo de tecnologías CSS de última generación.
    • Degradación progresiva en navegadores antiguos.
    • Soporte para modo oscuro/claro, movimiento reducido y alto contraste forzado.

  Recomendación:
    Utilizar siempre junto con los JavaScript del widget para garantizar máxima personalización y accesibilidad.

  Dependencias:
    Este archivo es dependiente de la correcta carga de variables CSS definidas en el cdn de la ESPOL.
    Este archivo es dependiente de la correcta carga de los archivos de fuentes tipográficas indicados en el cdn de la ESPOL.
    Este archivo es dependiente de la correcta carga de la hoja de estilos noticias.css alojado en http://espol.edu.ec.
  =============================================================
*/
:root {
  /* ODS variables para el trapezoide*/
  --π: 3.14159265359;
  --ods-total: 17;
  --ods-rueda-borde: calc(1% * (var(--ods-total) + var(--π)));
  --ods-angulo: calc(360deg / var(--ods-total));
  --ods-gap: calc(var(--ods-total) * 0.1%); /* Espaciado entre ODS */
  --ods-time: 1000ms; /* Tiempo de animación de entrada de los ODS */
  --ods-rueda-centro: 700;
/* Conversor de color
    Color institucional modo: #hexadecimal, RGB o hsl
    hsl(0deg 0% 0%) - #000000 - rgb(0, 0, 0)
    Si está vacio por defecto será --widget-ods-color-hsl */
    --widget-ods-color-hex: var(--bs-espol);
  /* Las siguientes variables se actualizan dinámicamente
  desde --widget-ods-color-hsl en ods-widget-color.js */
    --widget-ods-color-hsl: hsl(var(--ods-h) var(--ods-s) var(--ods-l));
    --ods-h: env(--widget-ods-h, 226deg);
    --ods-s: env(--widget-ods-s, 50%);
    --ods-l: env(--widget-ods-l, 26%);
/* Widget ODS */
  --ods-institucional: var(--widget-ods-color-hsl);
  --nav-btn-acc: clamp(2rem, 0.3943rem + 3.4783vw, min(calc(0.5rem + 1.2vh + 1.2vw), 40px));
  --padding: min(8%, 20px);
  --ods-padding: clamp(16px, 5vw, 40px);
  --ods-radiusbg: 22px;
  --ods-radiussm: 12px;
  --ods-radiusxs: 6px;
  --font-icons: 'fontawesome6';
  --ods-transparencia: 90%;
  --wvlh-gap: min(10px, 3%);
/* Posicionamiento del widget */
  --ods-direction: row-reverse;
}
/* Tema de colores claro - oscuro */
:root, 
[data-bs-theme=light] {
  --ods-delta: -10%;  /* aclarar */
  --ods-titulo: var(--bs-espol);
  --ods-parrafo: var(--bs-c-4);
  --ods-texto: var(--bs-c-4);
  --ods-cifras-best: linear-gradient(90deg, #FFD700 0%, #FFB300 40%, #fedc54 60%, #FFD700 100%);
  --ods-btn-acc-bg: hsla(0deg 0% 0% / 0.3);
  --nav-btn-acc-color: var(--bs-c-8);
  --ods-widget-bg: var(--bs-c-4);
  --ods-tipo-color: var(--bs-c-6);
  --ods-rueda-bg: linear-gradient(180deg, hsl(0deg 0% 95%) 0%, hsl(0deg 0% 89%) 100%);
  --ods-rueda-neumorphism-shadow: inset 5px 5px 10px hsl(0deg 0% 84%), inset -5px -5px 10px hsl(0deg 0% 91%);
  --ods-vibrant-gradient: linear-gradient(120deg, rgb(255, 255, 255) 0%, rgb(255, 255, 220) 25%, rgb(220, 255, 224) 50%, rgb(216, 245, 255) 75%, rgb(255, 220, 254) 100%),
                          radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15) 0%, transparent 70%);
  --ods-widget-lista-bg: hsla(0deg 0% 100% / calc(var(--ods-delta) * -1));
}
[data-bs-theme=dark] {
  --ods-delta: 20%;  /* oscurecer */
  --ods-titulo: var(--bs-c-4);
  --ods-parrafo: var(--bs-c-5);
  --ods-texto: var(--bs-c-8);
  --ods-btn-acc-bg: hsla(0deg 0% 0% / 0.6);
  --nav-btn-acc-color: var(--bs-c-4);
  --ods-widget-bg: var(--bs-c-7);
  --ods-tipo-color: var(--bs-c-6);
  --ods-rueda-bg: linear-gradient(180deg, hsl(0deg 0% 13%) 0%, hsl(0deg 0% 6%) 100%);
  --ods-rueda-neumorphism-shadow: inset 5px 5px 10px hsl(0deg 0% 5% / 45%), inset -5px -5px 10px hsl(0deg 0% 5% / 25%);
  --ods-vibrant-gradient: var(--bs-c-7);
  --ods-widget-lista-bg: hsl(0deg 0% 0% / var(--ods-delta));
}
[data-theme="high-contrast"] {
  --ods-widget-bg: var(--ods-institucional);
  --ods-tipo-color: rgb(255, 255, 255);
  --ods-rueda-bg : rgb(0, 0, 0);
  --ods-btn-acc-bg: rgb(0, 0, 0);
}
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  * {
    -webkit-tap-highlight-color: transparent;
  }
  ul, ol {
    list-style: none;
  }
  input, button, textarea, select {
    font: inherit;
  }
  img, picture, video, canvas, svg {
    max-width: 100%;
    display: block;
  }
  body {
    font-size: 16px;
  }
  ::selection {
    background: var(--bs-espol-1);
    color: var(--bs-c-8);
  }
}
html {
  background-color: var(--ods-institucional);
}
html, body {
  scrollbar-width: thin;
  scrollbar-color: var(--ods-widget-bg) var(--ods-institucional);
}
h2 {
  font-size: 1.35rem;
}
/* Scrollbar global universal */
*::-webkit-scrollbar {
  width: 8px;
}
*::-webkit-scrollbar-track {
  background: var(--ods-institucional);
}
*::-webkit-scrollbar-thumb {
  background-color: var(--ods-widget-bg);
  border-radius: 5px;
}
.scrolldown{
  transform: translateY(-30%);
  opacity: 0;
  filter: blur(15px);
  -webkit-filter: blur(15px);
  will-change: filter, opacity, transform;
}
/* FIN Scrollbar global universal */
/* Bloquear animaciones y transiciones hasta que la página este lista */
body.widget-ods-loader-wait * {
  transition: none !important;
  animation: none !important;
}
/* Fin Bloqueo de animaciones y transiciones */
/* Accesibilidad para SEO y lectores de pantalla */
.ods-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Loader pantalla de carga */
#widget-ods-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: hsl(var(--ods-h) var(--ods-s) var(--ods-l) / 80%);
  backdrop-filter: blur(25px);
  transition: opacity 500ms ease;
}
#widget-ods-loader .spinner {
  width: var(--nav-btn-acc);
  height: var(--nav-btn-acc);
  margin-bottom: 1em;
  border: 10px solid var(--bs-c-4);
  border-top: 10px solid var(--bs-espol-1);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
#widget-ods-loader .loader-text {
  color: var(--bs-c-4);
  font-family: 'Roboto', 'Helvetica', sans-serif;
  font-size: clamp(1rem, 0.3943rem + 3.4783vw,calc(0.6rem + 0.5vh + 0.2vw));
}
#widget-ods-loader[hidden] {
  opacity: 0;
  pointer-events: none;
}
/* Rueda ODS*/
.ods-1, .ods-1 span:nth-child(2)::before { color: var(--ods-color-1) !important; --rotation: calc(var(--ods-angulo) * 0); --ods-time: calc(250ms * 0); }
.ods-2, .ods-2 span:nth-child(2)::before { color: var(--ods-color-2) !important; --rotation: calc(var(--ods-angulo) * 1); --ods-time: calc(250ms * 1); }
.ods-3, .ods-3 span:nth-child(2)::before { color: var(--ods-color-3) !important; --rotation: calc(var(--ods-angulo) * 2); --ods-time: calc(250ms * 2); }
.ods-4, .ods-4 span:nth-child(2)::before { color: var(--ods-color-4) !important; --rotation: calc(var(--ods-angulo) * 3); --ods-time: calc(250ms * 3); }
.ods-5, .ods-5 span:nth-child(2)::before { color: var(--ods-color-5) !important; --rotation: calc(var(--ods-angulo) * 4); --ods-time: calc(250ms * 4); }
.ods-6, .ods-6 span:nth-child(2)::before { color: var(--ods-color-6) !important; --rotation: calc(var(--ods-angulo) * 5); --ods-time: calc(250ms * 5); }
.ods-7, .ods-7 span:nth-child(2)::before { color: var(--ods-color-7) !important; --rotation: calc(var(--ods-angulo) * 6); --ods-time: calc(250ms * 6); }
.ods-8, .ods-8 span:nth-child(2)::before { color: var(--ods-color-8) !important; --rotation: calc(var(--ods-angulo) * 7); --ods-time: calc(250ms * 7); }
.ods-9, .ods-9 span:nth-child(2)::before { color: var(--ods-color-9) !important; --rotation: calc(var(--ods-angulo) * 8); --ods-time: calc(250ms * 8); }
.ods-10, .ods-10 span:nth-child(2)::before { color: var(--ods-color-10) !important; --rotation: calc(var(--ods-angulo) * 9); --ods-time: calc(250ms * 9); }
.ods-11, .ods-11 span:nth-child(2)::before { color: var(--ods-color-11) !important; --rotation: calc(var(--ods-angulo) * 10); --ods-time: calc(250ms * 10); }
.ods-12, .ods-12 span:nth-child(2)::before { color: var(--ods-color-12) !important; --rotation: calc(var(--ods-angulo) * 11); --ods-time: calc(250ms * 11); }
.ods-13, .ods-13 span:nth-child(2)::before { color: var(--ods-color-13) !important; --rotation: calc(var(--ods-angulo) * 12); --ods-time: calc(250ms * 12); }
.ods-14, .ods-14 span:nth-child(2)::before { color: var(--ods-color-14) !important; --rotation: calc(var(--ods-angulo) * 13);  --ods-time: calc(250ms * 13); }
.ods-15, .ods-15 span:nth-child(2)::before { color: var(--ods-color-15) !important; --rotation: calc(var(--ods-angulo) * 14); --ods-time: calc(250ms * 14); }
.ods-16, .ods-16 span:nth-child(2)::before { color: var(--ods-color-16) !important; --rotation: calc(var(--ods-angulo) * 15); --ods-time: calc(250ms * 15); }
.ods-17, .ods-17 span:nth-child(2)::before { color: var(--ods-color-17) !important; --rotation: calc(var(--ods-angulo) * 16); --ods-time: calc(250ms * 16); }

.ods-line {
  position: absolute;
  inset: 50%;
  z-index: 1;
  width: 40%;
  max-width: calc(var(--ods-rueda-centro) / 2 * 1px);
  min-height: max-content;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  outline: 0.5em solid var(--ods-widget-bg);
  outline-offset: -1px;
  background: var(--ods-widget-bg) no-repeat center center;
  box-shadow: var(--ods-rueda-neumorphism-shadow);
  transform: translate(-50%, -50%);
  transition: all 525ms ease-in-out;
}
.ods-line h2 {
  height: 100%;
  display: flex;
  margin: 0;
  padding: var(--padding);
  justify-content: center;
  border-radius: 50%;
  font-family: 'RobotoCondensed-Bold', 'Roboto-Bold', 'Helvetica', sans-serif !important;
  font-size: clamp(1rem, calc(var(--π) * 0.1rem) + calc(var(--π) * 1vw), 4em) !important;
  color: var(--ods-titulo);
  align-items: center;
  text-align: center;
  opacity: 0;
  animation: FadeInTopODS 1s cubic-bezier(0.68,-0.55,0.27,1.55) 1s 1 normal forwards;
}
.ods-line[class^="ods-"].icon h2 {
  color: transparent;
  transition: color 300ms cubic-bezier(0.4, 0.5, 0.5, 1);
}
.ods-ul {
  position: relative;
  top: auto;
  left: 50%;
  width: 80%;
  max-width: calc(var(--ods-rueda-centro) * 1px);
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  margin: 0;
  overflow: clip;
  list-style: none;
  border-radius: 50%;
  color: var(--bs-c-4);
  transform: translate(-50%, 0%) rotate(10deg);
}
.ods-hover {
  overflow: hidden;
  opacity: 1;
  filter: blur(0px);
  -webkit-filter: blur(0px);
  z-index: 9;
  transition: all 125ms ease;
}
.ods-ul li:hover a,
.ods-ul li.ods-hover a {
  background: transparent;
  color: currentColor;
  opacity: 1 !important;
}
.ods-ul li:is(:focus, :active) a {
  background-color: currentColor;
  opacity: 1;
}
.ods-ul:hover > :not(:hover) {
  opacity: 0.8 !important;
  filter: blur(1px) opacity(1);
  -webkit-filter: blur(1px) opacity(1);
}
.ods-ul li {
  position: absolute;
  z-index: revert-layer;
  left: 50%;
  width: calc((300% + (var(--ods-total) * 1%) * 2 - (var(--ods-total) * var(--ods-gap))) / var(--ods-total));
  height: 100%;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--ods-total) * 1% - var(--ods-rueda-borde))  calc(var(--ods-total) * 1% + var(--ods-rueda-borde)), calc(var(--ods-total) * 1% + var(--ods-rueda-borde)) calc(var(--ods-total) * 1% + var(--ods-rueda-borde)));
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--ods-total) * 1% - var(--ods-rueda-borde))  calc(var(--ods-total) * 1% + var(--ods-rueda-borde)), calc(var(--ods-total) * 1% + var(--ods-rueda-borde)) calc(var(--ods-total) * 1% + var(--ods-rueda-borde)));
  background-color: currentColor;
  opacity: 0;
  font-weight: bold;
  contain: layout style paint;
  will-change: opacity, filter;
  transform: translateX(-50%) rotate(var(--rotation));
  animation: FadeInTopODS 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) calc(var(--ods-time) / 7) 1 normal forwards;
}
.ods-line,
[class^="ods-"].icon {
  background-size: 70% auto;
  background-origin: padding-box;
  background-clip: border-box;
}
.icon {
  background-color: currentColor !important;
  outline-color: currentColor !important;
}
.ods-1.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-1.webp'); }
.ods-2.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-2.webp'); }
.ods-3.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-3.webp'); }
.ods-4.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-4.webp'); }
.ods-5.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-5.webp'); }
.ods-6.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-6.webp'); }
.ods-7.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-7.webp'); }
.ods-8.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-8.webp'); }
.ods-9.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-9.webp'); }
.ods-10.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-10.webp'); }
.ods-11.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-11.webp'); }
.ods-12.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-12.webp'); }
.ods-13.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-13.webp'); }
.ods-14.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-14.webp'); }
.ods-15.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-15.webp'); }
.ods-16.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-16.webp'); }
.ods-17.icon { background-image: url('https://cdn.espol.edu.ec/images/icons/ODS_BN/ODS-BN_ODS-vector-BN-17.webp'); }
[class^="ods-"] a,
[class^="ods-"] a:focus-visible span:nth-child(2),
.ods-ul li:hover a span:nth-child(2)  {
  color: currentColor;
}
[class^="ods-"] a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 20%;
  padding-inline: var(--padding) calc(var(--padding) / 2);
  background: hsl(0deg 0% 100% / 35%);
  font-family: 'RobotoCondensed-Bold', sans-serif;
  font-size: clamp(0.4em, 1vw ,0.75rem);
  line-height: normal;
  opacity: 0.9;
  text-align: center;
  text-decoration: none;
}
[class^="ods-"] a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--bs-espol-1);
  background-color: currentColor;
}
[class^="ods-"] span:nth-child(1) {
  position: absolute;
  top: 0;
  color: var(--ods-texto);
  font-size: clamp(1.1rem, 3vw, calc(var(--ods-rueda-centro) * 0.0045em));
}
[class^="ods-"] span:nth-child(2) {
  position: relative;
  top: calc(var(--ods-total) * 1% + 1em);
  left: auto;
  width: calc(100% + var(--ods-total) * 1% - 1em);
  height: 100%;
  display: flex;
  align-items: center;
  padding-inline: calc(var(--padding) * 2);
  font-size: calc(var(--π) * 0.23em);
  line-height: 1lh;
  color: var(--ods-tipo-color);
  font-family: 'Roboto-Bold', 'Helvetica', sans-serif;
  text-align: start;
  text-transform: uppercase;
  border-radius: 0% calc(var(--ods-total) * 1%) calc(var(--ods-total) * 1%) 0% / 0% 100% 100% 0%;
  background: var(--ods-rueda-bg);
  transform: rotate(270deg);
}
.ods-hover span:nth-child(1) {
  top: 0% !important;
}
.ods-ul:hover > :not(:hover) span:nth-child(1) {
  top: 2%;
}
.ods-hover span:nth-child(2) {
  top: 22% !important;
}
[class^="ods-"] span:nth-child(2)::before {
  content: "";
  position: absolute;
  top: -27%;
  left: -90%;
  width: 100%;
  height: 150%;
  border-radius: 50%;
  background-color: currentColor;
}
/*FIN Rueda ODS*/
/* Widget ODS*/
#widget-ods-logo-institucional {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1;
  width: fit-content;
  max-width: max-content;
  margin: calc(var(--ods-padding) / 2);
  opacity: 0;
  animation: widgetLogoFadeIn 1s ease 1s 1 normal forwards;
}
#widget-ods-logo-institucional img {
  width: max(80px, 15vw);
  height: auto;
  object-fit: cover;
  object-position: center;
}
#widget-ods-logo-institucional [data-logo="light"],
html[data-bs-theme="dark"] #widget-ods-logo-institucional [data-logo="dark"] { display: block; }
#widget-ods-logo-institucional [data-logo="dark"],
html[data-bs-theme="dark"] #widget-ods-logo-institucional [data-logo="light"] { display: none; }
/* nav widget ODS */
nav#nav-widget-ods {
  position: fixed;
  z-index: 2;
  inset: auto 0;
  inset-inline-start: calc(100% - (var(--padding) * 2) - (var(--ods-padding) * 2) - 450px - (var(--nav-btn-acc) * 5));
  width: max-content;
  height: auto;
  padding: var(--padding);
  pointer-events: all;
}
nav#nav-widget-ods ul {
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: 0.7em;
}
/* FIN nav widget ODS */
/* botones de accesibilidad */
.btn-acc {
  width: var(--nav-btn-acc);
  height: var(--nav-btn-acc);
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50px;
  color: var(--bs-c-4);
  cursor: pointer;
  font-family: 'Roboto', 'Roboto-Bold', 'Helvetica', sans-serif;
  font-size: clamp(0.5rem, 0.3rem + 3vw, calc(0.2rem + 1.2vh + 0.2vw));
  font-style: oblique;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
/* Toggle-switch claro/oscuro/alto contraste */
.darkmode-switch {
  position: relative;
  display: inline-block;
  width: calc(var(--nav-btn-acc) * 2);
  height: calc(var(--nav-btn-acc) + 2px);
}
.darkmode-switch input {
  appearance: none;
  width: inherit;
  height: inherit;
}
.btn-acc,
.ods-toggle {
  background-color: var(--ods-btn-acc-bg);
  box-shadow: inset 4px 4px 8px hsla(0, 0%, 0%, 0.15),
              inset -4px -4px 8px hsla(0, 0%, 0%, 0);
}
.ods-toggle {
  position: absolute;
  inset: 0;
  cursor: pointer;
  border-radius: 50px;
  will-change: background, border-radius;
}
.ods-toggle:before {
  content: "";
  left: 0.25em;
  z-index: 2;
  border-radius: 50px;
  background-color: var(--bs-c-5);
}
.ods-toggle:before,
:is(.light-mode, .dark-mode) svg {
  position: absolute;
  top: 0.25em;
  aspect-ratio: 1 / 1;
  width: calc(var(--nav-btn-acc) - 0.4em);
  height: calc(var(--nav-btn-acc) - 0.4em);
}
:is(.light-mode, .dark-mode) svg {
  z-index: 1;
  cursor: pointer;
}
.light-mode svg {
  left: calc(var(--nav-btn-acc) + 0.2em);
  fill: var(--bs-c-4);
}
.dark-mode svg {
  left: 0.1em;
  fill: var(--bs-espol-1);
}
.darkmode-switch:is(:hover, :focus) svg {
  fill: var(--nav-btn-acc-color);
}
#toggle-switch:checked + .ods-toggle:before {
  transform: translate(calc(var(--nav-btn-acc) - 0.1em));
}
:is(.btn-acc, .ods-toggle):is(:hover, :focus) {
  color: var(--nav-btn-acc-color);
  box-shadow:  4px 4px 8px hsla(0, 0%, 0%, 0.25),
             -4px -4px 8px hsla(0, 0%, 100%, 0.1);
}
.btn-acc:is(:hover, :focus) {
  font-weight: bolder;
  background-color: transparent;
}
/* Botón de alto contraste */
#btn-acc-contrast svg {
  fill: var(--bs-c-4);
  scale: 0.8;
}
#btn-acc-contrast[aria-pressed="true"],
#btn-acc-contrast:is(:hover, :focus) svg {
  fill: var(--nav-btn-acc-color);
}
#btn-acc-contrast[aria-pressed="true"],
[data-theme=high-contrast] .btn-acc:is(:hover, :focus) {
  background: yellow;
}
#btn-acc-contrast[aria-pressed="true"] svg {
  fill: black;
}
[data-theme=high-contrast] :is(
  [class^="ods-"] a,
  footer#widget-ods-footer,
  #widget-ods-descripcion) {
    background-color: transparent;
    opacity: 1;
}
[data-theme=high-contrast] .ods-line,
[data-theme=high-contrast] :is(#widget-ods-noticias-espol, .widget-ods-cifras details) {
  box-shadow: none;
}
[data-theme=high-contrast] .ods-line h2 {
  color: rgb(255, 255, 255);
}
[data-theme=high-contrast] .widget-valor-lista {
  background-color: transparent;
}
[data-theme=high-contrast] #widget-ods-aside {
  background: var(--ods-institucional);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-theme=high-contrast] :is(
  #widget-ods-noticias-espol,
  .widget-ods-cifras details) {
  border: 1px solid currentColor !important;
}
[data-theme=high-contrast] :is(
  #widget-ods-resultados :not(#widget-ods-noticias-espol) a) {
  border-bottom: 1px solid currentColor;
}
[data-theme=high-contrast] section:has(#widget-ods-ESPOL) {
  background: white;
}
[data-theme=high-contrast] .btn-acc {
  border: 2px solid rgb(0, 0, 0);
  box-shadow: none;
}
[data-theme=high-contrast] .darkmode-switch:is(:hover, :focus) svg {
  fill: yellow;
}
[data-theme=high-contrast] .widget-ods-bar-fill {
  background: var(--ods-bar-c-1, #8ee090);
}
[data-theme=high-contrast] .widget-ods-bar {
  background: rgb(0, 0, 0);
  border: 1px solid white;
}
/* Fin botones de accesibilidad */
/* Handle de arrastre */
.ods-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  font-size: 1em;
  border-radius: 50px;
  cursor: grab;
  user-select: none;
  padding: calc(var(--ods-padding) / 3);
}
.ods-drag-handle:active {
  cursor: grabbing;
  background: var(--bs-c-6);
}
.widget-ods-cifras.dragging {
  opacity: 0.6;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.12);
}
.widget-ods-cifras.drop-target {
  outline: 2px dashed var(--bs-espol-1);
  background: var(--ods-widget-lista-bg);
}
/* Fin Handle de arrastre */
/* Main Widget ODS */
nav#nav-widget-ods,
#widget-ods-ESPOL,
footer#widget-ods-footer {
  display: flex;
  flex-direction: var(--ods-direction);
}
#main-widget-ods {
  height: 100dvh;
  overflow: hidden;
}
#widget-ods-ESPOL {
  position: relative;
  height: 100dvh;
  flex-wrap: nowrap;
}
section:has(#widget-ods-ESPOL) {
  position: relative;
  z-index: auto;
  background: var(--ods-vibrant-gradient);
  background-blend-mode: screen, lighten, normal;
  will-change: background-size;
}
#widget-ods-ruleta {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 min(700px, 100%);
}
#widget-ods-aside {
  block-size: 100dvh;
  overflow: auto;
  flex: 0 0 min(450px, 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: var(--ods-padding);
  color: var(--ods-parrafo);
  font-family: 'Roboto', 'Helvetica', sans-serif;
  background: var(--ods-institucional);
  background: linear-gradient(
    145deg,
    hsl(var(--ods-h) var(--ods-s) var(--ods-l)) 0%,
    hsl(var(--ods-h) var(--ods-s) calc(var(--ods-l) - var(--ods-delta))) 100%);
  scroll-snap-type: y mandatory;
  scrollbar-gutter: auto;
  -webkit-overflow-scrolling: touch;
}
#widget-ods-noticias-espol {
  height: auto;
  border: none !important;
  padding-block: calc(var(--ods-padding) / 1.5);
  text-align: center;
}
#widget-ods-resultados {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--ods-padding) / 4);
}
#widget-ods-resultados :not(.widget-ods-cifras) a {
  display: flex;
  align-items: center;
  padding-block: calc(var(--ods-padding) / 4);
  padding-inline: calc(var(--ods-padding) / 2);
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
  will-change: background-color;
}
#widget-ods-resultados li:last-child > a {
  border-bottom: none !important;
}
.widget-ods-cifras details:hover,
#widget-ods-noticias-espol:hover {
  background-color: hsla(0, 0%, 100%, 0.2);
}
#widget-ods-resultados li a:hover {
  background-color: var(--ods-widget-lista-bg);
}
#widget-ods-resultados :is(li, a) {
  color: currentColor;
  font-size: clamp(0.8rem, 0.1rem + 0.9vw, calc(0.3rem + 1.1vh + 0.1vw));
  text-decoration: none;
}
#widget-ods-resultados > li:has(details[open]) {
  border: none;
}
.widget-ods-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--ods-padding);
  text-align: center;
}
.widget-ods-total,
#widget-ods-noticias-espol,
#widget-ods-resultados :is(li, a) {
  scroll-snap-align: start;
}
.widget-ods-total h2 {
  font-size: clamp(1rem, 0.3943rem + 3.4783vw,calc(0.6rem + 1.5vh + 0.2vw));
  font-weight: 300;
}
.widget-ods-total span {
  font-size: clamp(2.5rem, 4vw + 2rem, 6rem);
  font-weight: bold;
  font-family: 'Roboto-Bold', 'Helvetica', sans-serif;
  font-display: swap;
}
#widget-ods-noticias-espol,
.widget-ods-cifras details {
  width: 100%;
  display: block;
  border-radius: var(--ods-radiussm);
  background-color: hsla(0, 0%, 100%, 0.1);
  cursor: pointer;
  justify-items: stretch;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.widget-ods-cifras details {
  height: auto;
  padding: calc(var(--ods-padding) / 3);
}
.widget-ods-cifras summary {
  position: relative;
  list-style-position: inside;
}
.widget-ods-cifras summary strong {
  height: 100%;
  font-size: 200%;
}
.widget-ods-cifras summary small {
  font-size: 85%;
  font-family: 'RobotoCondensed-Bold';
}
.mayor-aporte-ods::after {
  content: '\f091';
  margin-left: 10px;
  background: var(--ods-cifras-best);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  font-family: var(--font-icons);
}
#widget-ods-noticias-espol h2,
.widget-ods-cifras details > summary:first-of-type {
  padding-inline: calc(var(--ods-padding) / 2);
}
.widget-ods-cifras details > summary:first-of-type {
  height: 100%;
  align-items: center;
  counter-increment: list-item 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: flex-start;
  list-style: none;
}
details summary::-webkit-details-marker {
  display:none;
}
.widget-ods-cifras details summary::after {
  content: '\2b';
  font-family: var(--font-icons);
  position: absolute;
  right: calc(var(--ods-padding) / 6);
}
.widget-ods-cifras details[open] summary::after {
  content: '\f068';
}
.widget-ods-cifras {
  position: relative;
  display: flex;
  align-items: center;
}
.widget-ods-cifras:has(details[open]) > span,
.widget-ods-cifras details[open] + span,
.widget-ods-cifras[data-details-open] > span {
  height: auto;
}
.widget-ods-cifras:has(details[open]) > span {
  top: 1.5em;
}
.widget-ods-cifras details > *:not(summary) {
  display: none;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
.widget-ods-cifras details[open] > *:not(summary) {
  display: block;
  opacity: 1;
  max-height: 100%;
  animation: slideDown 0.3s ease-out;
}
.widget-ods-cifras h3 {
  padding-inline-end: calc(var(--ods-padding) / 3);
  font-size: clamp(0.8rem, 0.2vw + 0.9rem, 1.2rem);
}
.widget-ods-cifras h3,
.widget-ods-cifras details summary {
  padding-block: 5px;
}
.widget-valor-lista {
  background-color: hsla(0deg 0% 0% / 0.2);
  border-radius: var(--ods-radiusxs);
  display: flex;
  flex-direction: column;
  gap: calc(var(--ods-padding) / 5);
}
.widget-valor-lista-header {
  width: 100%;
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  padding: calc(var(--ods-padding) / 2);
  text-align: center;
}
.widget-valor-lista-header,
#widget-ods-resultados :not(.widget-ods-cifras) a {
  justify-content: space-between;
}
#widget-ods-resultados li:first-child:has(.widget-valor-lista-header) {
  background-color: var(--ods-widget-lista-bg);
  border-radius: var(--ods-radiusxs) var(--ods-radiusxs) 0 0;
  cursor: auto;
}
#widget-ods-resultados > li:first-child:has(.widget-valor-lista) {
    border-radius: var(--ods-radiussm);
}
.widget-valor-lista-header li {
  position: relative;
  display: flex;
  align-items: center;
  font-family: 'Roboto-Bold';
  text-align: left;
}
.widget-valor-lista-header li:not(:last-child)::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  right: 0;
  background-color: currentColor;
  opacity: 0.3;
}
#widget-ods-resultados a > span,
.widget-valor-lista-header li:nth-child(1) {
  flex: 0 0 30%
}
.widget-ods-bar,
.widget-valor-lista-header li:nth-child(2) {
  flex: 0 0 50%;
}
.widget-valor-lista-header li:nth-child(2) {
  padding-inline: var(--wvlh-gap);
  justify-content: center;
}
#widget-ods-resultados a strong,
.widget-valor-lista-header li:nth-child(3) {
  flex: 0 0 20%;
  justify-content: flex-end;
  text-align: right;
}
:is(nav, #widget-ods-resultados, #widget-ods-noticias-espol) :is(:focus-visible) {
  background-color: hsla(0deg 0% 0% / 0.3);
  outline: 2px solid var(--bs-espol-1);
  outline-offset: 5px;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: var(--ods-radiussm);
}
.ods-valor {
  align-items: center;
  display: inline-flex;
  font-family: 'Roboto-Bold', 'Helvetica', sans-serif;
  font-weight: bold;
}
#widget-ods-descripcion {
  padding-block: var(--padding);
  text-align: center;
  font-size: 0.7rem;
  opacity: 0.3;
}
/* FIN Main Widget ODS */
/* Widgets ODS Footer */
footer#widget-ods-footer {
  position: fixed;
  z-index: 0;
  inset: auto auto 0 0;
  width: max-content;
  justify-content: center;
  padding: calc(var(--ods-padding) / 2);
  color: var(--ods-titulo);
  text-align: left;
  font-family: 'open sans', 'Helvetica', sans-serif;
  font-size: clamp(0.4rem, 0.2rem + 3.2vw, calc(0.4rem + 0.5vh + 0.2vw));
  opacity: 0.3;
}
footer#widget-ods-footer a {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
footer#widget-ods-footer a:is(:hover, :focus){
  color: var(--bs-espol-1);
  outline: none;
}
/* FIN Widgets ODS Footer */
/* Barras y estadisticas */
.widget-ods-bar {
  height: calc(var(--ods-padding) / 2);
  background-color: hsla(0, 0%, 0%, 0.289);
  border-radius: 50px;
  overflow: hidden;
}
.widget-ods-bar-fill {
  width: var(--bar-wth);
  height: 100%;
  color: var(--bs-c-8);
  background: linear-gradient(0deg, var(--ods-bar-c-1, #8ee090) 0%, var(--ods-bar-c-2, #8ee090) 100%), #8ee090;
}
.ods-bar-percent {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto-Bold';
  font-size: 0.7rem;
}
.w-light {
  color: var(--bs-c-8) !important;
}
.w-dark {
  color: var(--bs-c-4) !important;
}
/* Fin Barras y estadisticas */
@media (max-width: 992px) {
  [class^="ods-"] span:nth-child(1) {
    top: 0.5vw;
  }
  [class^="ods-"] span:nth-child(2) {
    font-size: calc(0.25vh + 0.25vw * var(--π));
  }
  .widget-valor-lista-header {
    gap: 0;
  }
  nav#nav-widget-ods {
    width: fit-content;
    inset: 0 0 auto auto;
  }
  nav#nav-widget-ods ul {
    flex-direction: column-reverse;
    align-items: flex-end;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #main-widget-ods {
    overflow: unset;
  }
  #widget-ods-ESPOL {
    height: auto;
    flex-direction: column-reverse;
  }
  #widget-ods-ruleta {
    position: sticky;
    top: 0;
    padding: var(--ods-padding);
  }
  #widget-ods-aside {
    z-index: 1;
    flex: 0 1 100%;
    border-top-left-radius: var(--ods-radiusbg);
    border-top-right-radius: var(--ods-radiusbg);
    background: linear-gradient(145deg,
                hsl(var(--ods-h) var(--ods-s) var(--ods-l) / var(--ods-transparencia)) 0%,
                hsl(var(--ods-h) var(--ods-s) calc(var(--ods-l) - var(--ods-delta)) / var(--ods-transparencia)) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  #widget-ods-resultados {
    flex-direction: row;
    flex-wrap: wrap;
  }
  #widget-ods-resultados > :is(li, a):first-child {
    flex: 1 0 100%;
  }
  #widget-ods-resultados > :is(li, a) {
    flex: 1 0 calc(50% - var(--padding));
  }
  footer#widget-ods-footer {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 768px) {
/*Rueda ODS*/
  [class^="ods-"] span:nth-child(1) {
    position: relative;
    top: 3vw !important;
  }
  [class^="ods-"] span:nth-child(2) {
    display: none;
  }
  [class^="ods-"] a::after {
    content: "";
    position: relative;
    top: 6vw;
    left: 0;
    width: 200%;
    height: 50%;
    border-radius: 50%;
    background-color: currentColor;
  }
  .ods-ul:hover > :not(:hover) {
    opacity: 0.4 !important;
  }
}
@media only screen and (max-width: 896px) and (orientation: landscape) {
  [class^="ods-"] span:nth-child(1) {
    position: relative;
  }
  [class^="ods-"] span:nth-child(2) {
    display: none;
  }
  .ods-ul {
    width: 65%;
  }
  .ods-line {
    width: 30%;
  }
  .ods-line h2 {
    font-size: 1.3rem !important;
  }
  #main-widget-ods {
    overflow: hidden;
  }
  #widget-ods-ESPOL {
    flex-direction: row-reverse;
  }
  #widget-ods-aside {
    flex: 1 1 80%;
    border-radius: 0px;
  }
  #widget-ods-ruleta {
    position: relative;
    padding: calc(var(--ods-padding) / 2);
  }
  nav#nav-widget-ods {
    inset-inline-start: 41%;
    padding: calc(var(--ods-padding) / 4);
  }
  #widget-ods-logo-institucional {
    margin: calc(var(--ods-padding) / 4)
  }
  #widget-ods-logo-institucional img {
    width: 70px;
  }
  footer#widget-ods-footer {
    justify-content: flex-end;
    text-align: left;
    font-size: 0.5rem;
  }
}
@media (max-width: 480px) { 
  nav#nav-widget-ods ul {
    position: absolute;
  }
  #widget-ods-resultados > :is(li, a) {
    flex: 1 0 100%;
  }
  #widget-ods-resultados details :is(li, a) {
    --ods-r-padding: 0.4em;
    padding-block: var(--ods-r-padding);
  }
  .widget-valor-lista {
    padding-block-start: calc(var(--ods-r-padding) * 2);
  }
  nav#nav-widget-ods {
    padding: calc(var(--padding) / 2);
  }
  .widget-ods-bar {
    height: var(--ods-padding);
  }
  #widget-ods-noticias-espol h2,
  .widget-ods-cifras details > summary:first-of-type,
  .widget-ods-cifras details  {
    padding-inline: var(--ods-padding);
  }
  .widget-ods-cifras details summary::after {
    right: calc(var(--ods-padding) / 2);
  }
  .ods-drag-handle {
    left: calc(var(--ods-padding) / 2);
  }
   .widget-ods-cifras details[open] {
    padding-block-end: var(--ods-padding);
  }
}
@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme]) #widget-ods-logo-institucional [data-logo="light"] { display: none; }
  html:not([data-bs-theme]) #widget-ods-logo-institucional [data-logo="dark"] { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  .ods-line h2 {
    transition: all 1s 500ms cubic-bezier(0, 0, 0, 1);
  }
  .ods-ul {
    transition: all 425ms ease-out;
  }
  [class^="ods-"] a {
    transition: background 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  [class^="ods-"] span {
    transition: all 730ms cubic-bezier(0.42, 0, 0.2, 1);
  }
  .ods-ul:hover > :not(:hover) span:nth-child(2) {
    top: 40%;
    opacity: 0.8;
  }
  .icon {
    box-shadow: inset 5px 5px 10px currentcolor, inset -5px -5px 10px currentColor;
  }
  .widget-ods-cifras details,
  #widget-ods-resultados a {
    transition: background-color 450ms ease;
  }
  .widget-ods-cifras details::details-content {
    block-size: 0;
    transition: block-size 350ms cubic-bezier(0.05, 1, 1, 1), content-visibility 350ms cubic-bezier(0.05, 0.05, 0.5, 1);
    transition-behavior: allow-discrete;
    -webkit-transition-behavior: allow-discrete;
  }
  .widget-ods-cifras details[open]::details-content {
    block-size: auto;
  }
  .widget-ods-cifras details summary::before {
    transform: rotate(90deg);
    will-change: transform;
    transition: transform 350ms cubic-bezier(1, 0.05, 0.5, 1);
  }
  .widget-ods-cifras details[open] summary::before {
    transform: rotate(180deg);
    will-change: transform;
    transition: transform 300ms cubic-bezier(0.05, 1, 1, 1);
  }
  .widget-ods-cifras details > *:not(summary) {
    transition: opacity 300ms ease, max-height 300ms ease;
  }
  nav#nav-widget-ods,
  .btn-acc,
  :is(.light-mode, .dark-mode, #btn-acc-contrast) svg,
  .ods-toggle,
  .ods-toggle:before {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.28, 1.55), opacity 1s ease-out;
  }
  .darkmode-switch:hover .light-mode svg {
    animation: rotarlightmode 17s linear infinite;
  }
  .darkmode-switch:hover .dark-mode svg {
    animation: bouncedarkmode 5s linear infinite;
  }
  section:has(#widget-ods-ESPOL){
    animation: odsbackanim 10s infinite alternate;
  }
  #btn-acc-contrast[aria-pressed="true"] {
    transform: rotate(180deg);
  }
  .ods-drag-handle {
    transition: background 0.2s, color 0.2s;
  }
  @media (max-width: 768px) {
    .ods-hover * {
      filter: blur(10px);
      -webkit-filter: blur(10px);
      transition: filter 730ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    box-shadow: none !important; -webkit-box-shadow: none !important;
    filter: none !important; -webkit-filter: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    transition: none !important; -webkit-transition: none !important;
    animation: none !important; -webkit-animation: none !important;
    }
  #widget-ods-logo-institucional,
  .ods-line h2,
  .ods-ul li {
    opacity: 1 !important;
  }
}
@media (forced-colors: active) {
  body {
    background: Window;
    color: WindowText;
  }
  #widget-ods-aside {
    background: Window !important;
    border: 1px solid Highlight !important;
    color: WindowText !important;
  }
  [class^="ods-"] span:nth-child(1) {
    color: WindowText !important; 
  }
}
/* FIN Widget ODS */
/* Animaciones */
@keyframes FadeInTopODS {
	0% {
    opacity: 0;
    scale: 0.5;
	}
	100% {
    opacity: initial;
    scale: 1;
	}
}
@keyframes widgetLogoFadeIn {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes rotarlightmode {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes bouncedarkmode {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes odsbackanim {
  0% {
      background-size: 100% 100%;
  }
  50% {
      background-size: 400% 400%;
  }
  100% {
      background-size: 100% 100%;
  }
}
@keyframes slideDown {
  0% {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    max-height: auto;
    transform: translateY(0);
  }
}
/* Fin Animaciones */
/*code*/
code {
  display: none;
  position: fixed;
  top: 0;
  z-index: 999999;
  font-family: monospace;
  color:white;
  text-shadow: black 0px 0px 5px;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.6em;
}
/* Login User */
form.openid-connect-login-form {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0 auto;
    border: 1px solid var(--bs-espol);
    border-radius: 6px;
    background-color: var(--bs-c-4);
    background-image: url('data:image/png;base64,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');
    background-position: 10px, left;
    background-size: 10%;
    background-repeat: no-repeat;
    color: var(--bs-espol);
    font-weight: 500;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    isolation: isolate;
    will-change: background-color, color;
    transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}
form.openid-connect-login-form:hover {
    background-color: var(--bs-espol);
    color: var(--bs-c-4);
}
form.openid-connect-login-form input {
    padding-inline: 45px 15px;
    padding-block: 10px;
    border-color: transparent !important;
    color: unset !important;
    background-color: transparent !important;
}
form.openid-connect-login-form input:active {
    background-color: transparent !important;
}
.login-page main{
    height: 100dvh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto', 'Helvetica', sans-serif;
    background: var(--bs-c-7);
}
.login-page :is(nav, form#user-login-form) {
    display: none;
}
/* Fin Login User */