:root {
  --azul: #0077B6;
  --azul-claro: #86b6fb;
  --azul-oscuro: #1440a1;
  --azul-card:#023EA8;
  --hoverCard: #84a6ee;
  --textCard: #000000;
  --gris-1: #f7f7f7;
  --gris-2: #c9c8c8;
  --gris-3: #5d5d5d;
  --gris-4: #333;
  --sombra-1: 0 1px 5px rgba(0, 0, 0, 0.2);
  --sombra-2: 2px 2px 4px 0 rgba(209, 119, 119, 0.2);
  --borde: 1px solid #c7c7c7;
  --logo: url("../imgs/logo-zyneko.svg");
  --bg-table: #F0F8FF;
  --bg-th: #0077B6;
  --color-th: #FFFFFF;
  --bg-odd: #E0F2FF;
  --bg-even: #FFFFFF;
  --hover: #CAF0F8;
  --border: #B0C4DE;
  --text: #023E8A;
  --btn-bg: #0096C7;
  --btn-color: #FFFFFF;
  --body-bg: #FFFFFF;
  --box-shadow:rgba(0, 0, 0, 0.25);
  --tools: url("../imgs/pencil-square.svg");  
  --border-table: #B0C4DE;  
  --exit: url("../imgs/exit.svg");  
  --estrella: url("../imgs/estrella.svg");
  --estrellaRellena: url("../imgs/estrellaRellena.svg");  
  --border-tools: #B0C4DE;
  --text-tools: #383838;
  --label-tools: #023E8A;
  --bg-tools: #f0f8ff;
  --hr: black;
  --menu-hr: rgba(220, 220, 220, 0.5);
  --link: blue;
  --scrollbar-1: #0077B6;
  --scrollbar-2: #f1f1f1;
  --filtroTabla: #3ac53a;
  --sinFiltro: url("../imgs/sinFiltro.svg");
  --sinOrden: url("../imgs/sinOrden.svg");
  --hamburguesa1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23023E8A' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  --hamburguesa2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23023E8A' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  --menu-text: #023E8A;
  --menu-bg: #F8FAFC;
  --menu-border: #B0C4DE;
  --table-filter-bg: #E0F2FF;
  --table-filter-text: #023E8A;
  --table-filter-border: #B0C4DE;
  --table-result-bg: #FAFCFF;
  --table-result-hover: #D4E8FF;
}

[data-theme="dark"] {
  --azul: #0077B6;
  --azul-claro: #86b6fb;
  --azul-oscuro: #1440a1;
  --azul-card:#86b6fb;
  --hoverCard: #1e3a6a;
  --textCard: #ffffff;
  --gris-1: #f7f7f7;
  --gris-2: #c9c8c8;
  --gris-3: #5d5d5d;
  --gris-4: #333;
  --bg-table: #0A192F;
  --bg-th: #112D4E;
  --color-th: #F0F8FF;
  --bg-odd: #0D1B2A;
  --bg-even: #1B263B;
  --hover: #274472;
  --border: #3E5060;
  --text: #E0F2FF;
  --btn-bg: #0077B6;
  --btn-color: #FFFFFF;
  --body-bg: #0A192F;
  --box-shadow:rgba(100, 149, 237, 0.2);
  --sombra-1: 0 1px 5px rgba(100, 149, 237, 0.2);
  --sombra-2: 2px 2px 4px 0 rgba(0, 119, 182, 0.2);
  --borde: 1px solid #3E5060;
  --logo: url("../imgs/logo-zyneko.svg");
  --tools: url("../imgs/pencil-square2.svg");
  --border-table: #2c2c3c;
  --exit: url("../imgs/exit2.svg");  
  --border-tools: #313a42;
  --label-tools: #86b6fb;
  --bg-tools: #0f2547;
  --text-tools: #8e9194;
  --hr: rgba(154, 158, 161, 0.5);
  --menu-hr: rgba(62, 80, 96, 0.3);
  --link: #00FFFF;
  --scrollbar-1: #0077B6;
  --scrollbar-2: #142a4a;
  --filtroTabla: #3ac53a;
  --sinFiltro: url("../imgs/sinFiltro2.svg");
  --sinOrden: url("../imgs/sinOrden2.svg");
  --hamburguesa1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23E0F2FF' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  --hamburguesa2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23E0F2FF' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  --menu-text: #E0F2FF;
  --menu-bg: #0D1B2A;
  --menu-border: #3E5060;
  --table-filter-bg: #0D1B2A;
  --table-filter-text: #E0F2FF;
  --table-filter-border: #3E5060;
  --table-result-bg: #112D4E;
  --table-result-hover: #1e3a6a;
}

/* ADD NEW COLOR THEMES HERE */




/*
RobotoCondensed, Black, BlackItalic, Bold, BoldItalic, ExtraBold, ExtraBoldItalic, ExtraLight, ExtraLightItalic, Italic, Light, LightItalic, Medium, MediumItalic, Regular, SemiBold, SemiBoldItalic, Thin, ThinItalic
 */

 @font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-Black.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-BlackItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-Bold.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-BoldItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-ExtraBold.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-SemiBold.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-SemiBoldItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}

a {
  color: var(--link);
}

html {
  font-size: 0.9rem;
  font-weight: normal;
  font-family: "RobotoCondensed", "Noto Sans", "Segoe UI", "Arial Unicode MS", sans-serif;
  color: #333;
  letter-spacing: 1px;  
}

