/* Color system (themes) */
:root {
  --bg: #f5f7ff;
  --text: #1f2937;
  --card: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --primary: #0066cc;
  --primary-contrast: #ffffff;
  --secondary: #6b7280;
  --danger: #dc2626;
  --info: #0891b2;
  --success: #16a34a;
  --warning: #d97706;
  --link: #3b82f6;
  --muted: rgba(31, 41, 55, 0.7);
  --outline-border: rgba(31, 41, 55, 0.3);
  --outline-text: var(--text);
}

.theme-dark {
  --bg: #0b1220;
  --text: #e2e8f0;
  --card: #12203b;
  --border: rgba(255, 255, 255, 0.12);
  --primary: #60a5fa;
  --primary-contrast: #0f172a;
  --secondary: #94a3b8;
  --danger: #fb7185;
  --info: #06b6d4;
  --success: #4ade80;
  --warning: #fbbf24;
  --link: #7dd3fc;
  --muted: rgba(226, 232, 240, 0.7);
  --btn-bg-hover: rgba(255, 255, 255, 0.15);
  --outline-border: rgba(226, 232, 240, 0.3);
  --outline-text: var(--text);
}

/* Change the font of the entire index.html */
body {
  font-family: "Arial", sans-serif; /* Replace with your desired font */
  font-size: 14px; /* Adjust font size */
  color: var(--text); /* Adjust text color */
  background: var(--bg);
}
/* formato cuando los campos del formulario estan fuera de limites*/
input:invalid {
  border-color: var(--danger) ;
  background-color: rgba(220, 38, 38, 0.05);
}

input:valid {
  border-color: var(--success) ;
}

/* Modern input and label styles */
label {
  display: inline-block;
  margin-bottom: 0.5rem;
  margin-right: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  transition: color 0.2s ease;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="tel"],
select,
textarea {
  width: auto; /*  */
  min-width: 20px;/* ancho minimo de los campos de entrada */
  box-sizing: border-box;  /* Crucial: incluye el padding dentro del ancho */
  padding: 0.5rem 0.5rem;
  border: 2px solid rgba(31, 41, 55, 0.2);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="month"]:hover,
input[type="tel"]:hover,
select:hover,
textarea:hover {
  border-color: rgba(31, 41, 55, 0.35);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2);
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
input[type="month"]:disabled,
input[type="tel"]:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.05);
}

input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

/* Form layout for inline fields */
form > div {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

form > div > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 300px;
}
.titulo_pagina{
  font-family: "Arial", sans-serif;
  font-size: 16px;
  color: #0066cc;
  background-color:  #fFfFfF;
  margin:auto;
  text-align: center;
  padding-top: 2px;  
  padding-bottom: 2px;
  padding-right: 20px;
  padding-left: 20px;
}
/* Change the font of the Tabulator tables */
#tableBasesPasadas{
  font-family: "Arial", sans-serif; /* Change to your desired font */
  font-size: 12px; /* Adjust font size */
  color: #333; /* Adjust font color */
 width: 100%;
    max-width: 1200px;
    margin: 25px 0; 
    display: block;
    clear: both;
    overflow-x: auto; /* Permite scroll horizontal interno si la tabla tiene demasiadas columnas */
}
/* Change the font of the Tabulator tables */
#tableBasesFuturas{
  font-family: "Arial", sans-serif; /* Change to your desired font */
  font-size: 12px; /* Adjust font size */
  color: #333; /* Adjust font color */
}

