/*
 Archivo: colores.css
 Descripción: Archivo de variables y utilidades de color para todos los sitios webs de la ESPOL 2025.
 Define la paleta institucional, colores complementarios, gradientes, fondos, temas claro/oscuro y utilidades visuales globales mediante variables CSS.
 Permite mantener coherencia visual, facilitar el mantenimiento y la personalización de la identidad gráfica en toda la plataforma.

 Autor: Amhed Flores
 Mantenimiento: Equipo de desarrollo ESPOL
 Última actualización: 15 de agosto de 2025
*/
@property --espol { 
  syntax: '<color>';
  inherits: false;
  /* << establecer color Institucional de la ESPOL basado en el manual de marca >> */
  initial-value: #223265;
}
:root,
[data-bs-theme=light] {
  --bs-espol: var(--espol);
  --bs-espol-nav: var(--bs-espol);
  --bs-espol-1: #29abe2;
  --bs-espol-2: #004c93;
  --bs-espol-temporal: #642d91;
  --bs-espol-1-opc: rgba(41, 171, 226, var(--transparencia));
  --bs-c-0: #dedede; /* Complementario 1*/
  --bs-c-0-opc: rgba(222, 222, 222, var(--transparencia));
  --bs-c-1: rgb(var(--bs-centro-c-c)); /* Centro Complementario*/
  --bs-c-1-opc: rgba(var(--bs-centro-c-c),var(--transparencia));
  --bs-c-2: #d5d5d5; /* Complementario 2*/
  --bs-c-2-opc: rgba(213, 213, 213, var(--transparencia));
  --bs-c-3: #121212; /* Complementario 3*/
  --bs-c-3-opc: rgba(18, 18, 18, var(--transparencia));
  --bs-c-4:#f2f2f2; /* Complementario 4*/
  --bs-c-4-opc:rgba(242, 242, 242, var(--transparencia));
  --bs-c-5: #e5e5e5; /* Complementario 5*/
  --bs-c-5-opc: rgba(229, 229, 229, var(--transparencia));
  --bs-c-6:#707070; /* Complementario 6*/
  --bs-c-6-opc: rgb(112, 112, 112, var(--transparencia));
  --bs-c-7: #2a2f34; /* Complementario 7*/
  --bs-c-7-opc: rgba(42, 47, 52, var(--transparencia));
  --bs-c-8: #202020; /* Complementario 8*/
  --bs-c-8-opc: rgba(32, 32, 32, var(--transparencia));
  --bs-c-9: #0f0f0f; /* Complementario 9*/
  --bs-c-9-opc: rgba(15, 15, 15, var(--transparencia));
  --bs-c-10: #262626; /* Complementario 10*/
  --bs-autocolor: var(--bs-centro-color);
  --bs-contrast: var(--bs-c-1);
  --bs-light: var(--bs-c-2);
  --bs-main: var(--bs-c-5);
  --bs-main-1: var(--bs-c-0);
  --bs-main-2: var(--bs-c-4);
  --bs-centro-color-opc: rgba(var(--bs-shadow-btn), var(--transparencia));
  --bs-logo-centro: var(--espol);
  --bs-nav-tag: var(--bg-espol);
  --bs-nav-bg: rgba(255, 255, 255,var(--transparencia));
  --bs-nav-color:#f2f2f2;
  --bs-body-color: var(--bs-c-8);
  --bs-nav-text: var(--bs-espol);
  --bs-nav-menu: var(--bs-espol);
  --bs-nav-submenu:linear-gradient(0deg, var(--bs-c-4) 0%, white 100%);
  --bs-espol-opc:rgba(34, 50, 101, var(--transparencia));
  --bs-centro-color-complementario: var(--bs-c-1);
  --bs-slider: var(--bs-centro-color);
  --bs-slider-bg:var(--bs-centro-color);
  --bs-slider-gradient: linear-gradient(90deg, rgba(242, 242, 242, 0.85) 50%, rgba(242, 242, 242, 0) 100%);
  --bs-slider-glassmorphism-2: var(--bs-c-4);
  --bs-slider-glassmorphism: var(--bs-c-4-opc);
  --bs-slider-glassmorphism-text: var(--bs-c-8);
  --box-shadow-btn:  0 10px 15px -3px rgba(var(--bs-shadow-btn),0.5), 0 4px 6px -2px rgba(var(--bs-shadow-btn),0.1);
  --bs-bg-opc: linear-gradient(180deg, var(--bs-c-1-opc) 50%, var(--bs-centro-color-opc) 100%);
  --card-title: var(--bs-c-8);
  --card-title-2: var(--bs-centro-color);
  --card-title-3: var(--bs-centro-color);
  --card-bg:var(--bs-c-4);
  --card-bg-flip:var(--bs-c-5);
  --card-back: var(--bs-c-4);
  --card-txt: var(--bs-c-6);
  --card-btn: 2px 2px 4px rgba(0,0,0,0.1), -2px -2px 4px white;
  --card-btn-hover:var(--bs-c-5);
  --card-neurmorphism-bg: linear-gradient(145deg, white, #f2f2f2);
  --card-neurmorphism-box: 4px 4px 10px rgba(0,0,0,0.1), -4px -4px 10px white;
  --card-neurmorphism-bg-hover: linear-gradient(145deg, #e4e4e4, #f4f4f4);
  --card-neurmorphism-box-hover: 7px 7px 14px #c2c2c2, -7px -7px 14px white;
  --card-about:var(--bs-centro-color);
  --acordeon-title: var(--bs-c-8);
  --acordeon-bg:white;
  --acordeon-bg-hover:var(--bs-c-4);
  --acordeon-bg-border:var(--bs-c-5);
  --close_btn: #D95C59;
  --border-video: var(--bs-c-8);
  --bs-footer-1:var(--bs-c-6);
  --nightmode: linear-gradient(to right, #090613ef, #18151f);
  --neumorphism-nav: 3px 3px 5px #1c2a54, -3px -3px 5px #283b76;
  --neumorphism-nav-active:  inset 3px 3px 5px #1a264c, inset -3px -3px 5px #2b3f7e;
  --bg-interes: var(--bs-centro-color-opc);
  --bg-link: var(--bs-c-4-opc);
  --bg-patrocino: linear-gradient(to right, transparent, black 10% 90%, transparent);
  --p-filter: grayscale(100%);
  --border-line: var(--bs-c-2);
  --succes: #15a757;
  --error: #d23939;
  --alert: #e8b833;
  --info: #1b9ada;
}
[data-bs-theme=dark] {
  --bs-espol-nav:var(--bs-c-3);
  --bs-espol-opc :rgba(0, 0, 0, var(--transparencia));
  --bs-contrast: var(--bs-centro-color);
  --bs-main: #1c1c1d;
  --bs-main-1: var(--bs-c-9);
  --bs-main-2: var(--bs-c-7);
  --bs-nav-tag: rgb(0, 0, 0,0.5);
  --bs-nav-bg:rgba(32, 32, 32, var(--transparencia));
  --bs-nav-text: var(--bs-c-4);
  --bs-nav-menu: var(--bs-c-4);
  --bs-body-color: var(--bs-c-4);
  --bs-nav-submenu:linear-gradient(0deg, var(--bs-c-8) 0%, black 100%);
  --nightmode: linear-gradient(to right, var(--bs-c-7), var(--bs-c-7));
  --bs-centro-color-complementario: var(--bs-c-9);
  --bs-autocolor:var(--bs-c-10);
  --bs-light: var(--bs-c-10);
  --neumorphism-nav: 3px 3px 5px #000000, -3px -3px 5px #151515;
  --neumorphism-nav-active: inset 3px 3px 5px #000000, inset -3px -3px 5px #0f0f0f;
  --bs-slider-bg:var(--bs-c-8);
  --bs-slider-gradient: linear-gradient(90deg, rgba(32, 32, 32,0.85) 50%, rgba(32, 32, 32,0) 100%);
  --bs-slider-glassmorphism-2: var(--bs-c-8);
  --bs-slider-glassmorphism: var(--bs-c-8-opc);
  --bs-slider-glassmorphism-text: var(--bs-c-4);
  --bs-footer-1:var(--bs-c-4);
  --bs-logo-centro:white;
  --bs-bg-opc: linear-gradient(180deg, var(--bs-c-8-opc) 50%, var(--bs-c-7-opc) 100%);
  --card-title: var(--bs-c-4);
  --card-title-2: var(--bs-c-6);
  --card-title-3: var(--bs-c-4);
  --card-bg:var(--bs-c-7);
  --card-bg-flip:var(--bs-c-10);
  --card-back: var(--bs-c-8);
  --card-txt: var(--bs-c-4);
  --card-btn: 2px 2px 4px #181818, -2px -2px 4px #282828;
  --card-btn-hover:var(--bs-c-8);
  --card-neurmorphism-bg: linear-gradient(145deg, #303030, #282828);
  --card-neurmorphism-box: 4px 4px 10px #1b1b1b, -4px -4px 10px #202020;
  --card-neurmorphism-bg-hover: linear-gradient(145deg, #1d1d1d, #222222);
  --card-neurmorphism-box-hover:  7px 7px 14px #1b1b1b, -7px -7px 14px #252525;
  --acordeon-bg:var(--bs-c-9);
  --acordeon-title: var(--bs-centro-color);
  --acordeon-bg-hover:var(--bs-c-8);
  --acordeon-bg-border:var(--bs-c-7);
  --border-video: var(--bs-c-6);
  --bg-interes: var(--bs-c-7-opc);
  --bg-link: var(--bs-c-8-opc);
  --p-filter: contrast(0.3);
  --border-line: var(--bs-c-7);
  --succes: #13ce66;
  --error: #ff4949;
  --alert: #ffc82c;
  --info: #1fb6ff;
}