html:lang(el),
html:lang(el) body,
html:lang(el) button,
html:lang(el) input,
html:lang(el) select,
html:lang(el) textarea {
  font-family: "Noto Sans", "Segoe UI", "Arial Unicode MS", sans-serif !important;
  letter-spacing: normal;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--body-bg);
  color: var(--text);
  font-family: 'Segoe UI', sans-serif;
}

input,
select {
  font-family: "RobotoCondensed", sans-serif !important;
  color: var(--text) !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #0077B6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.2);
}

button {
  cursor: pointer;
  border-radius: 10px;
}
.iconosCambiar {
  background-color: var(--body-bg);
  border: none;
}

.spinner {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #004dff;
  animation: spinner-a4dj62 1s infinite linear;
}

.spinner::before,
.spinner::after {
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
  animation: spinner-a4dj62 2s infinite;
}

.spinner::after {
  margin: 8px;
  animation-duration: 3s;
}

@keyframes spinner-a4dj62 {
  100% {
    transform: rotate(1turn);
  }
}

.spinnerContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 80dvh;
  background-color: rgba(255, 255, 255, 0.433)
}

.modalError {
  display: none;
  position: fixed;
  z-index: 2;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modalErrorBody {
  margin: auto;
  padding: 20px;
  border: 2px solid #410000;
  width: 80%;
  background-color: rgb(224, 165, 165);
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

.modalErrorTexto {
  margin-bottom: 20px;
  color: rgb(132, 20, 0);
  text-align: center;
  font-size: 1.1rem;
}

.modalErrorBoton {
  padding: 10px 20px;
  color: rgb(132, 20, 0);
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
}

.sinFiltro{
  width: 8px;
  height: 15px;
  background-image: var(--sinFiltro);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 10px;
  margin-top: 2px;
}
.sinOrden{
  width: 8px;
  height: 15px;
  background-image: var(--sinOrden);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 10px;
  margin-top: 2px;
}
.ordenAscendente{
  width: 8px;
  height: 15px;
  background-image: url("../imgs/ordenAscendente.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 10px;
  margin-top: 2px;
}
.ordenDescendente{
  width: 8px;
  height: 15px;
  background-image: url("../imgs/ordenDescendente.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 10px;
  margin-top: 2px;
}
.sinOrdenFiltrado{
  width: 8px;
  height: 15px;
  background-image: url("../imgs/sinOrden3.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 10px;
  margin-top: 2px;
}
.conFiltro{
  width: 8px;
  height: 15px;
  background-image: url("../imgs/conFiltro.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 10px;
  margin-top: 2px;
}
.conOrdenFiltrado{
  width: 8px;
  height: 15px;
  background-image: url("../imgs/sinFiltro3.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 10px;
  margin-top: 2px;
}
.tooltip-container {
  position: relative;
  display: inline-block;
}
.tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);
  background-color: var(--body-bg);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 2px 10px var(--box-shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.tooltip-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
}
.input-tooltip-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.input-tooltip {
  position: absolute;
  left: 50px;
  transform: translateX(-50%);
  top: calc(100% + 10px);
  background-color: var(--body-bg);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 2px 10px var(--box-shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 10;
  max-width: 250px;
  pointer-events: none;
}
/* Flecha debajo del tooltip */
.input-tooltip::before {
  content: "";
  position: absolute;
  top: -8px; /* Ajusta según el tamaño de la flecha */
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent var(--body-bg) transparent;
  filter: drop-shadow(0 -1px 0 var(--border));
  /* Opcional: sombra para la flecha */
}
.input-tooltip-container:focus-within .input-tooltip {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 800px) {
  .input-tooltip {
    transform: none;
    left: 3%;
  }
  .input-tooltip::before {
    left: 20px; /* Ajusta si quieres que la flecha esté alineada a la izquierda en móvil */
    transform: none;
  }
}

/* Estilos para el selector de tema */
.theme-selector {
  background-color: var(--body-bg);
  border: var(--borde);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  min-width: 120px;
  transition: border-color 0.3s ease;
}

.theme-selector:hover {
  border-color: var(--azul);
}

.theme-selector:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 2px rgba(0, 119, 182, 0.2);
}

@media (max-width: 800px) {
  .theme-selector {
    font-size: 12px;
    padding: 6px 8px;
    min-width: 100px;
  }
}

/* Notificaciones de guardado discretas */
.notificacion-guardado-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  pointer-events: none;
}

.notificacion-guardado {
  background-color: var(--body-bg);
  border: var(--borde);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: notificacionEntrada 0.3s ease-out;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.notificacion-guardado::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.notificacion-saving::before {
  background-color: #ffa500;
  animation: pulsoGuardando 1s infinite;
}

.notificacion-saved::before {
  background-color: #28a745;
}

.notificacion-error::before {
  background-color: #dc3545;
}

.notificacion-oculta {
  animation: notificacionSalida 0.3s ease-in forwards;
}

@keyframes notificacionEntrada {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes notificacionSalida {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes pulsoGuardando {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@media (max-width: 800px) {
  .notificacion-guardado-container {
    right: 10px;
    top: 10px;
  }
  
  .notificacion-guardado {
    font-size: 12px;
    padding: 6px 12px;
    min-width: 100px;
  }
}