/* Change the font of the User Info in Page BASES DE COTIZACION PASADAS Y FUTURAS */
#userInfo label{
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color: #333;
}
/***** Change the FORMAT PARA PAGINA RESULTADOS */
#indexedDbBlock{
  /*position: absolute;
  top: 20px;*/
 display: block;
    width: 100%;
    margin-top: 30px;
}
#indexedDbBlock form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
/* Bloque pension is possible */
#pensionBlockOk {
  display: flex !important;
  flex-direction: row !important;   
  justify-content: space-between !important; 
  align-items: stretch !important; /* Estira las columnas para que midan lo mismo de alto */
  box-sizing: border-box !important;
  width: 100% !important;          /* OBLIGATORIO: Fuerza a ocupar todo el ancho disponible */
  max-width: 100% !important;
  height: auto;
  font-family: "Arial", sans-serif;
  font-size: 12px;  
  margin-bottom: 30px; /* Crea espacio controlado con los elementos de abajo */
  text-align: center;  
  border: 3px solid #f4f3f6;  
}
/* Contenedores Principales */
#pensionBlockKo {
  display: none; /* Tu JS cambiará esto a 'flex' */
  flex-direction: row;   
  justify-content: center; 
  align-items: center; 
  box-sizing: border-box;
  
  /* --- CAMBIOS PARA QUE SE AJUSTE AL TEXTO --- */
  width: fit-content;              /* CLAVE: Ajusta el ancho estrictamente al tamaño del texto */
  max-width: 90%;                  /* Seguridad: Evita que se salga en pantallas de móviles */
  margin-left: auto;               /* Centra el bloque horizontalmente */
  margin-right: auto;              /* Centra el bloque horizontalmente */
  
  height: auto;
  font-family: "Arial", sans-serif;
  font-size: 18px;  
  margin-bottom: 30px; 
  text-align: center;  
  padding: 20px; 
  
  /* Estilo del marco */
  border: 2px solid #dc3545;       
  border-radius: 8px;              
  background-color: #fff5f5;       
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); 
}


/* Estilo para la caja interna del error */
.contenido-pensionKO {
  width: 100%;
  padding: 10px;
}

/* 2. COLUMNA IZQUIERDA: Mantiene a pensionOr y retirementD uno ABAJO del otro */
.columna-izquierda {
    display: flex !important;
    flex-direction: column !important; 
    gap: 20px;              
    width: 30% !important;   /* Asegura el 30% */
    flex-shrink: 0 !important; /* Evita que los absolutos de abajo fuercen a encoger la columna */
}

#pension {  
  color: #ffffff;
  background-color: #0066cc;
  width: 100%;
  height: auto;
  border: 3px solid #f4f3f6;    
}

#retirementD {
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color: rgb(3, 0, 12); 
  background-color: #add8ef;   
  text-align: center; 
  width: 100%;
  height: auto;
  border: 3px solid #f4f3f6;    
}

/* 3. COLUMNAS DERECHAS */
#retiremenDet {  
  color: rgba(3, 0, 12, 0.562); 
  background-color: #f4f3f6;   
  text-align: center; 
  width: 30% !important;     /* Asegura el 30% */
  height: auto;
  border: 3px solid #f4f3f6;   
  flex-shrink: 0 !important; /* Evita que se deforme */
}

#additionalComments {  
  color: rgba(247, 82, 6, 0.944); 
  background-color: #f4f3f6;   
  text-align:  center;  
  width: 30% !important;     /* Asegura el 30% */
  height: auto;
  border: 3px solid #f4f3f6;  
  flex-shrink: 0 !important; /* Evita que se deforme */
}

#msgBlock {  
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color:#0066cc; 
  background-color:solid #f4f3f6;  
  margin:auto;
  text-align: left;
  padding-top: 20px;  
  padding-bottom: 20px;  
  width: 100%;
  height: auto;
  border: 3px solid #f4f3f6;  
}
/* Bloque titulo bases actualizadas */
#tableBasesElegidasTitle {
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color: #fFfFfF;
  background-color:#0066cc;  
  margin:auto;
  text-align: center;
  padding-top: 2px;  
  padding-bottom: 2px;
  padding-right: 20px;
  padding-left: 20px; 
    
  border: 3px solid #f4f3f6;
}
/* Change the font of the Tabulator tables */
#tableBasesElegidas{
  font-family: "Arial", sans-serif; /* Change to your desired font */
  font-size: 11px; /* Adjust font size */
  color: #333; /* Adjust font color */
  min-height: 320px;
  width: 100%;  
  }
/*#basesActBlock {
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color: #fFfFfF;
  background-color:#2229f0;  
  margin:auto;
  text-align: center;
  padding-top: 10px;  
  padding-bottom: 10px;
  padding-right: 20px;
  padding-left: 20px; 
  position: absolute;
  top: 640px;   
  border: 3px solid #f4f3f6;
}*/

