/* ====================================================================== */
/* == style.css - UF Panel Pro - v6.8.0 (Smart Header Transition) == */
/* ====================================================================== */
/* --- Sistema de Diseo: Variables Globales --- */
:root {
/* Paleta Primaria X */
--x-blue: hsl(195, 100%, 50%); /* Azul Neón / Cian brillante */
--x-blue-hover: hsl(195, 100%, 55%); /* Un poco más claro al pasar el mouse */
--x-blue-active: hsl(195, 100%, 60%); /* Aún más claro al hacer clic */
--x-blue-focus-ring: hsla(195, 100%, 50%, 0.4); /* El anillo de foco mantiene el tono */
--x-red: hsl(0, 79%, 63%); --x-red-hover: hsl(0, 79%, 58%); --x-red-active: hsl(0, 79%, 55%); --x-red-text: hsl(0, 70%, 55%);
--x-success-text: hsl(145, 63%, 42%);
/* Tipografía */
--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--text-base-size: 17px; --text-lg: 1.15rem; --text-md: 1rem; --text-sm: 0.9rem; --text-xs: 0.8rem;
--line-height-normal: 1.65; --line-height-tight: 1.35; --font-weight-bold: 700; --font-weight-medium: 500; --font-weight-normal: 400;
/* Espaciado */
--space-unit: 0.25rem; --space-1: calc(1 * var(--space-unit)); --space-2: calc(2 * var(--space-unit)); --space-3: calc(3 * var(--space-unit)); --space-4: calc(4 * var(--space-unit)); --space-5: calc(5 * var(--space-unit)); --space-6: calc(6 * var(--space-unit)); --space-8: calc(8 * var(--space-unit)); --space-10: calc(10 * var(--space-unit)); --space-12: calc(12 * var(--space-unit)); --space-16: calc(16 * var(--space-unit));
/* Bordes y Radios */
--radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px;
--border-width: 1px; --border-width-focus: 2px;
/* Sombras */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-focus: 0 0 0 var(--border-width-focus) var(--x-blue-focus-ring); --shadow-dialog: 0 8px 24px rgba(0, 0, 0, 0.1);
/* Transiciones */
--transition-fast: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-menu: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
--transition-menu-fast: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
/* Paleta Light Mode */
--bg-light: hsl(220, 15%, 96%);
--widget-bg-light: hsl(220, 12%, 100%);
--text-primary-light: hsl(210, 10%, 15%);
--text-secondary-light: hsl(210, 9%, 45%);
--text-muted-light: hsl(210, 8%, 60%);
--border-light: hsl(220, 13%, 91%);
--hover-bg-light: hsl(220, 14%, 92%); /* CORRECCIÓN: Gris más oscuro para mejor contraste */
--active-bg-light: hsl(220, 16%, 90%);
--secondary-btn-border-light: hsl(220, 13%, 88%);
--secondary-btn-hover-bg-light: var(--hover-bg-light);
--danger-border-light: hsl(0, 70%, 90%);
--danger-hover-bg-light: hsla(0, 79%, 63%, 0.07);
--control-panel-bg-light: hsla(220, 12%, 98%, 0.85);
--control-panel-border-light: var(--border-light);
--exit-btn-bg-light: hsla(220, 13%, 88%, 0.9);
--exit-btn-text-light: var(--text-primary-light);
--exit-btn-hover-bg-light: hsl(220, 13%, 80%);
/* Paleta Dark Mode */
--bg-dark: hsl(0, 0%, 0%); --widget-bg-dark: hsl(0, 0%, 0%); --text-primary-dark: hsl(0, 0%, 95%); --text-secondary-dark: hsl(210, 8%, 65%); --text-muted-dark: hsl(210, 7%, 50%); --border-dark: hsl(210, 6%, 18%); --hover-bg-dark: hsla(0, 0%, 100%, 0.05); --active-bg-dark: hsla(0, 0%, 100%, 0.1); --secondary-btn-border-dark: hsl(210, 6%, 22%); --secondary-btn-hover-bg-dark: var(--hover-bg-dark); --danger-border-dark: hsl(0, 60%, 28%); --danger-hover-bg-dark: hsla(0, 79%, 63%, 0.1);
--control-panel-bg-dark: hsla(210, 6%, 10%, 0.85);
--control-panel-border-dark: var(--border-dark);
--exit-btn-bg-dark: hsla(210, 6%, 22%, 0.9);
--exit-btn-text-dark: var(--text-primary-dark);
--exit-btn-hover-bg-dark: hsl(210, 6%, 30%);
/* Asignación por defecto (Modo Claro) */
--bg: var(--bg-light); --widget-bg: var(--widget-bg-light); --text-primary: var(--text-primary-light); --text-secondary: var(--text-secondary-light); --text-muted: var(--text-muted-light); --text-link: var(--x-blue); --border-default: var(--border-light); --hover-bg: var(--hover-bg-light); --active-bg: var(--active-bg-light); --secondary-btn-border: var(--secondary-btn-border-light); --secondary-btn-hover-bg-light: var(--hover-bg-light); --danger-border: var(--danger-border-light); --danger-hover-bg-light: var(--danger-hover-bg-light); --danger-text: var(--x-red-text); --success-text: var(--x-success-text); --chart-label: var(--text-muted-light); --chart-grid: var(--border-light); --chart-area-bg: hsla(195, 100%, 50%, 0.1);
--control-panel-bg: var(--control-panel-bg-light);
--control-panel-border: var(--control-panel-border-light);
--exit-btn-bg: var(--exit-btn-bg-light);
--exit-btn-text: var(--exit-btn-text-light);
--exit-btn-hover-bg: var(--exit-btn-hover-bg-light);
}
/* --- Dark Mode Applicator --- */
body.dark {
--bg: var(--bg-dark); --widget-bg: var(--widget-bg-dark); --text-primary: var(--text-primary-dark); --text-secondary: var(--text-secondary-dark); --text-muted: var(--text-muted-dark); --border-default: var(--border-dark); --hover-bg: var(--hover-bg-dark); --active-bg: var(--active-bg-dark); --secondary-btn-border: var(--secondary-btn-border-dark); --secondary-btn-hover-bg-light: var(--secondary-btn-hover-bg-dark); --danger-border: var(--danger-border-dark); --danger-hover-bg: var(--danger-hover-bg-dark); --danger-text: var(--x-red); --success-text: hsl(145, 55%, 65%); --chart-label: var(--text-muted-dark); --chart-grid: var(--border-dark); --chart-area-bg: hsla(195, 100%, 50%, 0.15);
--control-panel-bg: var(--control-panel-bg-dark);
--control-panel-border: var(--control-panel-border-dark);
--exit-btn-bg: var(--exit-btn-bg-dark);
--exit-btn-text: var(--text-primary-dark);
--exit-btn-hover-bg: var(--exit-btn-hover-bg-dark);
color-scheme: dark;
}
/* ====================================================================== */
/* == SECCIÓN DE ANIMACIÓN DEL UNIVERSO == */
/* ====================================================================== */
.starfield { display: none; }
/* CORRECCIÓN: Ahora se activa con esta clase, no solo con .dark */
body.starfield-active .starfield {
display: block;
position: fixed;
width: 800%;
height: 800%;
top: -350%;
left: -350%;
pointer-events: none;
background-repeat: repeat;
transform-origin: 150% 150%;
animation: rotate-galaxy linear infinite;
z-index: -1;
}
#starfield1 { background-image: url('data:image/svg+xml,'); animation-duration: 3600s; }
#starfield2 { background-image: url('data:image/svg+xml,'); animation-duration: 3000s; }
#starfield3 { background-image: url('data:image/svg+xml,'); animation-duration: 2400s; }
@keyframes rotate-galaxy { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.shooting-star-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; }
.shooting-star { position: absolute; top: 50%; left: 0; width: 250px; height: 1px; background: linear-gradient( to right, hsl(195, 100%, 95%), hsla(195, 100%, 90%, 0.5), rgba(255, 255, 255, 0) ); border-radius: var(--radius-full); filter: drop-shadow(0 0 8px hsl(195, 100%, 80%)); animation-fill-mode: forwards; }
@keyframes shoot-star-fly { 0% { transform: translateX(-250px) scaleX(0.1); } 10% { transform: translateX(0) scaleX(1); } 100% { transform: translateX(120vw) scaleX(1); } }
/* --- Reset y Estilos Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid transparent; }
html { font-size: var(--text-base-size); scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body {
font-family: var(--font-sans);
background-color: var(--bg);
color: var(--text-primary);
line-height: var(--line-height-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow-x: hidden;
position: relative;
z-index: 1;
}
body.overlay-menu-is-open, body.flatpickr-is-open { overflow: hidden; }
a { color: var(--x-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
ul, ol { list-style: none; }
button { cursor: pointer; }
main.main-content { flex-grow: 1; padding-top: var(--space-8); padding-bottom: var(--space-6); transition: padding var(--transition-base); width: 100%; }
img, svg { max-width: 100%; height: auto; display: block; vertical-align: middle; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); margin-bottom: 0.75em; }
h1 { font-size: 1.8rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15rem; }
p { margin-bottom: 1.1em; font-size: var(--text-md); }
a { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); }
a:hover { text-decoration: underline; color: var(--x-blue-hover); }
strong, b { font-weight: var(--font-weight-bold); }
ul, ol { list-style: none; padding: 0; margin: 0; }
hr { border: 0; height: var(--border-width); background-color: var(--border-default); margin: var(--space-8) 0; }
input, button, textarea, select { font: inherit; color: inherit; background-color: transparent; }
button { border: none; cursor: pointer; padding: 0; appearance: none; text-align: inherit; background: none; }
.text-success { color: var(--success-text) !important; }
.text-danger { color: var(--danger-text) !important; }
.text-muted { color: var(--text-muted) !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.desktop-icon { display: inline-block; }
.container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: var(--space-6); padding-right: var(--space-6); }
/* ====================================================================== */
/* == PRELOADER "LÍNEA MINIMALISTA" == */
/* ====================================================================== */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--bg);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.5s ease-in-out, visibility 0s 0.5s linear;
opacity: 1;
}
#preloader.preloader-hidden {
opacity: 0;
visibility: hidden;
}
.preloader-progress-line {
width: 150px;
height: 3px; /* Un poco más gruesa para ser visible */
background-color: var(--border-default);
border-radius: var(--radius-full);
position: relative;
overflow: hidden;
}
.preloader-progress-line__fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%; /* La barra ahora ocupa todo el ancho */
background-color: var(--x-blue);
border-radius: var(--radius-full);
transform-origin: left;
/* Animación de "respiración" para indicar actividad */
animation: preloader-breath 2s ease-in-out infinite;
}
@keyframes preloader-breath {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
/* ====================================================================== */
/* == PARTE 2: ESTRUCTURA PRINCIPAL (HEADER, FOOTER, WIDGETS) == */
/* ====================================================================== */
/* --- Estructura General del Widget --- */
.widget { display: none; margin-bottom: var(--space-8); background-color: transparent; border-top: var(--border-width) solid var(--border-default); border-bottom: var(--border-width) solid var(--border-default); transition: margin var(--transition-base), border var(--transition-base); }
.widget:first-of-type { border-top: none; }
.widget:last-child { border-bottom: none; margin-bottom: 0; }
.widget.active { display: block; width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; }
/* --- Header & Navegación Principal --- */
.header {
background-color: var(--bg);
padding: 0 var(--space-6);
height: 60px;
display: flex;
align-items: center;
position: sticky;
top: 0;
z-index: 1050;
border-bottom: var(--border-width) solid var(--border-default);
/* LA MAGIA ESTÁ AQUÍ */
transition: transform 0.3s ease-in-out;
}
.header-content { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); max-width: 1100px; margin: 0 auto; }
.logo { font-size: 1.2rem; font-weight: var(--font-weight-bold); color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.logo svg { width: 26px; height: 26px; color: var(--x-blue); }
.main-nav { display: none; align-items: center; margin: 0 auto; height: 100%; overflow: visible; }
.nav-list { display: flex; list-style: none; gap: 0; height: 100%; }
.nav-list a { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-5); height: 100%; font-size: var(--text-md); font-weight: var(--font-weight-medium); color: var(--text-secondary); border-radius: 0; transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; position: relative; border-bottom: 3px solid transparent; }
.nav-list a i { font-size: 1.1em; margin-bottom: -2px; width: 1.3em; text-align: center;}
.nav-list a:hover { background-color: var(--hover-bg); color: var(--text-primary); text-decoration: none; }
.nav-list a.active { color: var(--text-primary); font-weight: var(--font-weight-bold); border-bottom-color: var(--x-blue); }
.header-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-4); }
/* --- Menú Desplegable (Escritorio) --- */
.nav-item--dropdown { position: relative; }
.nav-link--dropdown { cursor: default; }
.nav-link--dropdown:hover { background-color: transparent !important; }
.dropdown-caret { font-size: 0.7em; margin-left: var(--space-2); transition: transform 0.2s ease-out; }
.nav-item--dropdown:hover > .nav-link--dropdown .dropdown-caret { transform: rotate(180deg); }
.nav-item--dropdown:hover > .nav-link--dropdown { color: var(--text-primary); }
.dropdown-menu { position: absolute; top: 100%; left: 50%; margin-top: var(--space-3); z-index: 1060; min-width: 240px; background-color: var(--widget-bg); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-2); list-style: none; opacity: 0; visibility: hidden; transform: translateY(10px) translateX(-50%); transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s 0.2s linear; }
.nav-item--dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) translateX(-50%); transition-delay: 0s, 0s, 0s; }
.dropdown-menu a { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); height: auto; border-bottom: none; font-size: var(--text-sm); }
.dropdown-menu a:hover { background-color: var(--hover-bg); color: var(--text-primary); }
.dropdown-menu a.active { color: var(--x-blue); background-color: hsla(203, 89%, 53%, 0.1); font-weight: var(--font-weight-bold); }
.dropdown-menu a i { width: 20px; text-align: center; color: var(--text-muted); }
.dropdown-menu a:hover i, .dropdown-menu a.active i { color: inherit; }
.nav-item--dropdown.has-active-child > a { color: var(--text-primary); font-weight: var(--font-weight-bold); border-bottom-color: var(--x-blue); }
/* --- Contenido de Guía SEO --- */
.content-block { display: none; max-width: 700px; margin-left: auto; margin-right: auto; padding: 0; margin-top: var(--space-8); padding-top: var(--space-8); border-top: var(--border-width) solid var(--border-default); }
#converter.widget.active ~ .content-block { display: block; }
#converter.widget.active + .google-ad-container + .content-block,
#converter.widget.active + .content-block { margin-top: var(--space-8); padding-top: 0; border-top: none; }
.content-header{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-6);padding:0}.content-header i{font-size:1.8rem;color:var(--x-blue);flex-shrink:0;line-height:1.3;margin-top:2px}.content-header h2{font-size:1.6rem;font-weight:var(--font-weight-bold);margin:0;line-height:1.3;color:var(--text-primary)}.content-body{padding:0}.content-body>p{font-size:var(--text-lg);line-height:1.7;margin-bottom:1.5em;color:var(--text-secondary);max-width:65ch}.content-body>p strong{color:var(--text-primary);font-weight:600}.content-body>p a{font-weight:500;text-decoration:underline;text-decoration-color:var(--x-blue-focus-ring)}.content-body>p a:hover{text-decoration-color:var(--x-blue)}.sub-content{background-color:transparent;border:none;padding:0;margin-top:var(--space-8);margin-bottom:var(--space-8);border-top:var(--border-width) solid var(--border-default);padding-top:var(--space-6)}.sub-content:first-child{border-top:none;margin-top:var(--space-6);padding-top:0}.sub-content h3{display:flex;align-items:center;gap:var(--space-3);font-size:1.3rem;font-weight:var(--font-weight-bold);margin-top:0;margin-bottom:var(--space-5);color:var(--text-primary);padding-bottom:0;border-bottom:none}.sub-content h3 i{font-size:1em;color:var(--text-secondary);width:1.4em;text-align:center;flex-shrink:0}.sub-content p{font-size:var(--text-md);line-height:var(--line-height-normal);color:var(--text-primary);margin-bottom:1.3em;max-width:70ch}.sub-content p:last-child{margin-bottom:0}.sub-content strong{font-weight:600}.sub-content a{font-weight:500}.sub-content ul{list-style:disc;padding-left:var(--space-6);margin-top:var(--space-4);margin-bottom:var(--space-4)}.sub-content li{position:relative;padding-left:0;margin-bottom:var(--space-3);font-size:var(--text-md);color:var(--text-primary);line-height:1.6}.sub-content li::marker{color:var(--text-secondary)}.content-block--converter-power ul{list-style:none;padding-left:0}.content-block--converter-power li{padding-left:0;display:flex;align-items:flex-start;gap:var(--space-3)}.content-block--converter-power li i{color:var(--x-blue);margin-top:3px;font-size:1em;width:1.3em;text-align:center;flex-shrink:0}.disclaimer-block{margin-top:var(--space-8);padding:var(--space-4) var(--space-5);border:var(--border-width) solid var(--border-default);border-left:4px solid var(--text-muted);border-radius:var(--radius-md);background-color:var(--hover-bg);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.6}.disclaimer-block p{font-size:inherit;color:inherit;margin-bottom:0;display:flex;align-items:flex-start;gap:var(--space-3)}.disclaimer-block i{margin-top:3px;flex-shrink:0;color:inherit;font-size:1.1em}.conclusion-block{margin-top:var(--space-10);padding:var(--space-6) var(--space-5);text-align:center;background-color:transparent;border:none;border-top:var(--border-width) solid var(--border-default)}.conclusion-block p{font-size:1.2rem;font-weight:600;color:var(--text-primary);line-height:var(--line-height-normal);display:inline-flex;align-items:center;gap:var(--space-3);margin-bottom:0}.conclusion-block p i{font-size:1.4em;color:var(--success-text);flex-shrink:0}
/* --- Footer --- */
/* --- Footer --- */
.footer {
z-index: 2;
position: relative;
background-color: transparent;
padding: var(--space-12) var(--space-6) var(--space-6);
margin-top: auto;
border-top: 1px solid var(--border-dark);
}
/* --- ESTILOS DE LA MARQUESINA (TICKER) --- */
.footer-ticker-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
transform: translateY(-50%);
z-index: 3;
}
.ticker-wrap {
width: 100%;
overflow: hidden;
background-color: var(--bg);
border-top: 1px solid var(--border-dark);
border-bottom: 1px solid var(--border-dark);
position: relative;
}
.ticker-wrap::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 100px; background: linear-gradient(to right, var(--bg), transparent); z-index: 2; pointer-events: none; }
.ticker-wrap::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 100px; background: linear-gradient(to left, var(--bg), transparent); z-index: 2; pointer-events: none; }
.ticker-list { display: flex; list-style: none; padding: 0; margin: 0; width: fit-content; animation: ticker-scroll 40s linear infinite; }
.ticker-wrap:hover .ticker-list { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; border-right: 1px solid var(--border-dark); }
.ticker-item i { font-size: 0.9em; color: var(--text-muted); }
.ticker-item strong { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* --- CONTENIDO PRINCIPAL DEL FOOTER (2 COLUMNAS) --- */
.footer-main {
display: grid;
grid-template-columns: 1fr; /* 1 columna en móvil */
gap: var(--space-10);
margin-bottom: var(--space-8);
padding-top: var(--space-8);
}
.footer-column { display: flex; flex-direction: column; }
.footer-logo {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: 1.2rem;
font-weight: var(--font-weight-bold);
color: var(--text-primary);
text-decoration: none;
margin-bottom: var(--space-2);
}
.footer-logo svg { color: var(--x-blue); }
.footer-description {
font-size: var(--text-sm);
line-height: 1.6;
max-width: 35ch;
color: var(--text-secondary);
}
.footer-social { display: flex; gap: var(--space-4); margin-top: var(--space-2); }
.footer-social a { color: var(--text-muted); font-size: 1.3rem; transition: color var(--transition-fast), transform var(--transition-fast); }
.footer-social a:hover { color: var(--x-blue); transform: translateY(-3px); }
/* BARRA LEGAL INFERIOR (AHORA CON SOLO EL COPYRIGHT) */
.footer-legal {
padding-top: var(--space-6);
margin-top: var(--space-8);
border-top: 1px solid var(--border-dark);
text-align: center; /* Centramos el copyright */
}
.footer__copy { font-size: var(--text-xs); color: var(--text-muted); }
/* ESTILOS PARA LA LICENCIA (AHORA EN LA COLUMNA DERECHA) */
.footer__license {
display: flex;
flex-direction: column;
gap: var(--space-3);
color: var(--text-muted);
font-size: var(--text-xs);
}
.footer__license a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--border-default); transition: color var(--transition-fast), border-color var(--transition-fast); }
.footer__license a:hover { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.footer__license a[rel="license"]:first-child { display: flex; gap: var(--space-2); font-size: 1.5rem; text-decoration: none; border-bottom: none; color: var(--text-muted); }
.footer__license a[rel="license"]:first-child:hover { color: var(--text-primary); }
.footer__license span { line-height: 1.6; }
/* LAYOUT DE 2 COLUMNAS PARA ESCRITORIO */
@media (min-width: 768px) {
.footer-main {
display: flex;
justify-content: space-between;
align-items: flex-start; /* Alinea las columnas por la parte de arriba */
}
.footer-column--content {
align-items: flex-end; /* Alinea la licencia a la derecha */
text-align: right;
}
.footer-legal {
display: flex; /* Mantenemos flex para consistencia */
justify-content: center; /* Aseguramos el centrado */
}
}
.footer__indicators{margin-bottom:var(--space-6)}.footer__indicators-title{font-size:var(--text-md);font-weight:var(--font-weight-bold);color:var(--text-primary);margin-bottom:var(--space-4);display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.footer__indicators-list{display:flex;gap:var(--space-5);justify-content:center;flex-wrap:wrap;list-style:none;min-height:1.8em}.footer__indicator-item{background-color:transparent;padding:0;border:none;font-size:var(--text-sm);color:var(--text-secondary);box-shadow:none;display:inline-flex;align-items:center;gap:var(--space-2);transition:color var(--transition-fast)}.footer__indicator-item:hover{color:var(--text-primary)}.footer__indicator-item strong{font-weight:var(--font-weight-medium);color:var(--text-primary);margin-left:var(--space-1)}.footer__indicator-item i{font-size:.9em;flex-shrink:0}.footer__copy{margin-top:var(--space-6);font-size:var(--text-sm)}.footer__copy a{color:var(--text-link);font-weight:var(--font-weight-medium)}.footer__copy a:hover{text-decoration:underline}
/* --- Controles Flotantes y UI General --- */
.scroll-top-btn { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 998; background-color: var(--x-blue); color: #ffffff; border: none; border-radius: 50%; width: 48px; height: 48px; box-shadow: var(--shadow-md); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(15px); transition: opacity var(--transition-base) ease-out, visibility 0s var(--transition-base) linear, transform var(--transition-base) ease-out, background-color var(--transition-fast); }
.scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn i { font-size: 1.2rem; line-height: 1; }
.scroll-top-btn:hover { background-color: var(--x-blue-hover); box-shadow: var(--shadow-lg); }
.scroll-top-btn:active { background-color: var(--x-blue-active); transform: scale(0.95); }
.scroll-top-btn:focus-visible { outline: none; box-shadow: 0 0 0 var(--border-width-focus) var(--bg), 0 0 0 calc(var(--border-width-focus) * 2) var(--x-blue); }
.control-panel { position: fixed; top: 50%; right: var(--space-5); transform: translateY(-50%); display: flex; flex-direction: column; gap: var(--space-3); z-index: 1000; background-color: var(--control-panel-bg); border: var(--border-width) solid var(--control-panel-border); border-radius: var(--radius-full); padding: var(--space-3); box-shadow: var(--shadow-md); backdrop-filter: blur(4px); transition: opacity var(--transition-base) ease-out, visibility 0s var(--transition-base) linear, transform var(--transition-base) ease-out; }
.control-panel__button { width: 42px; height: 42px; background-color: transparent; border: none; border-radius: 50%; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; padding: 0; }
.control-panel__button i { font-size: 1.1rem; line-height: 1; }
.control-panel__button:hover { background-color: var(--hover-bg); color: var(--text-primary); transform: scale(1.1); }
.control-panel__button:active { background-color: var(--active-bg); transform: scale(1.05); }
.control-panel__button:focus-visible { outline: none; box-shadow: var(--shadow-focus); color: var(--text-primary); }
.exit-immersive-btn { position: fixed; top: var(--space-4); right: var(--space-4); width: 34px; height: 34px; background-color: var(--exit-btn-bg); color: var(--exit-btn-text); border: var(--border-width) solid var(--border-default); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1002; cursor: pointer; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: scale(0.8); transition: opacity var(--transition-fast) ease-in-out, visibility 0s var(--transition-fast) linear, transform var(--transition-fast) ease-in-out, background-color var(--transition-fast); }
.exit-immersive-btn[hidden] { display: none !important; }
.exit-immersive-btn i { font-size: 1rem; line-height: 1; }
.exit-immersive-btn:hover { background-color: var(--exit-btn-hover-bg); transform: scale(1.1); }
.exit-immersive-btn:active { transform: scale(1); }
.exit-immersive-btn:focus-visible { outline: none; box-shadow: 0 0 0 var(--border-width-focus) var(--exit-btn-bg), 0 0 0 calc(var(--border-width-focus) * 2) var(--x-blue); }
body.immersive-mode .header, body.immersive-mode .footer, body.immersive-mode .control-panel, body.immersive-mode .scroll-top-btn { opacity: 0; visibility: hidden; transform: translateY(-15px); pointer-events: none; transition: opacity var(--transition-base) ease-out, visibility 0s var(--transition-base) linear, transform var(--transition-base) ease-out; }
body.immersive-mode .exit-immersive-btn { opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0.1s; }
body.immersive-mode main.main-content { padding-top: var(--space-6); padding-bottom: var(--space-6); }
body.immersive-mode .widget { border-top-color: transparent !important; border-bottom-color: transparent !important; margin-bottom: 0; }
body.immersive-mode .widget.active { max-width: 850px; margin-top: 0; margin-bottom: 0; }
body.immersive-mode .google-ad-container, body.immersive-mode .content-block { display: none; }
/* ====================================================================== */
/* == PARTE 3: COMPONENTES (FORMULARIOS, BOTONES, TABLAS) == */
/* ====================================================================== */
.widget-header { padding: var(--space-4) var(--space-6); display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.widget-title { font-size: var(--text-lg); font-weight: var(--font-weight-bold); margin: 0; display: flex; align-items: center; gap: var(--space-3); color: var(--text-primary); }
.widget-title i { font-size: 0.9em; color: var(--text-secondary); }
.widget-actions { display: flex; gap: var(--space-1); }
.widget-actions .btn-icon { width: 36px; height: 36px; }
.widget-actions .btn-icon i { font-size: 1rem; }
.widget-content { padding: var(--space-6); }
.widget-description { font-size: var(--text-md); color: var(--text-secondary); margin-bottom: var(--space-6); line-height: var(--line-height-normal); max-width: 65ch; }
.widget-footer { padding: var(--space-4) var(--space-6); margin-top: var(--space-4); display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }
/* --- Formularios --- */
.form-group { margin-bottom: var(--space-6); }
.form-label { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary); margin-bottom: var(--space-2); }
.form-control { display: block; width: 100%; padding: var(--space-3) var(--space-4); font-size: var(--text-md); line-height: 1.5; color: var(--text-primary); background-color: var(--hover-bg); border: var(--border-width) solid var(--border-default); appearance: none; border-radius: var(--radius-md); box-shadow: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); }
.form-control:hover { border-color: hsl(210, 10%, 75%); }
.form-control:focus { border-color: var(--x-blue); outline: 0; box-shadow: var(--shadow-focus); background-color: var(--bg); }
.form-control::placeholder { color: var(--text-muted); opacity: 1; }
.form-control:disabled, .form-control[readonly] { background-color: var(--active-bg); opacity: 0.7; cursor: not-allowed; border-color: var(--border-default); }
.input-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
@media (min-width: 640px) { .input-row { grid-template-columns: 1fr 1fr; } }
.filter-controls { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-6); }
.filter-controls .form-control { width: auto; flex-grow: 1; min-width: 150px; margin-bottom: 0; }
.filter-controls .btn { margin-bottom: 0; }
/* --- Botones --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-5); height: 42px; font-size: var(--text-md); font-weight: var(--font-weight-bold); line-height: 1; text-align: center; vertical-align: middle; cursor: pointer; user-select: none; border: var(--border-width-focus) solid transparent; border-radius: var(--radius-full); transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast); white-space: nowrap; }
.btn i { font-size: 1.1em; }
.btn:focus-visible { outline: none; border-color: var(--x-blue-focus-ring); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled, .btn[disabled] { cursor: not-allowed; opacity: 0.6; }
.btn-full-width { width: 100%; margin-top: var(--space-6); }
.btn-primary { color: #ffffff; background-color: var(--x-blue); border-color: var(--x-blue) !important; }
.btn-primary:hover:not(:disabled) { background-color: var(--x-blue-hover); border-color: var(--x-blue-hover) !important; }
.btn-primary:active:not(:disabled) { background-color: var(--x-blue-active); border-color: var(--x-blue-active) !important; }
.btn-primary:focus-visible { border-color: var(--bg) !important; box-shadow: 0 0 0 var(--border-width-focus) var(--x-blue); }
.btn-secondary { color: var(--text-primary); background-color: transparent; border: var(--border-width) solid var(--secondary-btn-border) !important; }
.btn-secondary:hover:not(:disabled) { background-color: var(--secondary-btn-hover-bg); border-color: hsl(210, 10%, 75%) !important; }
body.dark .btn-secondary:hover:not(:disabled) { border-color: hsl(210, 6%, 35%) !important; }
.btn-secondary:active:not(:disabled) { background-color: var(--active-bg); }
.btn-secondary:focus-visible { border-color: var(--x-blue) !important; }
.btn-danger { color: var(--danger-text); background-color: transparent; border: var(--border-width) solid var(--danger-border) !important; }
.btn-danger:hover:not(:disabled) { background-color: var(--danger-hover-bg); border-color: hsl(0, 70%, 80%) !important; color: var(--x-red); }
body.dark .btn-danger:hover:not(:disabled) { border-color: hsl(0, 60%, 40%) !important; }
.btn-danger:active:not(:disabled) { background-color: hsla(0, 79%, 63%, 0.15); }
.btn-danger:focus-visible { border-color: var(--x-red) !important; box-shadow: 0 0 0 var(--border-width-focus) hsla(0, 79%, 63%, 0.4); color: var(--x-red);}
.btn-icon { padding: 0; width: 40px; height: 40px; border-radius: 50%; border: none !important; color: var(--text-secondary); background-color: transparent; }
.btn-icon i { margin: 0; font-size: 1.1rem; }
.btn-icon:hover:not(:disabled) { background-color: var(--hover-bg); color: var(--text-primary); }
.btn-icon:active:not(:disabled) { background-color: var(--active-bg); transform: scale(0.95); }
.btn-icon:focus-visible { outline: none; box-shadow: 0 0 0 var(--border-width-focus) var(--x-blue-focus-ring); }
/* --- Pestañas y Tablas --- */
.tabs.history-tabs { display: flex; border-bottom: var(--border-width) solid var(--border-default); margin: 0 calc(-1 * var(--space-6)) var(--space-6) calc(-1 * var(--space-6)); padding: 0 var(--space-6); }
.tab-btn { flex-grow: 1; text-align: center; border: none; border-bottom: 3px solid transparent; background: none; color: var(--text-secondary); padding: var(--space-3) var(--space-2); font-weight: var(--font-weight-medium); font-size: var(--text-md); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast); }
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--x-blue); border-bottom-color: var(--x-blue); font-weight: var(--font-weight-bold); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.table-wrapper { overflow-x: auto; margin-bottom: var(--space-6); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.data-table th, .data-table td { padding: var(--space-3) var(--space-2); text-align: left; border: none; border-bottom: var(--border-width) solid var(--border-default); font-variant-numeric: tabular-nums; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table thead { background-color: transparent; }
.data-table th { color: var(--text-secondary); font-weight: var(--font-weight-medium); font-size: var(--text-sm); text-transform: none; letter-spacing: normal; border-bottom-width: 2px; padding-bottom: var(--space-2); }
.data-table tbody tr { transition: background-color var(--transition-fast); }
.data-table tbody tr:hover { background-color: var(--hover-bg); }
.data-table th:nth-child(n+2):not(.action-cell),
.data-table td:nth-child(n+2):not(.action-cell),
.data-table .result-cell { text-align: right; }
.data-table .action-cell { text-align: right; width: 1%; padding-left: var(--space-3); padding-right: 0; }
.data-table .action-cell .btn-icon { width: 32px; height: 32px; }
.data-table .action-cell .btn-icon i { font-size: 0.9rem; }
.history-table tr.today td { font-weight: var(--font-weight-medium); color: var(--text-primary); }
.history-table tr.today td:first-child::before { content: 'Hoy '; font-weight: bold; color: var(--x-blue); margin-right: var(--space-1); }
.loading-placeholder td { text-align: center !important; color: var(--text-muted); padding: var(--space-10) var(--space-4) !important; font-size: var(--text-md); border-bottom: none; }
.loading-placeholder i { margin-right: var(--space-2); animation: fa-spin 1.5s infinite linear; }
.multi-table input[type=number].form-control{padding:var(--space-2) var(--space-3);font-size:var(--text-md);background-color:var(--bg);border-color:var(--border-default);text-align:right}.multi-table input[type=number].form-control:focus{background-color:var(--bg)}.multi-table .result-cell{font-weight:var(--font-weight-medium)}.data-table tfoot tr{background-color:transparent}.data-table tfoot td{font-weight:var(--font-weight-bold);font-size:var(--text-md);color:var(--text-primary);border-top:var(--border-width) solid var(--border-default);padding-top:var(--space-3)}.total-cell{text-align:right!important;padding-right:calc(32px + var(--space-3))!important}
/* --- Tarjetas de Resultado y Misceláneos --- */
.result-card{margin-top:var(--space-6);padding:var(--space-5) var(--space-6);background-color:var(--hover-bg);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-lg);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s ease-out,transform .3s ease-out,visibility .3s}.result-card.visible{opacity:1;visibility:visible;transform:translateY(0)}.result-card__value{font-size:1.5rem;font-weight:var(--font-weight-bold);color:var(--text-primary);display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}.result-card__value i{font-size:1.1em}.result-card__detail{font-size:var(--text-md);color:var(--text-secondary);margin-bottom:var(--space-2)}.result-card__detail strong{font-weight:var(--font-weight-medium);color:var(--text-primary)}.result-card__detail i{margin-right:var(--space-1);font-size:.9em}.projection-disclaimer{font-size:var(--text-sm);color:var(--text-muted);text-align:center;margin-top:var(--space-4)}
.loading-progress-container{text-align:center;padding:var(--space-8) var(--space-5);color:var(--text-muted);font-size:var(--text-sm)}.loading-progress-container i{margin-right:var(--space-3);animation:fa-spin 1.5s infinite linear}.loading-progress-bar{width:80%;max-width:300px;height:10px;background-color:var(--border-default);border-radius:var(--radius-full);margin:var(--space-4) auto var(--space-3) auto;overflow:hidden;position:relative}.loading-progress-bar-fill{width:0%;height:100%;background-color:var(--x-blue);border-radius:var(--radius-full);position:absolute;left:0;top:0;transition:width .3s ease-out}.loading-progress-percentage{font-weight:500;color:var(--text-secondary);font-size:var(--text-xs)}
/* ====================================================================== */
/* == PARTE 4: CONVERSOR, GRÁFICO Y EXPLORADOR UF INTEGRADO == */
/* ====================================================================== */
/* --- Componentes del Conversor --- */
.converter-display { text-align: center; margin-bottom: var(--space-8); }
.converter-display-label { color: var(--text-secondary); margin-bottom: var(--space-2); }
.converter-display-value { font-size: 3rem; font-weight: var(--font-weight-bold); }
.converter-inputs {
display: flex;
align-items: center;
gap: var(--space-3);
max-width: 550px;
margin: var(--space-8) auto;
}
.input-group {
position: relative;
flex: 1;
background-color: var(--hover-bg-dark);
border-radius: var(--radius-lg);
border: 1px solid var(--border-dark);
transition: all var(--transition-fast);
overflow: hidden; /* FIX: Evita que el contenido hijo se desborde */
}
.input-group:focus-within {
border-color: var(--x-blue);
box-shadow: 0 0 0 3px var(--x-blue-focus-ring);
}
.input-group__label {
position: absolute;
top: var(--space-3);
left: var(--space-4);
font-size: var(--text-sm);
color: var(--text-secondary);
pointer-events: none; /* Permite hacer clic a través de la etiqueta */
}
.input-group__control {
width: 100%;
background: transparent;
border: none;
outline: none;
padding: var(--space-8) var(--space-4) var(--space-3) var(--space-4);
font-size: 1.75rem;
font-weight: 500;
color: var(--text-primary);
text-align: left;
-moz-appearance: textfield;
border-radius: var(--radius-lg); /* FIX: Aplica el mismo radio que el padre */
}
.input-group__control::-webkit-outer-spin-button,
.input-group__control::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.swap-btn {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--hover-bg-dark);
color: var(--text-secondary);
border: 1px solid var(--border-dark);
transition: all var(--transition-fast);
}
.swap-btn:hover {
color: var(--text-primary);
transform: rotate(180deg);
}
.converter-inputs { display: flex; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-8); max-width: 550px; margin-left: auto; margin-right: auto;}
.converter-inputs .form-group { flex: 1; min-width: 150px; margin-bottom: 0; display: flex; flex-direction: column; }
.converter-inputs .form-label { margin-bottom: var(--space-1); text-align: left; flex-shrink: 0; }
.converter-inputs .form-control { font-size: var(--text-lg); text-align: right; padding: var(--space-3) var(--space-4); }
.converter-inputs .swap-btn { align-self: flex-end; flex-shrink: 0; margin-bottom: calc(var(--space-3) + var(--border-width)); }
.chart-container { height: 180px; margin: 0 auto var(--space-4) auto; max-width: 600px; position: relative; padding-bottom: var(--space-2); }
.chart-controls { display: flex; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-6); border: none; }
.range-btn { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary); background-color: transparent; border: none; border-radius: var(--radius-full); transition: var(--transition-fast); min-height: 34px; }
.range-btn:hover:not(.active):not(:disabled) { background-color: var(--hover-bg); color: var(--text-primary); }
.range-btn.active { color: var(--x-blue); background-color: hsla(203, 89%, 53%, 0.1); font-weight: var(--font-weight-bold); }
.range-btn.active:hover:not(:disabled) { background-color: hsla(203, 89%, 53%, 0.15); }
/* --- Línea de Tiempo (Timeline) --- */
.historical-date-selector {display: flex; justify-content: center; align-items: center; gap: var(--space-2); }
#historicalDateInput { opacity: 0; position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; padding: 0; border: none; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.timeline-navigation-container { display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-content: center; width: 100%; max-width: 500px; margin-left: auto; margin-right: auto; padding: var(--space-2) 0; background-color: transparent; border-radius: var(--radius-md); overflow: hidden; }
.timeline-nav-btn { background-color: transparent; border: none; color: var(--text-secondary); padding: var(--space-3); cursor: pointer; font-size: 1rem; transition: color var(--transition-fast); flex-shrink: 0; place-self: center; }
.timeline-nav-btn:hover:not(:disabled) { color: var(--x-blue); }
.timeline-nav-btn:disabled { color: var(--text-muted); opacity: 0.5; cursor: not-allowed; }
.timeline-viewport { overflow: hidden; width: 100%; position: relative; padding: 0 var(--space-2); }
.timeline-track { display: flex; transition: transform 0.3s ease-in-out; will-change: transform; }
.timeline-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-2) var(--space-3); min-width: 60px; height: 60px; cursor: pointer; border-radius: var(--radius-md); transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); color: var(--text-secondary); font-size: var(--text-sm); border: 1px solid transparent; box-sizing: border-box; }
.timeline-item:hover:not(.disabled) { background-color: var(--hover-bg); color: var(--text-primary); }
.timeline-item.selected { background-color: var(--x-blue-focus-ring); color: var(--x-blue); font-weight: var(--font-weight-medium); box-shadow: var(--shadow-sm); border-color: var(--x-blue); transform: scale(0.95); }
.timeline-item.disabled { opacity: 0.5; cursor: not-allowed; background-color: transparent !important; color: var(--text-muted) !important; border-color: transparent !important; }
.timeline-item .month-name { font-size: 0.8em; line-height: 1.2; text-transform: capitalize; margin-bottom: 2px; }
.timeline-item .day-number { font-size: 1.1em; font-weight: var(--font-weight-medium); line-height: 1.2; }
/* --- Explorador UF Integrado --- */
.monthly-explorer-section { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border-default); }
.section-title-like-widget { font-size: 1.3rem; font-weight: var(--font-weight-medium); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); text-align: left; }
.section-title-like-widget i { font-size: 1em; color: var(--text-muted); }
.expandable-table-trigger-container { margin-bottom: var(--space-6); text-align: left; }
.expandable-table-trigger { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: var(--text-md); font-weight: var(--font-weight-medium); color: var(--text-secondary); background-color: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast); width: auto; }
.expandable-table-trigger:hover { background-color: var(--hover-bg); color: var(--text-primary); border-color: var(--secondary-btn-border); }
.expandable-table-trigger .icon-toggle { transition: transform 0.25s ease-out; color: var(--text-muted); }
.expandable-table-trigger:hover .icon-toggle { color: var(--text-secondary); }
.expandable-table-trigger[aria-expanded="true"] .icon-toggle { transform: rotate(180deg); }
.monthly-explorer-content-wrapper { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-out 0.05s, margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1); margin-top: 0; padding-top: 0; padding-bottom: 0; border-top: 1px solid transparent; }
.monthly-explorer-content-wrapper:not([hidden]) { max-height: 2500px; opacity: 1; margin-top: var(--space-6); padding-top: var(--space-4); padding-bottom: var(--space-2); border-top-color: var(--border-default); }
/* ====================================================================== */
/* == ESTILOS PARA EL NUEVO EXPLORADOR MENSUAL DE UF (v1.0) == */
/* ====================================================================== */
.monthly-explorer-controls {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 380px;
margin: 0 auto 1.5rem auto;
padding: 0.5rem;
border-radius: var(--radius-md);
background-color: var(--hover-bg);
}
.monthly-explorer-table th:first-child,
.monthly-explorer-table td:first-child {
text-align: center;
width: 20%; /* Ancho para la columna 'Día' */
}
.monthly-explorer-table tbody tr.selected-in-converter {
background-color: hsla(195, 100%, 50%, 0.1) !important;
}
.monthly-explorer-table tbody tr.selected-in-converter td {
color: var(--x-blue) !important;
font-weight: var(--font-weight-bold);
}
.monthly-explorer-table tbody tr.selected-in-converter .btn-icon {
color: var(--x-blue) !important;
}
.monthly-explorer-section .widget-footer {
justify-content: center; /* Centra el botón de Sincronizar */
}
/* Redondeamos solo las esquinas exteriores para crear la cápsula */
#prevMonthBtn {
border-top-left-radius: var(--radius-full);
border-bottom-left-radius: var(--radius-full);
}
#nextMonthBtn {
border-top-right-radius: var(--radius-full);
border-bottom-right-radius: var(--radius-full);
}
/* ====================================================================== */
/* == ESTILOS PARA EL EXPLORADOR MENSUAL (v4.0 - SOLUCIÓN DEFINITIVA) == */
/* ====================================================================== */
/* Contenedor que centra la cápsula en la página */
.monthly-explorer-controls {
display: flex;
justify-content: center;
margin-bottom: 1.5rem;
}
/* ¡LA CÁPSULA! Un solo elemento visual que contiene todo */
.monthly-explorer-controls .month-header-container {
display: inline-flex; /* Se ajusta al contenido */
align-items: center;
background-color: var(--hover-bg);
border: 1px solid var(--border-default);
border-radius: var(--radius-full); /* Bordes de cápsula */
padding: var(--space-1);
box-shadow: var(--shadow-sm);
}
/* El texto del mes (dentro de la cápsula) */
.monthly-explorer-controls .month-header {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
padding: 0 var(--space-4); /* Espacio entre el texto y las flechas */
min-width: 160px;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* Los botones de flecha (dentro de la cápsula) */
.monthly-explorer-controls .btn-icon {
width: 36px;
height: 36px;
/* Hacemos los botones transparentes, son solo áreas de clic */
background-color: transparent;
border: none;
box-shadow: none;
}
/* El efecto hover se aplica solo al área del botón */
.monthly-explorer-controls .btn-icon:hover:not(:disabled) {
background-color: var(--active-bg);
}
/* ====================================================================== */
/* == PARTE 5: MENÚS MODALES Y OVERLAYS (FULLSCREEN, SWEETALERT) == */
/* ====================================================================== */
/* --- Menú Overlay Fullscreen --- */
.modern-menu-trigger { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2); margin-left: var(--space-1); background-color: transparent; border: none; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; z-index: 1102; position: relative; width: 48px; height: 48px; transition: opacity 0.2s ease; }
.modern-menu-trigger:hover { opacity: 0.8; }
.modern-menu-trigger__icon { position: relative; display: block; width: 26px; height: 20px; }
.modern-menu-trigger__icon span { display: block; position: absolute; left: 0; right: 0; width: 100%; height: 3px; background-color: var(--text-primary); opacity: 1; transform: scale(1); border-radius: 3px; transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s, top 0.25s cubic-bezier(0.645, 0.045, 0.355, 1), bottom 0.25s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.25s ease; transform-origin: center; }
.modern-menu-trigger__icon span:nth-child(1) { top: 0; transition-property: top, transform, background-color; }
.modern-menu-trigger__icon span:nth-child(2) { top: 50%; transform: translateY(-50%) scaleX(1); opacity: 1; transition-property: opacity, transform, background-color; }
.modern-menu-trigger__icon span:nth-child(3) { bottom: 0; top: auto; transform: translateY(0) scaleX(1); transition-property: bottom, transform, background-color; }
.modern-menu-trigger.is-active .modern-menu-trigger__icon span { background-color: var(--text-primary); }
.modern-menu-trigger.is-active .modern-menu-trigger__icon span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); transition-delay: 0s, 0.12s; }
.modern-menu-trigger.is-active .modern-menu-trigger__icon span:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(0.5); transition-delay: 0s; }
.modern-menu-trigger.is-active .modern-menu-trigger__icon span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); transition-delay: 0s, 0.12s; }
.fullscreen-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg); z-index: 1100; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-6); opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.98); transition: opacity 0.35s var(--transition-menu), visibility 0s 0.35s, transform 0.35s var(--transition-menu); will-change: opacity, transform; }
.fullscreen-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition-delay: 0s, 0s, 0s; }
.fullscreen-menu.is-open .fullscreen-menu__list li { opacity: 1; transform: translateY(0); transition-property: opacity, transform; transition-duration: 0.45s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
.fullscreen-menu.is-open .fullscreen-menu__list li:nth-child(1) { transition-delay: 0.15s; }
.fullscreen-menu.is-open .fullscreen-menu__list li:nth-child(2) { transition-delay: 0.20s; }
.fullscreen-menu.is-open .fullscreen-menu__list li:nth-child(3) { transition-delay: 0.25s; }
.fullscreen-menu__close { position: absolute; top: var(--space-4); right: var(--space-4); background: none; border: none; color: var(--text-primary); font-size: 1.6rem; padding: var(--space-2); line-height: 1; cursor: pointer; transition: color var(--transition-fast), transform var(--transition-fast); z-index: 1101; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.fullscreen-menu__close:hover, .fullscreen-menu__close:focus-visible { color: var(--x-red); transform: scale(1.1) rotate(90deg); outline: none; }
.fullscreen-menu__list { list-style: none; padding: 0; margin: 0; text-align: center; width: 100%; max-width: 320px; }
.fullscreen-menu__list li { opacity: 0; transform: translateY(30px); }
.fullscreen-menu__list a { display: flex; align-items: center; justify-content: flex-start; padding: var(--space-3) var(--space-2); margin-bottom: var(--space-2); color: var(--text-secondary); text-decoration: none; font-size: 1.2rem; font-weight: var(--font-weight-medium); border-radius: var(--radius-md); transition: color 0.2s ease-out, background-color 0.2s ease-out, letter-spacing 0.2s ease-out; position: relative; letter-spacing: 0.2px; border: 1px solid transparent; }
.fullscreen-menu__list a:hover, .fullscreen-menu__list a:focus-visible { color: var(--text-primary); background-color: var(--hover-bg); border-color: var(--border-default); letter-spacing: 0.5px; outline: none; }
.fullscreen-menu__list a.active { color: var(--x-blue); font-weight: var(--font-weight-bold); }
.fullscreen-menu__list a.active::before { content: ''; position: absolute; left: calc(var(--space-2) * -0.5); top: 50%; transform: translateY(-50%); width: 4px; height: 50%; background-color: var(--x-blue); border-radius: 2px; }
.fullscreen-menu__list a i { margin-right: var(--space-3); font-size: 1.1em; width: 22px; text-align: center; color: var(--text-muted); transition: color 0.2s ease-out; pointer-events: none; }
.fullscreen-menu__list a:hover i, .fullscreen-menu__list a:focus-visible i, .fullscreen-menu__list a.active i { color: inherit; }
.fullscreen-menu__list a span { flex-grow: 1; }
.fullscreen-menu__list .has-submenu > a { cursor: pointer; }
.fullscreen-menu__list .submenu-caret { margin-left: auto; font-size: 0.9em; transition: transform 0.3s ease-in-out; }
.fullscreen-menu__list .has-submenu.is-open > a .submenu-caret { transform: rotate(180deg); }
.fullscreen-submenu { list-style: none; padding: 0; padding-left: var(--space-4); margin: 0; overflow: hidden; max-height: 0; transition: max-height 0.3s ease-in-out, margin-top 0.3s ease-in-out, opacity 0.3s ease-in-out; opacity: 0; }
.has-submenu.is-open > .fullscreen-submenu { max-height: 500px; margin-top: var(--space-2); opacity: 1; }
.fullscreen-submenu a { font-size: 1rem; padding: var(--space-2); color: var(--text-secondary); margin-bottom: var(--space-1); }
.fullscreen-submenu a.active { font-weight: var(--font-weight-bold); color: var(--x-blue); }
.fullscreen-submenu a.active::before { height: 40%; left: calc(var(--space-2) * -1); }
/* --- Estilos para SweetAlert2 y Flatpickr --- */
.swal2-popup{border-radius:var(--radius-lg)!important;background-color:var(--bg)!important;color:var(--text-primary)!important;border:none!important;box-shadow:var(--shadow-dialog)!important;padding:var(--space-8)!important;max-width:480px}
.swal2-title{font-size:1.3rem!important;font-weight:var(--font-weight-bold)!important;color:var(--text-primary)!important;margin-bottom:var(--space-2)!important} .swal2-html-container{font-size:var(--text-md)!important;color:var(--text-secondary)!important;line-height:1.6!important;margin:var(--space-4) 0!important} .swal2-actions{gap:var(--space-3)!important;margin-top:var(--space-6)!important} .swal2-confirm,.swal2-cancel,.swal2-deny{height:40px!important;border-radius:var(--radius-full)!important;font-weight:var(--font-weight-bold)!important;font-size:var(--text-md)!important;box-shadow:none!important;border-width:var(--border-width)!important;padding:0 var(--space-5)!important;margin:0!important;transition:var(--transition-fast)!important;border-color:transparent!important} .swal2-confirm{color:#fff!important;background-color:var(--x-blue)!important} .swal2-confirm:hover{background-color:var(--x-blue-hover)!important} .swal2-cancel{color:var(--text-primary)!important;background-color:transparent!important;border:var(--border-width) solid var(--secondary-btn-border)!important} .swal2-cancel:hover{background-color:var(--secondary-btn-hover-bg)!important} .swal2-deny{color:var(--danger-text)!important;background-color:transparent!important;border:var(--border-width) solid var(--danger-border)!important} .swal2-deny:hover{background-color:var(--danger-hover-bg)!important} .swal2-icon { width: 3em !important; height: 3em !important; margin: var(--space-5) auto var(--space-3) !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; box-sizing: border-box !important; background-color: transparent !important; } .swal2-icon .swal2-icon-content, .swal2-success *, .swal2-error *, .swal2-warning *, .swal2-info *, .swal2-question * { display: none !important; } .swal2-icon::before { font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 1.5em; line-height: 1; color: currentColor; } .swal2-icon.swal2-success { color: var(--success-text) !important; } .swal2-icon.swal2-success::before { content: '\f00c'; } .swal2-icon.swal2-error { color: var(--x-red) !important; } .swal2-icon.swal2-error::before { content: '\f00d'; } .swal2-icon.swal2-warning { color: hsl(39, 90%, 55%) !important; } .swal2-icon.swal2-warning::before { content: '\f071'; } .swal2-icon.swal2-info { color: var(--x-blue) !important; } .swal2-icon.swal2-info::before { content: '\f05a'; } .swal2-icon.swal2-question { color: var(--text-secondary) !important; } .swal2-icon.swal2-question::before { content: '\f059'; } .swal2-loader { border-color: var(--x-blue) transparent var(--x-blue) transparent !important; width: 2em !important; height: 2em !important; border-width: 2px !important; } .swal2-toast{border-radius:var(--radius-md)!important;border:var(--border-width) solid var(--border-default)!important;box-shadow:var(--shadow-dialog)!important;background-color:var(--bg)!important;padding:var(--space-4)!important} .swal2-toast .swal2-title{font-size:var(--text-md)!important} .swal2-toast .swal2-icon { width: 1.8em !important; height: 1.8em !important; margin: 0 var(--space-3) 0 0 !important; } .swal2-toast .swal2-icon::before { font-size: 1em; } .swal2-timer-progress-bar{background:var(--x-blue)!important;height:4px!important}
.flatpickr-calendar { background: var(--widget-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-dialog); border: 1px solid var(--border-default); width: auto; min-width: 280px; max-width: 320px; z-index: 1095; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month input.cur-year, .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month, .flatpickr-weekday, .flatpickr-day { color: var(--text-primary) !important; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { fill: var(--text-primary); }
body.dark .flatpickr-months .flatpickr-month, body.dark .flatpickr-current-month input.cur-year, body.dark .flatpickr-months .flatpickr-prev-month, body.dark .flatpickr-months .flatpickr-next-month, body.dark .flatpickr-weekday, body.dark .flatpickr-day { color: var(--text-primary-dark) !important; }
body.dark .flatpickr-months .flatpickr-prev-month, body.dark .flatpickr-months .flatpickr-next-month { fill: var(--text-primary-dark); }
body:not(.dark) .flatpickr-day { color: var(--text-primary-light) !important; }
.flatpickr-months .flatpickr-month { padding: var(--space-2) var(--space-1); display: flex; align-items: center; justify-content: center; flex-grow: 1; overflow: visible; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { padding: var(--space-3); border-radius: var(--radius-sm); top: 0; height: auto; line-height: 1; flex-shrink: 0; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: var(--hover-bg); fill: var(--x-blue); }
span.flatpickr-cur-month { font-size: 1.05rem; font-weight: var(--font-weight-medium); flex-shrink: 0; max-width: none; white-space: nowrap; }
.flatpickr-current-month input.cur-year { font-weight: var(--font-weight-medium); padding: 0 var(--space-1); }
.numInputWrapper { min-width: 50px; }
.numInputWrapper span.arrowUp:after { border-bottom-color: var(--text-secondary); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--text-secondary); }
.flatpickr-weekdaycontainer { border-bottom: 1px solid var(--border-default); padding: var(--space-1) 0; }
span.flatpickr-weekday { font-weight: var(--font-weight-medium); font-size: 0.8rem; color: var(--text-secondary); }
body.dark span.flatpickr-weekday { color: var(--text-secondary-dark); }
.flatpickr-day { font-weight: var(--font-weight-normal); border: 1px solid transparent; border-radius: var(--radius-sm); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; line-height: 34px; height: 36px; max-width: 36px; font-size: 0.9rem; }
.flatpickr-day:hover { background: var(--hover-bg); border-color: var(--border-default); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--x-blue); border-color: var(--x-blue); color: #ffffff !important; box-shadow: none; }
.flatpickr-day.today { border-color: var(--x-blue); color: var(--x-blue) !important; font-weight: var(--font-weight-bold); }
.flatpickr-day.today:not(.selected) { color: var(--x-blue) !important; }
body.dark .flatpickr-day.today:not(.selected) { color: var(--x-blue) !important; }
.flatpickr-day.today:not(.selected):hover { background: hsla(203, 89%, 53%, 0.1); color: var(--x-blue) !important; border-color: var(--x-blue); }
.flatpickr-day.disabled, .flatpickr-day.disabled:hover { color: var(--text-muted) !important; background: transparent; border-color: transparent; cursor: default; opacity: 0.5; }
body.dark .flatpickr-day.disabled, body.dark .flatpickr-day.disabled:hover { color: var(--text-muted-dark) !important; opacity: 0.6; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-muted) !important; opacity: 0.6; }
body.dark .flatpickr-day.prevMonthDay, body.dark .flatpickr-day.nextMonthDay { color: var(--text-muted-dark) !important; opacity: 0.7; }
.flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: var(--hover-bg); color: var(--text-primary) !important; }
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background-color: var(--widget-bg); color: var(--text-primary); }
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:hover { background-color: var(--hover-bg); }
.flatpickr-calendar.arrowTop::before { bottom: -10px; left: calc(50% - 5px); border-width: 5px; border-top-color: var(--border-default); }
.flatpickr-calendar.arrowTop::after { bottom: -9px; left: calc(50% - 4px); border-width: 4px; border-top-color: var(--widget-bg); }
.flatpickr-calendar.arrowBottom::before { top: -10px; left: calc(50% - 5px); border-width: 5px; border-bottom-color: var(--border-default); }
.flatpickr-calendar.arrowBottom::after { top: -9px; left: calc(50% - 4px); border-width: 4px; border-bottom-color: var(--widget-bg); }
/* ====================================================================== */
/* == PARTE 6: DISEÑO ADAPTABLE (MEDIA QUERIES) == */
/* ====================================================================== */
@media (min-width: 1024px) {
.main-nav {
display: flex !important;
}
.modern-menu-trigger {
display: none !important;
}
.fullscreen-menu {
display: none !important;
}
body.overlay-menu-is-open {
overflow: auto;
}
}
@media (min-width: 768px) {
.monthly-tables-detailed-container {
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.monthly-explorer-controls {
flex-direction: row;
justify-content: space-around;
}
.monthly-explorer-controls .btn {
flex-grow: 0;
min-width: auto;
}
}
@media (max-width: 1024px) {
.container { padding-left: var(--space-5); padding-right: var(--space-5); }
.widget.active { max-width: 800px; }
body.immersive-mode .widget.active { max-width: 90%; }
.control-panel { right: var(--space-4); }
.converter-inputs { max-width: 480px; }
}
@media (max-width: 768px) {
html { font-size: calc(var(--text-base-size) * 0.98); }
main.main-content { z-index: 2; padding-top: var(--space-6); padding-bottom: var(--space-8); position: relative; }
.container { padding-left: var(--space-4); padding-right: var(--space-4); }
.widget.active { max-width: none; }
.widget { margin-bottom: var(--space-6); }
.widget-content { padding: var(--space-4) var(--space-5); }
.widget-header { padding: var(--space-4) var(--space-5); min-height: 44px; }
.widget-footer { padding: var(--space-3) var(--space-5); margin-top: var(--space-3); }
.form-group { margin-bottom: var(--space-5); }
.btn { height: 44px; font-size: var(--text-md); }
.btn-icon { width: 42px; height: 42px; }
.header { padding: 0 var(--space-4); height: 56px; position: sticky; z-index: 2; position: relative;}
.header-content { gap: var(--space-3); }
.logo { font-size: 1.1rem; }
.logo svg { width: 24px; height: 24px; }
.modern-menu-trigger { display: inline-flex; }
.main-nav { display: none !important; }
.fullscreen-menu__list a { font-size: 1.15rem; padding: var(--space-3) var(--space-1); }
.fullscreen-menu__list a i { margin-right: var(--space-2); }
.fullscreen-menu__close { top: var(--space-3); right: var(--space-3); }
.converter-display { margin-bottom: var(--space-6); padding: var(--space-2) 0 var(--space-4) 0; }
.converter-display-value { font-size: 2.5rem; word-break: break-all; }
.date-display-container { flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-5); }
#dateDisplayText { font-size: var(--text-md); flex-basis: 100%; text-align: center; margin-right: 0; line-height: 1.4; }
#datePickerToggleBtn { width: 40px !important; height: 40px !important; margin-left: 0 !important; flex-shrink: 0; }
#datePickerToggleBtn i { font-size: 1rem; }
.timeline-navigation-container { max-width: 280px; padding: var(--space-1) 0; }
.timeline-item { min-width: 70px; height: 55px; padding: var(--space-1); }
.timeline-item .month-name { font-size: 0.7em; }
.timeline-item .day-number { font-size: 0.9em; margin-top: 1px; }
.timeline-nav-btn { padding: var(--space-2); font-size: 0.9rem; }
.converter-inputs {
flex-direction: column;
gap: var(--space-4);
}
.input-group {
width: 100%;
}
.swap-btn {
transform: rotate(90deg);
}
.swap-btn:hover {
transform: rotate(270deg); /* 90 + 180 */
}
/* ESTILOS RESPONSIVOS PARA INPUTS DEL CONVERSOR */
.converter-inputs { flex-direction: row; align-items: stretch; gap: var(--space-2); max-width: none; }
.converter-inputs .form-group { flex: 1; display: flex; flex-direction: column; background-color: var(--hover-bg); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); min-width: 0; }
.converter-inputs .form-label { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1); }
.converter-inputs .form-control { font-size: 1.6rem; padding: 0; border: none; background-color: transparent; text-align: left; width: 100%; box-shadow: none !important; -moz-appearance: textfield; }
.converter-inputs .form-control::-webkit-outer-spin-button, .converter-inputs .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.converter-inputs .swap-btn { flex-shrink: 0; align-self: center; width: 42px; height: 42px; background-color: transparent; border: none; margin: 0; }
.converter-inputs .swap-btn .desktop-icon { display: none; }
.converter-inputs .swap-btn .mobile-icon { display: inline-block; }
.chart-container { height: 160px; margin: 0 var(--space-2) var(--space-4) var(--space-2); padding-bottom: var(--space-2); }
.data-table th, .data-table td { padding: var(--space-3) var(--space-3); } .total-cell { padding-right: var(--space-3) !important; }
.content-block { margin-top: var(--space-6) !important; padding-top: var(--space-6) !important; max-width: none; } #converter.widget.active + .google-ad-container + .content-block, #converter.widget.active + .content-block { margin-top: var(--space-6) !important; padding-top: 0 !important; border-top: none !important; } .content-header { padding: 0 var(--space-4); gap: var(--space-3); margin-bottom: var(--space-4); } .content-header i { font-size: 1.6rem; } .content-header h2 { font-size: 1.4rem; } .content-body { padding: 0 var(--space-4); } .content-body > p { font-size: var(--text-md); } .sub-content { margin-top: var(--space-6); margin-bottom: var(--space-6); padding-top: var(--space-5); } .sub-content h3 { font-size: 1.2rem; gap: var(--space-2); margin-bottom: var(--space-4); } .sub-content p { font-size: var(--text-md); } .sub-content li { font-size: var(--text-md); }
.footer { padding: var(--space-6) var(--space-4); } .footer__indicators { margin-bottom: var(--space-5); } .footer__indicators-list { gap: var(--space-4); } .footer__indicator-item { font-size: var(--text-sm); } .footer__copy { margin-top: var(--space-5); font-size: var(--text-sm); }
.control-panel { top: auto; bottom: var(--space-4); right: 50%; transform: translateX(50%); flex-direction: row; gap: var(--space-3); padding: var(--space-2) var(--space-3); width: auto; }
.control-panel__button { width: 42px; height: 42px; }
.control-panel__button i { font-size: 1.1rem; }
.exit-immersive-btn { top: var(--space-3); right: var(--space-3); width: 36px; height: 36px; }
.exit-immersive-btn i { font-size: 1rem; }
body.immersive-mode .widget.active { max-width: none; width: 100%; }
body.immersive-mode main.main-content { padding-left: var(--space-3); padding-right: var(--space-3); }
}
@media (max-width: 480px) {
html { font-size: calc(var(--text-base-size) * 0.95); }
main.main-content { padding-top: var(--space-5); padding-bottom: var(--space-6); }
.container { padding-left: var(--space-3); padding-right: var(--space-3); }
.widget-content { padding: var(--space-4); }
.widget-header, .widget-footer { padding-left: var(--space-4); padding-right: var(--space-4); }
.btn { height: 42px; }
.converter-display-value { font-size: 2.2rem; }
.data-table th, .data-table td { padding: var(--space-3) var(--space-2); font-size: var(--text-sm); }
h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.1rem; }
.converter-inputs { flex-direction: column; gap: var(--space-4); }
.converter-inputs .form-group { width: 100%; }
.converter-inputs .swap-btn { transform: rotate(90deg); margin: calc(-1 * var(--space-2)) 0; }
.scroll-top-btn { bottom: var(--space-4); right: var(--space-4); width: 44px; height: 44px; z-index: 997; }
.scroll-top-btn.visible { transform: translateY(0); }
.scroll-top-btn i { font-size: 1.1rem; }
.control-panel { bottom: var(--space-3); padding: var(--space-2); gap: var(--space-2); }
.control-panel__button { width: 40px; height: 40px; }
.control-panel__button i { font-size: 1rem; }
.date-display-container { font-size: var(--text-sm); margin-bottom: var(--space-4); }
#datePickerToggleBtn { width: 38px !important; height: 38px !important; }
#datePickerToggleBtn i { font-size: 0.9rem; }
.timeline-navigation-container { max-width: 240px; padding: var(--space-1) 0; }
.timeline-item { min-width: 60px; height: 50px; padding: var(--space-1); }
.timeline-item .month-name { font-size: 0.65em; }
.timeline-item .day-number { font-size: 0.8em; margin-top: 1px; }
.timeline-nav-btn { padding: var(--space-1); font-size: 0.8rem; }
.fullscreen-menu { width: 100%; max-width: 100%; padding: var(--space-4); }
.fullscreen-menu__list a { font-size: 1.1rem; }
.fullscreen-menu__close { top: var(--space-2); right: var(--space-2); font-size: 1.5rem; }
.modern-menu-trigger { width: 40px; height: 40px; }
.modern-menu-trigger__icon { width: 22px; height: 16px; }
.modern-menu-trigger__icon span { height: 2.5px; }
.monthly-explorer-controls .btn { font-size: var(--text-sm); }
.month-table-detailed-header .month-name-header { font-size: var(--text-md); }
.section-title-like-widget { font-size: 1.1rem; }
.expandable-table-trigger { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); }
}
/* ====================================================================== */
/* == ESTILOS PARA LA PAGINACIÓN DE NOTICIAS == */
/* ====================================================================== */
.pagination-nav {
display: flex;
justify-content: center;
margin-top: 2.5rem;
margin-bottom: 1rem;
user-select: none;
}
.pagination-list {
display: flex;
align-items: center;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
}
.pagination-item {
margin: 0;
}
.pagination-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 0.5rem;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
background-color: transparent;
color: var(--text-secondary);
font-size: var(--text-md);
font-weight: var(--font-weight-medium);
text-decoration: none;
transition: var(--transition-fast);
}
.pagination-link:hover {
background-color: var(--hover-bg);
border-color: var(--x-blue);
color: var(--text-primary);
text-decoration: none;
}
.pagination-link.is-current {
background-color: var(--x-blue);
border-color: var(--x-blue);
color: #ffffff;
font-weight: var(--font-weight-bold);
cursor: default;
}
.pagination-item.disabled .pagination-link {
color: var(--text-muted);
background-color: var(--active-bg);
cursor: not-allowed;
border-color: transparent;
}
/* ====================================================================== */
/* == ESTILOS PRO PARA LA VISTA DE ARTÍCULOS (UF HOY NOTICIAS) == */
/* ====================================================================== */
/* 1. Contenedor Principal del Artículo */
.article-full {
max-width: 720px; /* ANCHO ÓPTIMO PARA LECTURA. ¡Crucial! */
margin: 0 auto; /* Centra el contenido en la página */
padding: 0;
border: none;
}
/* 2. Encabezado del Artículo */
.article-header {
padding: 2rem 0;
margin-bottom: 2rem;
border-bottom: 1px solid var(--border-default);
text-align: left;
}
.back-button {
margin-bottom: 2rem;
font-weight: 500 !important;
font-size: 0.9rem !important;
}
.article-meta-top {
font-size: 0.9rem;
font-weight: 600;
color: var(--x-blue);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.article-main-title {
font-size: 2.5rem;
line-height: 1.2;
margin-bottom: 1rem;
color: var(--text-primary);
}
.article-summary {
font-size: 1.2rem;
color: var(--text-secondary);
line-height: 1.6;
margin-top: 1rem;
}
.article-meta-bottom {
margin-top: 1.5rem;
font-size: 0.9rem;
color: var(--text-secondary);
}
/* 3. Imagen Destacada */
.article-figure {
margin: 2rem 0;
}
.article-figure img {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
width: 100%;
}
.article-figure figcaption {
font-size: var(--text-sm);
color: var(--text-muted);
text-align: center;
margin-top: 0.75rem;
}
/* 4. Contenido del Artículo (Cuerpo) */
.article-content {
font-size: 1.1rem; /* Aumentamos el tamaño para legibilidad */
line-height: 1.8; /* Más aire entre líneas */
color: var(--text-secondary);
}
.article-content p {
margin-bottom: 1.5em;
}
.article-content a {
color: var(--x-blue);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.article-content a:hover {
color: var(--x-blue-hover);
}
.article-content h2, .article-content h3 {
font-size: 1.6rem;
color: var(--text-primary);
margin-top: 2.5rem;
margin-bottom: 1rem;
line-height: 1.3;
}
.article-content blockquote {
margin: 2rem 0;
padding-left: 1.5rem;
border-left: 3px solid var(--x-blue);
font-style: italic;
color: var(--text-primary);
}
.article-content ul, .article-content ol {
margin: 1.5rem 0;
padding-left: 1.5rem;
}
.article-content li {
margin-bottom: 0.75rem;
}
/* 5. Pie de Artículo (Tags) */
.article-footer .metadata-section {
font-size: 0.9rem;
}
.article-footer .tag {
display: inline-block;
padding: 0.25rem 0.75rem;
background-color: var(--hover-bg);
border-radius: var(--radius-full);
color: var(--text-secondary);
text-decoration: none;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
transition: var(--transition-fast);
}
.article-footer .tag:hover {
background-color: var(--x-blue);
color: #fff;
}
/* ====================================================================== */
/* == AJUSTE FINAL PARA MENÚ MÓVIL (UF HOY NOTICIAS) == */
/* ====================================================================== */
/* Anulamos el centrado vertical para que el menú comience desde arriba */
.fullscreen-menu {
justify-content: flex-start;
padding-top: 80px; /* Añadimos espacio superior para que no se pegue al borde */
}
/* ====================================================================== */
/* == AJUSTE PRO PARA CONTROLES DEL EXPLORADOR UF == */
/* ====================================================================== */
/* 1. Convertimos el contenedor en una barra de herramientas flexible */
.monthly-explorer-controls {
display: flex;
justify-content: space-between; /* ¡La magia! Empuja los elementos a los extremos */
align-items: center;
width: 100%;
}
/* 2. Le decimos al botón de sincronizar que no crezca y se quede en el medio */
#setTablesToConverterMonthBtn {
flex-grow: 0;
flex-shrink: 0;
}
/* 3. (Opcional) Damos un poco más de aire a los botones de navegación */
#prevTwoMonthsBtn, #nextTwoMonthsBtn {
flex-basis: auto;
}
/* ====================================================================== */
/* == AJUSTE PRO FINAL PARA CONTROLES DEL EXPLORADOR UF == */
/* ====================================================================== */
.monthly-explorer-controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.explorer-nav-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
width: 100%;
}
/* ====================================================================== */
/* == REFINAMIENTO PRO MODO DÍA (v1.0) == */
/* ====================================================================== */
/* Usamos :not(.dark) para aplicar estos estilos solo cuando el modo oscuro NO está activo */
/* 1. EL LIENZO: Un fondo más sutil y profesional */
body:not(.dark) {
--bg: hsl(220, 30%, 97%); /* De blanco a un gris azulado muy claro */
--text-primary: hsl(210, 15%, 15%); /* Texto principal un poco más oscuro */
--text-secondary: hsl(210, 12%, 38%); /* Texto secundario con más contraste */
}
/* 2. LAS TARJETAS: Damos profundidad y separación */
body:not(.dark) .widget.active,
body:not(.dark) .content-block,
body:not(.dark) .news-container {
background-color: #ffffff; /* Las tarjetas se mantienen blancas para contrastar */
border: 1px solid hsl(220, 25%, 92%);
box-shadow: 0 5px 15px hsla(220, 20%, 50%, 0.07); /* Sombra suave */
border-radius: var(--radius-lg); /* Bordes más redondeados y modernos */
}
/* 3. LOS CONTROLES: Mejoramos la visibilidad */
body:not(.dark) .input-group,
body:not(.dark) .form-control {
background-color: hsl(220, 30%, 95%);
border-color: hsl(220, 20%, 88%);
}
body:not(.dark) .btn-secondary {
border-color: hsl(220, 15%, 85%) !important;
}
body:not(.dark) .btn-secondary:hover:not(:disabled) {
border-color: hsl(220, 15%, 75%) !important;
}
/* 4. EL FOOTER: Lo integramos mejor con el nuevo fondo */
body:not(.dark) .footer {
background-color: hsl(220, 25%, 95.5%);
border-top: 1px solid hsl(220, 20%, 92%);
}
/* ====================================================================== */
/* == REFINAMIENTO PRO MODO DÍA v2.0 (ENFOQUE "AIRE Y LIMPIEZA") == */
/* ====================================================================== */
/* Anulamos los cambios anteriores y establecemos la nueva base */
body:not(.dark) {
--bg: #ffffff; /* Fondo blanco puro y limpio */
--widget-bg: #ffffff; /* El fondo del widget es el mismo */
--text-primary: hsl(210, 15%, 18%); /* Texto más oscuro para máximo contraste */
--text-secondary: hsl(210, 12%, 45%);
--border-default: hsl(220, 25%, 92%); /* Borde sutil */
}
/* Eliminamos los marcos y sombras que no gustaron */
body:not(.dark) .widget.active,
body:not(.dark) .content-block,
body:not(.dark) .news-container {
background-color: transparent; /* Fondo transparente para unificar */
border: none;
box-shadow: none;
border-radius: 0;
}
/* Creamos separadores sutiles ENTRE los widgets */
body:not(.dark) .widget.active + .widget.active,
body:not(.dark) .widget.active + .google-ad-container,
body:not(.dark) .google-ad-container + .content-block {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--border-default);
}
/* Ajustes finos para que los inputs se vean premium sobre blanco */
body:not(.dark) .input-group {
background-color: hsl(220, 30%, 96%);
border: 1px solid transparent; /* Sin borde por defecto */
}
body:not(.dark) .input-group:focus-within {
border-color: var(--x-blue); /* Borde aparece solo al enfocar */
}
/* Mejoramos el contraste del texto de la Guía UF */
body:not(.dark) .content-body > p {
color: var(--text-secondary);
}
body:not(.dark) .sub-content h3 {
color: var(--text-primary);
}
/* El footer se simplifica */
body:not(.dark) .footer {
background-color: transparent;
border-top: 1px solid var(--border-default);
padding-top: 2rem;
margin-top: 3rem;
}
/* ====================================================================== */
/* == AJUSTE PRO FINAL PARA CONTROLES DEL EXPLORADOR UF == */
/* ====================================================================== */
.monthly-explorer-controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.explorer-nav-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
width: 100%;
}
/* ====================================================================== */
/* == AJUSTE FINAL PARA HEADER INTELIGENTE EN MODO OSCURO == */
/* ====================================================================== */
.header {
transition: transform 0.3s ease-in-out;
}
body.dark .header {
background-color: var(--bg-dark); /* Aseguramos el fondo en modo oscuro */
}
/* ====================================================================== */
/* == FIX DEFINITIVO PARA HEADER INTELIGENTE EN TODO EL SITIO == */
/* ====================================================================== */
/*
Esta regla asegura que CUALQUIER header en CUALQUIER página
tenga el comportamiento "sticky" (pegajoso e inteligente).
*/
.header {
position: -webkit-sticky; /* Para compatibilidad con Safari antiguo */
position: sticky;
top: 0;
z-index: 1050; /* Asegura que esté por encima del contenido */
transition: transform 0.3s ease-in-out; /* Mantenemos la animación suave */
}
/* ====================================================================== */
/* == FIX DEFINITIVO PARA HEADER INTELIGENTE EN TODO EL SITIO == */
/* ====================================================================== */
/*
Esta regla asegura que CUALQUIER header en CUALQUIER página
tenga el comportamiento "sticky" (pegajoso e inteligente).
*/
.header {
position: -webkit-sticky; /* Para compatibilidad con Safari antiguo */
position: sticky;
top: 0;
z-index: 1050; /* Asegura que esté por encima del contenido */
transition: transform 0.3s ease-in-out; /* Mantenemos la animación suave */
}
/* ====================================================================== */
/* == FIX DEFINITIVO PARA HEADER INTELIGENTE EN TODO EL SITIO == */
/* ====================================================================== */
/*
Esta regla asegura que CUALQUIER header en CUALQUIER página
tenga el comportamiento "sticky" (pegajoso e inteligente).
*/
.header {
position: -webkit-sticky; /* Para compatibilidad con Safari antiguo */
position: sticky;
top: 0;
z-index: 1050; /* Asegura que esté por encima del contenido */
transition: transform 0.3s ease-in-out; /* Mantenemos la animación suave */
}
/* ====================================================================== */
/* == FIX DEFINITIVO Y FORZADO PARA HEADER STICKY EN TODO EL SITIO == */
/* ====================================================================== */
/*
Esta regla es una orden, no una sugerencia. Asegura que CUALQUIER
elemento con la clase .header en CUALQUIER página se comporte
exactamente como en el index.html principal.
*/
.header {
position: -webkit-sticky !important; /* Para Safari */
position: sticky !important; /* Para todos los demás navegadores */
top: 0 !important; /* Pégate al borde superior */
z-index: 1050 !important; /* Asegúrate de estar por encima de todo */
}
/* ====================================================================== */
/* == AJUSTE PRO FINAL PARA CONTROLES DEL EXPLORADOR UF (v2) == */
/* ====================================================================== */
.monthly-explorer-controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.explorer-nav-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
width: 100%;
}
/* ====================================================================== */
/* == AJUSTE PRO FINAL PARA CONTROLES DEL EXPLORADOR UF == */
/* ====================================================================== */
.monthly-explorer-controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.explorer-nav-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
width: 100%;
}
/* ====================================================================== */
/* == AJUSTE PRO FINAL PARA CONTROLES DEL EXPLORADOR UF == */
/* ====================================================================== */
.monthly-explorer-controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.explorer-nav-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
width: 100%;
}
/* ====================================================================== */
/* == AJUSTE PRO FINAL PARA CONTROLES DEL EXPLORADOR UF == */
/* ====================================================================== */
.explorer-nav-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
width: 100%;
}
/* ====================================================================== */
/* == ESTILOS PRO PARA TARJETAS DE NOTICIAS (v1.0) == */
/* ====================================================================== */
.article-summary-card {
transition: background-color var(--transition-fast);
}
.article-summary-card:hover {
background-color: var(--hover-bg);
border-radius: var(--radius-md);
}
.article-summary-card .article-link {
display: flex;
flex-direction: column; /* Apilado en móvil por defecto */
gap: 1rem;
padding: 1rem;
text-decoration: none;
color: inherit;
}
.article-summary-card__image-container {
width: 100%;
flex-shrink: 0;
overflow: hidden;
border-radius: var(--radius-md);
background-color: var(--border-default);
aspect-ratio: 16 / 9; /* Proporción panorámica */
}
.article-summary-card__image-container img {
width: 100%;
height: 100%;
object-fit: cover; /* Asegura que la imagen cubra el contenedor sin deformarse */
transition: transform 0.3s ease-out;
}
.article-summary-card:hover .article-summary-card__image-container img {
transform: scale(1.05);
}
.article-summary-card__content {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.article-summary-card__content h3 {
font-size: 1.25rem;
color: var(--text-primary);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.article-summary-card__content p {
font-size: 1rem;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 1rem;
flex-grow: 1; /* Empuja los metadatos hacia abajo */
}
/* Media Query para pantallas más grandes (tablets y escritorio) */
@media (min-width: 768px) {
.article-summary-card .article-link {
flex-direction: row; /* Lado a lado en pantallas grandes */
align-items: flex-start;
}
.article-summary-card__image-container {
width: 200px; /* Ancho fijo para la imagen */
height: 112.5px; /* 200px * (9/16) */
}
}
/* ====================================================================== */
/* == ESTILOS PRO PARA TARJETAS DE NOTICIAS (v2.0 - Premium) == */
/* ====================================================================== */
.news-list-container {
display: grid;
grid-template-columns: 1fr; /* Una columna por defecto para móviles */
gap: 1.5rem;
}
.article-summary-card {
display: flex;
flex-direction: column; /* Apilado en móvil */
background-color: var(--widget-bg);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
overflow: hidden; /* Asegura que la imagen no se salga de los bordes redondeados */
text-decoration: none;
color: var(--text-primary);
box-shadow: 0 4px 6px hsla(0, 0%, 0%, 0.05);
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.article-summary-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px hsla(0, 0%, 0%, 0.1);
}
.article-summary-card__image {
width: 100%;
aspect-ratio: 16 / 9;
background-color: var(--hover-bg);
}
.article-summary-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-summary-card__content {
display: flex;
flex-direction: column;
padding: 1.25rem;
flex-grow: 1;
}
.article-summary-card__title {
font-size: 1.2rem;
font-weight: 600;
line-height: 1.4;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.article-summary-card__summary {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 1rem;
flex-grow: 1; /* Empuja los metadatos al final */
}
.article-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
font-size: 0.85rem;
color: var(--text-muted);
}
.article-meta span {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.article-meta i {
font-size: 0.9em;
}
/* Diseño para pantallas más grandes */
@media (min-width: 768px) {
.article-summary-card {
flex-direction: row; /* Lado a lado */
align-items: stretch;
}
.article-summary-card__image {
width: 220px;
aspect-ratio: auto;
flex-shrink: 0;
}
}
/* ====================================================================== */
/* == ESTILOS PRO PARA NOTICIAS (v3.0 - Premium Grid) == */
/* ====================================================================== */
.news-grid {
display: grid;
grid-template-columns: 1fr; /* 1 columna en móvil por defecto */
gap: 1.5rem;
}
.article-card {
display: flex;
flex-direction: column;
background-color: var(--widget-bg);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
overflow: hidden;
text-decoration: none;
color: var(--text-primary);
box-shadow: 0 4px 15px hsla(220, 20%, 50%, 0.05);
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
animation: fadeIn 0.6s ease-out both;
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px hsla(220, 20%, 50%, 0.1);
border-color: var(--x-blue);
}
.article-card__image {
width: 100%;
aspect-ratio: 16 / 9;
background-color: var(--hover-bg);
overflow: hidden;
}
.article-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease-out;
}
.article-card:hover .article-card__image img {
transform: scale(1.05);
}
.article-card__image--placeholder {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
.article-card__image--placeholder::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
content: '\f1ea'; /* Icono de periódico */
font-size: 2.5rem;
opacity: 0.5;
}
.article-card__content {
display: flex;
flex-direction: column;
padding: 1.25rem;
flex-grow: 1;
}
.article-card__category {
display: inline-block;
align-self: flex-start; /* Se alinea a la izquierda */
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0.25rem 0.75rem;
border-radius: var(--radius-full);
background-color: var(--x-blue-focus-ring);
color: var(--x-blue);
margin-bottom: 0.75rem;
}
.article-card__title {
font-size: 1.15rem;
font-weight: 600;
line-height: 1.4;
color: var(--text-primary);
margin: 0 0 0.5rem 0;
}
.article-card__summary {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 1rem 0;
flex-grow: 1;
}
.article-card__meta {
font-size: 0.85rem;
color: var(--text-muted);
border-top: 1px solid var(--border-default);
padding-top: 1rem;
margin-top: auto; /* Empuja este elemento al fondo de la tarjeta */
}
.article-card__meta span {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.article-card__meta i {
font-size: 0.9em;
}
/* Diseño de rejilla para pantallas más grandes */
@media (min-width: 768px) {
.news-grid {
grid-template-columns: repeat(2, 1fr); /* 2 columnas */
}
}
@media (min-width: 1024px) {
.news-grid {
gap: 2rem;
}
}
/* Animación de entrada */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
/* ====================================================================== */
/* == ESTILOS PRO PARA PAGINADOR INTELIGENTE (v1.0) == */
/* ====================================================================== */
/* Estilo para los puntos suspensivos "..." */
.pagination-ellipsis {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 0.5rem;
color: var(--text-secondary);
cursor: default; /* No es clickeable */
}
/* Mejora visual para los botones deshabilitados */
.pagination-link.is-disabled {
color: var(--text-muted);
background-color: var(--active-bg);
cursor: not-allowed;
border-color: transparent;
}
/* ====================================================================== */
/* == ESTILOS PARA ARTÍCULOS RELACIONADOS (v1.0) == */
/* ====================================================================== */
.related-articles-section {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--border-default);
}
.related-articles-section h4 {
font-size: 1.25rem;
margin-bottom: 1.5rem;
color: var(--text-secondary);
}
.related-articles-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.related-articles-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
.related-article-card {
display: block;
padding: 1rem 1.25rem;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
text-decoration: none;
background-color: var(--widget-bg);
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}
.related-article-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--x-blue);
}
.related-article-card__title {
font-weight: 600;
color: var(--text-primary);
line-height: 1.4;
}
.related-article-card:hover .related-article-card__title {
color: var(--x-blue);
}
/* ====================================================================== */
/* == FIX DEFINITIVO: ANULACIÓN DE ESTILOS DE ICONOS CONFLICTIVOS == */
/* ====================================================================== */
/* REGLA #1: Por defecto (móvil), forzamos que se vea el icono de flechas
circulares y se oculte el de flechas horizontales. */
.swap-btn .mobile-icon {
display: inline-block !important;
}
.swap-btn .desktop-icon {
display: none !important;
}
/* REGLA #2: Únicamente en pantallas de 768px o más, invertimos las reglas,
forzando que se vea el icono de escritorio. */
@media (min-width: 768px) {
.swap-btn .mobile-icon {
display: none !important;
}
.swap-btn .desktop-icon {
display: inline-block !important;
}
}
/* ====================================================================== */
/* == ESTILOS PARA EL BUSCADOR DE NOTICIAS (v1.0) == */
/* ====================================================================== */
.search-form-container {
position: relative;
width: 100%;
max-width: 300px;
}
#newsSearchInput {
padding-right: 2.5rem; /* Espacio para el botón de limpiar */
}
.clear-search-btn {
position: absolute;
top: 50%;
right: 0.5rem;
transform: translateY(-50%);
color: var(--text-muted);
}
.clear-search-btn:hover {
color: var(--text-primary);
}
.search-results-container {
padding: 1rem 0;
}
.search-results-title {
font-size: 1.1rem;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-default);
}
.search-result-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
margin: 0 -1rem;
border-radius: var(--radius-md);
text-decoration: none;
transition: background-color var(--transition-fast);
}
.search-result-item:hover {
background-color: var(--hover-bg);
text-decoration: none;
}
.search-result-item__icon {
font-size: 1rem;
color: var(--x-blue);
}
.search-result-item__title {
font-size: 1rem;
font-weight: 500;
color: var(--text-primary);
line-height: 1.5;
}
.no-results-message {
text-align: center;
color: var(--text-secondary);
padding: 2rem 1rem;
font-style: italic;
}
/* ====================================================================== */
/* == FIX: DESACTIVAR EFECTO DE CLICK EN BOTÓN LIMPIAR BÚSQUEDA == */
/* ====================================================================== */
/* Anulamos el efecto de escala y cambio de fondo SÓLO para el botón
de limpiar la búsqueda cuando está siendo presionado (activo). */
#newsSearchClear:active {
transform: none !important;
background-color: transparent !important;
}
/* ====================================================================== */
/* == ESTILOS PARA EL BUSCADOR DE NOTICIAS (v1.0) == */
/* ====================================================================== */
.search-form-container {
position: relative;
width: 100%;
max-width: 300px;
}
#newsSearchInput {
padding-right: 2.5rem; /* Espacio para el botón de limpiar */
}
.clear-search-btn {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
color: var(--text-muted);
width: 42px; /* Mismo alto que el input */
height: 42px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: none;
border: none;
border-radius: 50%;
}
.clear-search-btn:hover {
color: var(--text-primary);
}
.clear-search-btn[hidden] {
display: none;
}
.search-results-container {
padding: 1rem 0;
}
.search-results-title {
font-size: 1.1rem;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-default);
}
.search-result-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
margin: 0 -1rem;
border-radius: var(--radius-md);
text-decoration: none;
transition: background-color var(--transition-fast);
}
.search-result-item:hover {
background-color: var(--hover-bg);
text-decoration: none;
}
.search-result-item__icon {
font-size: 1rem;
color: var(--x-blue);
}
.search-result-item__title {
font-size: 1rem;
font-weight: 500;
color: var(--text-primary);
line-height: 1.5;
}
.no-results-message {
text-align: center;
color: var(--text-secondary);
padding: 2rem 1rem;
font-style: italic;
}
/* ====================================================================== */
/* == SPINNER DE CARGA PRO (ANTI-CONGELAMIENTO) == */
/* ====================================================================== */
.pro-spinner {
display: flex;
justify-content: center;
align-items: center;
padding: 4rem 1rem;
}
.pro-spinner .dot {
width: 10px;
height: 10px;
margin: 0 5px;
background-color: var(--text-muted);
border-radius: 50%;
animation: pro-spinner-bounce 1.4s infinite ease-in-out both;
}
.pro-spinner .dot:nth-child(1) {
animation-delay: -0.32s;
}
.pro-spinner .dot:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes pro-spinner-bounce {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1.0);
}
}
/* ====================================================================== */
/* == CARGA DE IMÁGENES PRO (PLACEHOLDER + BLUR-UP) == */
/* ====================================================================== */
.article-card__image {
position: relative; /* Clave para posicionar el spinner y la imagen final */
overflow: hidden;
background-color: var(--hover-bg);
}
/* El placeholder borroso */
.article-card__image .blurry-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(10px); /* El efecto de desenfoque */
transform: scale(1.1); /* Ligeramente más grande para que el blur no deje bordes */
}
/* La imagen real, que empieza invisible */
.article-card__image img.final-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
/* Cuando la imagen real ha cargado, se hace visible */
.article-card__image img.final-image.loaded {
opacity: 1;
}
/* Spinner de carga para la imagen */
.article-card__image .spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
border: 3px solid hsla(0, 0%, 100%, 0.2);
border-top-color: var(--x-blue);
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 2;
opacity: 1;
transition: opacity 0.3s ease-out;
}
.article-card__image .spinner.hidden {
opacity: 0;
}
@keyframes spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* ====================================================================== */
/* == TEMA OSCURO PERSONALIZADO PARA FLATPICKR (ARREGLO FINAL) == */
/* ====================================================================== */
body.dark .flatpickr-calendar {
background: hsl(210, 6%, 10%); /* Un gris oscuro, no negro puro */
border-color: var(--border-dark);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
body.dark .flatpickr-months .flatpickr-month,
body.dark .flatpickr-current-month input.cur-year,
body.dark .flatpickr-weekday,
body.dark .flatpickr-day {
color: var(--text-primary-dark) !important;
}
body.dark .flatpickr-months .flatpickr-prev-month svg,
body.dark .flatpickr-months .flatpickr-next-month svg {
fill: var(--text-secondary-dark) !important;
}
body.dark .flatpickr-months .flatpickr-prev-month:hover,
body.dark .flatpickr-months .flatpickr-next-month:hover {
background: var(--hover-bg-dark);
}
body.dark .flatpickr-months .flatpickr-prev-month:hover svg,
body.dark .flatpickr-months .flatpickr-next-month:hover svg {
fill: var(--x-blue) !important;
}
body.dark .flatpickr-weekdaycontainer {
border-bottom-color: var(--border-dark);
}
body.dark span.flatpickr-weekday {
color: var(--text-secondary-dark);
}
body.dark .flatpickr-day:hover {
background: var(--hover-bg-dark);
}
body.dark .flatpickr-day.selected,
body.dark .flatpickr-day.startRange,
body.dark .flatpickr-day.endRange {
background: var(--x-blue);
border-color: var(--x-blue);
color: #ffffff !important;
}
body.dark .flatpickr-day.today {
border-color: var(--x-blue);
}
body.dark .flatpickr-day.today:not(.selected) {
color: var(--x-blue) !important;
}
body.dark .flatpickr-day.today:not(.selected):hover {
background: hsla(195, 100%, 50%, 0.1);
border-color: var(--x-blue);
}
body.dark .flatpickr-day.disabled,
body.dark .flatpickr-day.prevMonthDay,
body.dark .flatpickr-day.nextMonthDay {
color: var(--text-muted-dark) !important;
opacity: 0.5;
}
body.dark .numInputWrapper span.arrowUp:after {
border-bottom-color: var(--text-secondary-dark);
}
body.dark .numInputWrapper span.arrowDown:after {
border-top-color: var(--text-secondary-dark);
}
/* ====================================================================== */
/* == FIX DEFINITIVO PARA SELECTOR DE MES EN MODO OSCURO == */
/* ====================================================================== */
body.dark .flatpickr-monthDropdown-months {
background: hsl(210, 6%, 15%) !important; /* Fondo oscuro */
border: 1px solid var(--border-dark) !important;
}
body.dark .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
color: var(--text-primary-dark) !important; /* Texto claro */
background: transparent !important;
}
body.dark .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:hover {
background: var(--hover-bg-dark) !important; /* Fondo al pasar el mouse */
}
/* ====================================================================== */
/* == MEJORA UX: BOTÓN DE COPIAR EN INPUT (v1.0) == */
/* ====================================================================== */
/* 1. Contenedor del input que ahora tiene un botón */
.input-group--with-action {
position: relative;
}
/* 2. Estilos para el nuevo botón de acción dentro del input */
.input-action-btn {
position: absolute;
top: 50%;
right: 8px; /* Un pequeño espacio desde el borde derecho */
transform: translateY(-50%);
width: 38px; /* Un poco más pequeño para que quepa cómodamente */
height: 38px;
color: var(--text-muted); /* Color sutil por defecto */
background-color: transparent;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.input-action-btn:hover {
color: var(--text-primary);
background-color: var(--active-bg);
}
.input-action-btn:active {
transform: translateY(-50%) scale(0.9); /* Efecto de clic */
}
/* 3. Ajuste para que el texto del input no se escriba debajo del botón */
.input-group--with-action .input-group__control {
padding-right: 50px !important; /* Aumentamos el padding derecho */
}
/* 4. Mejora visual para los inputs deshabilitados, para que no parezcan rotos */
.input-group__control:disabled {
background-color: var(--hover-bg) !important; /* Fondo ligeramente diferente */
color: var(--text-primary) !important; /* Mantenemos el texto legible */
opacity: 0.8; /* Un poco de opacidad para indicar que está inactivo */
cursor: default; /* Cambia el cursor para indicar que no es editable */
}
/* ====================================================================== */
/* == FIX: CORRECCIÓN DE EFECTO DE CLIC EN BOTÓN DE COPIAR (v1.1) == */
/* ====================================================================== */
.input-action-btn:active {
/* Combina ambas transformaciones para evitar el salto vertical */
transform: translateY(-50%) scale(0.9);
}
/* ====================================================================== */
/* == FIX: ANULACIÓN DE EFECTO DE CLIC EN BOTÓN DE COPIAR (v1.2) == */
/* ====================================================================== */
.input-action-btn:active {
/* Anulamos cualquier efecto de escala y forzamos el centrado vertical */
transform: translateY(-50%) scale(1) !important;
}
/* ====================================================================== */
/* == AJUSTE UX: BOTÓN DE COPIA EN SNIPPET (v1.0) == */
/* ====================================================================== */
.converter-display-value-container {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem; /* Espacio entre el valor y el botón */
position: relative;
}
#copyBtn {
/* Estilo estandarizado con otros botones de icono */
width: 44px;
height: 44px;
border-radius: 50%;
color: var(--text-muted);
transition: all var(--transition-fast);
/* Quitamos el posicionamiento absoluto que ya no es necesario */
}
#copyBtn:hover {
color: var(--text-primary);
background-color: var(--hover-bg);
}
#copyBtn i {
font-size: 1.2rem;
}
@media (max-width: 480px) {
.converter-display-value-container {
flex-direction: column;
gap: 0.5rem;
}
#copyBtn {
width: 40px;
height: 40px;
}
#copyBtn i {
font-size: 1.1rem;
}
}
/* === FIX: HACER BOTÓN DE ELIMINAR PERFECTAMENTE REDONDO === */
.multi-table .remove-btn {
padding: 0;
width: 38px;
height: 38px;
flex-shrink: 0;
}
/* ====================================================================== */
/* == FIX FANTASMA: ESTILO PARA EL OVERLAY DE FEEDBACK (v2.0) == */
/* ====================================================================== */
.copy-feedback-overlay {
position: fixed; /* Posición relativa a la ventana */
display: flex;
align-items: center;
justify-content: center;
color: var(--x-success-text);
background-color: hsla(145, 63%, 42%, 0.15);
border: 1px solid hsla(145, 63%, 42%, 0.3);
z-index: 9999;
pointer-events: none; /* No puede ser clickeado */
font-size: 1.2rem;
animation: pop-in-fade-out 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes pop-in-fade-out {
0% {
transform: scale(0.8);
opacity: 0;
}
20% {
transform: scale(1);
opacity: 1;
}
80% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0;
}
}
/* === INICIO: AJUSTE TAMAÑO ÍCONO BASURERO (GEMINI) === */
.multi-table .action-cell .remove-btn {
width: 28px;
height: 28px;
}
.multi-table .action-cell .remove-btn i {
font-size: 0.8rem;
}
/* === FIN: AJUSTE TAMAÑO ÍCONO BASURERO (GEMINI) === */
/* === INICIO: ESTILO BOTÓN ELIMINAR (GEMINI) === */
.multi-table .action-cell .remove-btn {
width: 32px; /* Tamaño ajustado para que no sea tan grande */
height: 32px;
border-radius: 50%; /* Círculo perfecto */
color: var(--danger-text) !important; /* Hereda el color rojo del tema */
border: 1px solid var(--danger-border) !important; /* Borde rojo sutil */
transition: all 0.15s ease-out;
}
.multi-table .action-cell .remove-btn i {
font-size: 0.85rem; /* El ícono de adentro un poco más pequeño */
}
.multi-table .action-cell .remove-btn:hover:not(:disabled) {
background-color: var(--danger-hover-bg) !important; /* Fondo rojo suave al pasar el mouse */
color: var(--x-red) !important; /* Color más intenso */
transform: scale(1.1); /* Efecto sutil de crecimiento */
}
.multi-table .action-cell .remove-btn:active:not(:disabled) {
transform: scale(0.95); /* Efecto de clic */
}
/* === FIN: ESTILO BOTÓN ELIMINAR (GEMINI) === */
/* === INICIO: ESTILO BOTÓN ELIMINAR v2 (SIN ESCALA) (GEMINI) === */
.multi-table .action-cell .remove-btn {
width: 28px; /* Un poco más pequeño */
height: 28px;
border-radius: 50%;
color: var(--danger-text) !important;
border: 1px solid var(--danger-border) !important;
transition: background-color 0.15s ease-out, color 0.15s ease-out; /* Transición más simple */
}
.multi-table .action-cell .remove-btn i {
font-size: 0.8rem; /* Ícono también más pequeño */
}
.multi-table .action-cell .remove-btn:hover:not(:disabled) {
background-color: var(--danger-hover-bg) !important;
color: var(--x-red) !important;
transform: none; /* ANULAMOS cualquier efecto de escala */
}
.multi-table .action-cell .remove-btn:active:not(:disabled) {
transform: scale(0.95); /* Mantenemos un pequeño efecto de clic que no afecta el layout */
}
/* === FIN: ESTILO BOTÓN ELIMINAR (GEMINI) === */
/* === INICIO: AJUSTE POSICIÓN BOTÓN ELIMINAR (GEMINI) === */
.multi-table .action-cell {
padding-right: 8px; /* Añade un pequeño espacio a la derecha de la celda */
}
/* === FIN: AJUSTE POSICIÓN BOTÓN ELIMINAR (GEMINI) === */
/* === INICIO: ESTILO FEEDBACK DE COPIADO (GEMINI) === */
.btn.copy-success, .btn.copy-success:hover {
color: var(--x-success-text) !important; /* Color del texto verde */
background-color: hsla(145, 63%, 42%, 0.1) !important; /* Fondo verde muy sutil */
transform: scale(1.05); /* Un pequeño pulso para enfatizar */
}
/* === FIN: ESTILO FEEDBACK DE COPIADO (GEMINI) === */
/* === INICIO: FIX SALTO BOTÓN COPIAR (GEMINI) === */
.input-action-btn.copy-success,
.input-action-btn.copy-success:hover {
transform: translateY(-50%) scale(1); /* Anulamos el scale y forzamos el centrado */
background-color: hsla(145, 63%, 42%, 0.15) !important; /* Hacemos el fondo más visible */
}
/* === FIN: FIX SALTO BOTÓN COPIAR (GEMINI) === */
/* === INICIO: ESTILO BOTÓN ELIMINAR MEJORADO (GEMINI) === */
.multi-table .action-cell {
padding-right: 8px; /* Añade espacio para que el botón no se pegue al borde */
}
.multi-table .action-cell .remove-btn {
width: 28px;
height: 28px;
border-radius: 50%;
color: var(--danger-text) !important;
border: 1px solid var(--danger-border) !important;
transition: background-color 0.15s ease-out, color 0.15s ease-out, transform 0.1s ease-out;
}
.multi-table .action-cell .remove-btn i {
font-size: 0.8rem;
}
.multi-table .action-cell .remove-btn:hover:not(:disabled) {
background-color: var(--danger-hover-bg) !important;
color: var(--x-red) !important;
transform: none; /* Evita que crezca y cause problemas de layout */
}
.multi-table .action-cell .remove-btn:active:not(:disabled) {
transform: scale(0.9); /* Un pequeño efecto de clic que no molesta */
}
/* === FIN: ESTILO BOTÓN ELIMINAR (GEMINI) === */
/* ====================================================================== */
/* == INDICADOR DE VARIACIÓN DIARIA (v1.0) == */
/* ====================================================================== */
.daily-variation-indicator {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
font-variant-numeric: tabular-nums; /* Evita que los números "bailen" */
white-space: nowrap;
flex-shrink: 0; /* Impide que se encoja si el espacio es reducido */
/* Oculto por defecto con una transición suave */
opacity: 0;
visibility: hidden;
transform: translateY(3px);
transition: opacity 0.2s ease-out, visibility 0s 0.2s linear, transform 0.2s ease-out;
}
.daily-variation-indicator.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
.daily-variation-indicator.positive {
color: var(--success-text);
}
.daily-variation-indicator.negative {
color: var(--danger-text);
}
/* ====================================================================== */
/* == ESTILOS PARA SELECTOR DE MONEDA (CLP/USD) (v1.0) == */
/* ====================================================================== */
.currency-selector-container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-6);
padding: var(--space-4);
background-color: var(--hover-bg);
border-radius: var(--radius-md);
}
.currency-selector-container .form-label {
margin-bottom: 0;
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
}
.currency-selector-buttons {
display: inline-flex;
background-color: var(--active-bg);
border-radius: var(--radius-full);
padding: var(--space-1);
border: 1px solid var(--border-default);
}
.btn-currency {
padding: var(--space-2) var(--space-5);
font-size: var(--text-md);
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
background-color: transparent;
border: none;
border-radius: var(--radius-full);
transition: all var(--transition-fast);
min-height: 38px;
box-shadow: none;
}
.btn-currency:hover:not(.active) {
color: var(--text-primary);
}
.btn-currency.active {
color: var(--x-blue);
background-color: var(--widget-bg);
font-weight: var(--font-weight-bold);
box-shadow: var(--shadow-sm);
}
.currency-rate-note {
font-size: var(--text-sm);
color: var(--text-muted);
transition: opacity 0.3s ease-out;
}
/* ====================================================================== */
/* == ESTILOS REFINADOS PARA BARRA DE FECHA (v2.2 - Diseño Pro) == */
/* ====================================================================== */
.date-selector-bar {
display: flex;
justify-content: space-between; /* Alinea los elementos a los extremos */
align-items: center;
gap: var(--space-4);
padding: var(--space-3) var(--space-4) !important;
border-bottom: 1px solid var(--border-default);
margin-bottom: var(--space-6); /* Más espacio inferior */
}
.date-display-container-multi {
display: flex;
flex-direction: column;
align-items: flex-start; /* Alinea a la izquierda */
justify-content: center;
flex-grow: 1;
text-align: left;
}
.date-display-container-multi .main-text {
font-size: var(--text-md);
color: var(--text-primary); /* Texto principal más oscuro */
font-weight: 500;
line-height: 1.3;
}
.date-display-container-multi .main-text strong {
font-weight: 700; /* "hoy" en negrita */
}
.date-display-container-multi .sub-text {
font-size: var(--text-sm);
color: var(--text-secondary); /* Un poco más de contraste */
line-height: 1.3;
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.date-selector-bar .date-picker-toggle {
flex-shrink: 0;
width: 44px; /* Botón más grande */
height: 44px;
background-color: var(--hover-bg); /* Fondo sutil */
border: 1px solid var(--border-default);
border-radius: var(--radius-md); /* Bordes consistentes */
}
.date-selector-bar .date-picker-toggle:hover {
border-color: var(--x-blue);
}
/* ====================================================================== */
/* == ESTILOS PARA INSTRUCCIÓN DE PEGADO NATIVO (RESTAURADO) == */
/* ====================================================================== */
.paste-instruction {
text-align: center;
font-size: var(--text-sm);
color: var(--text-muted);
font-style: italic;
margin: 0 auto var(--space-5) auto;
max-width: 55ch;
line-height: 1.5;
}
/* ====================================================================== */
/* == FIX: OCULTAR SELECTOR DE MONEDA DONDE NO CORRESPONDE (v2.0) == */
/* ====================================================================== */
#multi .currency-selector-container {
display: none !important;
}
/* ====================================================================== */
/* == FIX: OCULTAR SCROLLBAR DURANTE PRELOADER (v1.0) == */
/* ====================================================================== */
body.loading-active {
overflow: hidden;
}
/* ====================================================================== */
/* == ESTILOS PARA TARJETA DE RESULTADOS ENRIQUECIDA (Ajuste por UF) == */
/* ====================================================================== */
.result-card__detail small.text-muted {
display: block; /* Hace que el texto pequeño aparezca en una nueva línea */
margin-left: 0;
margin-top: var(--space-1);
font-size: 0.85em;
}
.result-card__separator {
margin: var(--space-3) 0;
border-color: var(--border-default);
}
/* ====================================================================== */
/* == ESTILOS PARA ZONA DE DRAG & DROP (v1.0) == */
/* ====================================================================== */
.widget.drop-zone {
position: relative; /* Necesario para el pseudo-elemento ::before */
transition: background-color var(--transition-fast);
}
.widget.drop-zone::before {
content: 'Arrastra y suelta tu archivo aquí (.txt, .csv)';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 600;
color: var(--x-blue);
background-color: hsla(210, 50%, 50%, 0.1); /* Fondo semi-transparente */
border: 2px dashed var(--x-blue);
border-radius: var(--radius-lg);
z-index: 10; /* Por encima del contenido del widget */
/* Efecto de entrada y salida */
opacity: 0;
visibility: hidden;
pointer-events: none; /* No interfiere con el mouse */
transform: scale(0.95);
transition: opacity 0.2s ease-out, visibility 0s 0.2s linear, transform 0.2s ease-out;
}
/* Estado activo cuando se arrastra un archivo sobre la zona */
.widget.drag-over::before {
opacity: 1;
visibility: visible;
transform: scale(1);
transition-delay: 0s;
}
/* ====================================================================== */
/* == ESTILOS PARA SELECCIÓN MÚLTIPLE EN TABLAS (v1.0) == */
/* ====================================================================== */
/* 1. Estilos para la celda del checkbox */
.checkbox-cell {
width: 1%; /* Ocupa el mínimo espacio posible */
padding-left: var(--space-4) !important;
padding-right: var(--space-2) !important;
text-align: center;
}
/* 2. Estilos para los inputs de tipo checkbox */
.checkbox-cell input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--x-blue); /* Da color al check sin cambiar el fondo */
background-color: var(--hover-bg);
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
vertical-align: middle;
}
/* 3. Estilo para las filas seleccionadas */
.data-table tbody tr.selected-row {
background-color: hsla(195, 100%, 50%, 0.1); /* Fondo azulado sutil */
}
.data-table tbody tr.selected-row:hover {
background-color: hsla(195, 100%, 50%, 0.15); /* Un poco más oscuro al pasar el mouse */
}
/* 4. Estilos para el botón "Eliminar Seleccionadas" */
/* El botón ya hereda los estilos de .btn-danger, solo ajustamos el espaciado del ícono */
#deleteSelected i,
#deleteSelectedClpToUf i {
margin-right: var(--space-2);
}
/* ====================================================================== */
/* == AJUSTE LAYOUT BOTONES DE FOOTER WIDGET (v1.0) == */
/* ====================================================================== */
.widget-footer {
display: flex;
justify-content: space-between; /* Alinea los grupos a los extremos */
align-items: center;
flex-wrap: wrap; /* Permite que se apilen en pantallas pequeñas */
gap: 1rem;
}
.footer-actions-main,
.footer-actions-destructive {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.footer-actions-main {
justify-content: flex-start; /* Se alinea a la izquierda */
}
.footer-actions-destructive {
justify-content: flex-end; /* Se alinea a la derecha */
}
/* Consistencia para el botón Limpiar */
#clearMulti,
#clearMultiClpToUf {
padding-left: 1rem;
padding-right: 1rem;
}
#clearMulti i,
#clearMultiClpToUf i {
margin-right: var(--space-2);
}
/* ====================================================================== */
/* == CONSISTENCIA BOTONES DESTRUCTIVOS (v1.0) == */
/* ====================================================================== */
.footer-actions-destructive .btn-danger {
padding-left: 1rem;
padding-right: 1rem;
min-width: 140px; /* Ancho mínimo para consistencia */
justify-content: center;
}
.footer-actions-destructive .btn-danger i {
margin-right: var(--space-2);
}
/* ====================================================================== */
/* == AJUSTE ALINEACIÓN TABLAS MÚLTIPLES (v1.1) == */
/* ====================================================================== */
/* Alinea los títulos de columna con su contenido */
.multi-table thead th:nth-child(2) { /* Título de la columna de ENTRADA */
text-align: left;
padding-left: 1rem;
}
.multi-table thead th:nth-child(3) { /* Título de la columna de RESULTADO */
text-align: right;
padding-right: 1rem;
}
/* Asegura que la celda del input ocupe el espacio */
.multi-table tbody td:nth-child(2) {
width: 60%; /* Da más peso a la columna de entrada */
}
/* ====================================================================== */
/* == FIX ALINEACIÓN TABLAS MÚLTIPLES (v2.0 - Definitivo) == */
/* ====================================================================== */
/* 1. Alineación de los Títulos */
.multi-table thead th:nth-child(2) {
text-align: left;
padding-left: 1rem;
}
.multi-table thead th:nth-child(3) {
text-align: right;
padding-right: 1rem;
}
/* 2. Ancho de las columnas del cuerpo para que coincidan */
.multi-table tbody td:nth-child(2) {
width: 50%; /* Columna de entrada */
}
.multi-table tbody td:nth-child(3) {
width: auto; /* Columna de resultado se ajusta */
}
/* 3. Alineación de la celda del Total */
.multi-table .total-cell {
text-align: right !important;
/* Empuja el texto para alinearlo con la columna de resultado */
padding-right: calc(28px + var(--space-3) + 8px) !important;
}
/* ====================================================================== */
/* == ESTILOS PARA HINT DE DRAG & DROP (v1.0) == */
/* ====================================================================== */
.drag-drop-hint {
text-align: center;
font-size: var(--text-sm);
color: var(--text-muted);
margin-top: -0.75rem; /* Lo acerca un poco al texto de arriba */
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.drag-drop-hint i {
color: var(--text-secondary);
}
/* ====================================================================== */
/* == FIX DEFINITIVO PARA MODO INMERSIVO (v1.0) == */
/* ====================================================================== */
body.immersive-mode .header {
position: static !important; /* Anula el sticky y lo vuelve un elemento normal */
}