/* Overlay Background */
    .popup-overlay {
      display: none; /* Hidden by default */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
    }

    /* Popup Box */
    .popup-box {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--card);
      padding: 20px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      border-radius: 8px;
      z-index: 1001;
      width: 300px;
      text-align: center;
    }

    /* Close Button */
    .close-popup {
      position: absolute;
      top: 10px;
      right: 10px;
      background: transparent;
      border: none;
      font-size: 20px;
      cursor: pointer;
    }

    /* Links */
    .popup-links a {
      display: block;
      margin: 10px 0;
      text-decoration: none;
      color: var(--link);
      font-weight: bold;
    }

    .popup-links a:hover {
      text-decoration: underline;
    }

/* Modern button styles */
:root {
  --btn-bg: #0066cc;
  --btn-bg-hover: #0052a3;
  --btn-text: #ffffff;
  --btn-radius: 10px;
  --btn-padding: 0.6rem 1.2rem;
  --btn-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  --btn-shadow-hover: 0 14px 24px rgba(0, 0, 0, 0.18);
  --btn-border: transparent;
}

.btn,
a.btn,
button.close-popup,
button:not(.close-popup),
input[type="button"]:not(.close-popup),
input[type="submit"]:not(.close-popup),
input[type="reset"]:not(.close-popup) {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--btn-padding);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 600;
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none;
  user-select: none;
}

/* Close-popup overrides (keep small/transparent but inherit layout) */
button.close-popup {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0.35rem;
  min-width: 36px;
  border-radius: 999px;
  font-size: 1.2rem;
  cursor: pointer;
}

/* Button variants */
.btn-primary {
  --btn-bg: var(--primary);
  --btn-bg-hover: rgba(0, 0, 0, 0.15);
  --btn-text: var(--primary-contrast);
  --btn-border: transparent;
}

.btn-secondary {
  --btn-bg: #94a3b8; /* Gris un poco más claro que el original */
  --btn-bg-hover: #788896; /* Tono ligeramente más oscuro para el efecto hover */
  --btn-text: var(--primary-contrast); /* Mantiene el contraste original (blanco) */
  --btn-border: transparent;
}

.btn-danger {
  --btn-bg: var(--danger);
  --btn-bg-hover: rgba(0, 0, 0, 0.15);
  --btn-text: var(--primary-contrast);
  --btn-border: transparent;
}

.btn-info {
  --btn-bg: var(--info);
  --btn-bg-hover: rgba(0, 0, 0, 0.15);
  --btn-text: var(--primary-contrast);
  --btn-border: transparent;
}

.btn-success {
  --btn-bg: var(--success);
  --btn-bg-hover: rgba(0, 0, 0, 0.15);
  --btn-text: var(--primary-contrast);
  --btn-border: transparent;
}

.btn-warning {
  --btn-bg: var(--warning);
  --btn-bg-hover: rgba(0, 0, 0, 0.15);
  --btn-text: var(--primary-contrast);
  --btn-border: transparent;
}

.btn-outline {
  --btn-bg: transparent;
  --btn-bg-hover: rgba(31, 41, 55, 0.08);
  --btn-text: var(--outline-text);
  --btn-border: var(--outline-border);
}

.btn-outline:hover {
  --btn-bg: rgba(31, 41, 55, 0.08);
}

/* Button size variants */
.btn-sm {
  --btn-padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

.btn-lg {
  --btn-padding: 0.9rem 1.5rem;
  font-size: 1.1rem;
}

/* Icon + text buttons */
.btn-icon {
  padding: 0.5rem;
  min-width: 42px;
  justify-content: center;
}

.btn:hover,
button:not(.close-popup):hover,
input[type="button"]:not(.close-popup):hover,
input[type="submit"]:not(.close-popup):hover,
input[type="reset"]:not(.close-popup):hover {
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--btn-shadow-hover);
}

.btn:active,
button:not(.close-popup):active,
input[type="button"]:not(.close-popup):active,
input[type="submit"]:not(.close-popup):active,
input[type="reset"]:not(.close-popup):active {
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.btn:focus,
button:not(.close-popup):focus,
input[type="button"]:not(.close-popup):focus,
input[type="submit"]:not(.close-popup):focus,
input[type="reset"]:not(.close-popup):focus {
  outline: 3px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

.btn:disabled,
button:not(.close-popup):disabled,
input[type="button"]:not(.close-popup):disabled,
input[type="submit"]:not(.close-popup):disabled,
input[type="reset"]:not(.close-popup):disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Compact icon-style buttons (eye toggles, etc.) */
button[id^="toggle"],
button[id*="Toggle"] {
  padding: 0.35rem;
  min-width: 36px;
  border-radius: 299px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 1rem;
  margin-left: 0.5rem;
}

button[id^="toggle"]:hover,
button[id*="Toggle"]:hover {
  background: rgba(255, 255, 255, 0.95);
}

/* Login form button spacing */
.login-container form .btn,
.login-container form button {
  display: inline-block;
  width: auto;
  margin: 0.1rem auto;
  padding: 0.5rem 1.5rem;
}

.login-container form a.btn {
  padding: 0.6rem 1.2rem;
  width: fit-content;
  margin: 0.1rem auto;
}

/* Password field wrapper for inline icon button */
.login-container form div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  flex-direction: column;
  margin: 0;
  padding: 5;
}

.login-container form > div {
  gap: 3rem;
  margin: 0;
  padding: 0;
}

.login-container form > div > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 0.45rem;
  flex: none;
  min-width: auto;
  justify-content: flex-start;
}

.login-container form div label {
  text-align: center;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
}

.login-container form div input[type="password"],
.login-container form div input[type="username"],
.login-container form div input[type="email"] {
  width: 350px !important;  /* Forzamos el ancho exacto para correos largos */
  max-width: 100%;          /* Si la pantalla es más pequeña que 350px, se adapta */
  text-align: center;
  padding: 0.35rem 0.6rem;
  margin: 0 auto;           /* Centra el input horizontalmente */
}

.login-container form {
  text-align: center;
}

.login-container form div button.btn-icon {
  flex-shrink: 0;
}
.linea-vertical {
  border-left: 1px solid #0000007a; /* Dibuja la línea */
  /*height: 100px;  Define la altura de la línea */
  display: inline-block; /* Permite colocarla al lado de otros elementos si es necesario */
}


  /*reglas para los botones de ocultar contraseña */
.visible-contra {
  position: relative !important;  
  width: 100%;
}

.visible-contra input {
  width: 100% !important;         
  padding-right: 40px !important; 
}

.visible-contra button {
  position: absolute !important;  
  right: 12px !important;          /* Un poco más separado del borde derecho */
  top: 50% !important;            
  transform: translateY(-50%) !important; 
  z-index: 10;                    
  
  /* --- ESTILOS PARA QUITAR EL MARCO FEO --- */
  background: transparent !important; /* Quita el fondo gris/blanco */
  border: none !important;            /* Elimina el marco o borde */
  box-shadow: none !important;        /* Quita sombras extrañas al hacer clic */
  outline: none !important;           /* Quita el borde de enfoque por defecto */
  padding: 0 !important;              /* Elimina espacios internos del botón */
  cursor: pointer;                    /* Muestra la mano al pasar el ratón */
}


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

/* Contenedor principal que alinea todo en columna */
/* Contenedor principal: Flexible pero con espacio */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: flex-start;
    min-height: 100vh;
    padding: 20px 5%; /* 👈 Usa porcentajes para los lados, dejando espacio dinámico */
    gap: 15px; 
    box-sizing: border-box;
    
}

/* Permitir que los bloques usen casi toda la pantalla sin verse estrechos */
.main-container > div, 
.main-container > form, 
.main-container > h2 {
    width: 100%;
    max-width: 1200px; /* 👈 Ampliado de 800px a 1200px para dar más espacio lateral */
    text-align: center;
    clear: both;
}

/* Excepción estricta: NO rompas la disposición de los bloques internos de tus formularios */
.main-container div div {
    text-align: initial; /* Devuelve el control de alineación a los inputs y botones */
}
/* Reglas para el contenedor de las fechas */
.contenedor-fechas {
    display: flex !important; 
    align-items: center !important; 
    gap: 15px !important; 
    margin-bottom: 15px;
}

/* Limpieza de márgenes y elementos internos */
.contenedor-fechas label,
.contenedor-fechas input {
    margin: 0 !important;
    display: inline-block !important;
}

.contenedor-fechas label {
    padding: 0 !important;
}

.contenedor-fechas input {
    height: auto !important;
}
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f; /* Color del hilo del reloj */
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}