/* ============================================ */
/* main.css - Variables, Reset, Cabecera, Nav, Layout, Pie */
/* ============================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --color-fondo: #1e293b;
    --color-superficie: #1e293b;
    --color-tarjeta: #f8fafc;
    --color-blanco: #ffffff;
    --color-texto: #1e293b;
    --color-texto-claro: #334155;
    --color-texto-muted: #94a3b8;
    --color-acento: #3b82f6;
    --color-acento-hover: #60a5fa;
    --color-acento-suave: rgba(59,130,246,0.12);
    --color-borde: #e2e8f0;
    --color-sombra: rgba(0,0,0,0.06);
    --color-sombra-hover: rgba(0,0,0,0.12);
    --radio-borde: 14px;
    --radio-borde-grande: 18px;
    --transicion: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --altura-cabecera: 60px;
    --altura-nav: 48px;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--fuente);
    background: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-top: calc(var(--altura-cabecera) + var(--altura-nav));
    min-height: 100vh;
}

/* Cabecera */
.cabecera {
    position: fixed; top: 0; left: 0; width: 100%;
    background: var(--color-superficie);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    z-index: 1000; height: var(--altura-cabecera);
}
.cabecera-contenido {
    max-width: 1400px; margin: 0 auto; padding: 0 24px;
    height: 100%; display: flex; justify-content: space-between; align-items: center;
}
.logo {
    display: flex; align-items: center; gap: 8px;
    font-size: 1.3rem; font-weight: 700; color: var(--color-blanco);
    cursor: pointer; user-select: none;
}
.btn-agendar {
    background: var(--color-acento); color: var(--color-blanco);
    border: none; padding: 10px 20px; border-radius: 50px;
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: var(--transicion); white-space: nowrap;
}
.btn-agendar:hover { background: var(--color-acento-hover); transform: translateY(-1px); }

/* Barra de navegación */
.barra-navegacion {
    position: fixed; top: var(--altura-cabecera); left: 0; width: 100%;
    background: var(--color-superficie);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; justify-content: center; gap: 4px;
    height: var(--altura-nav); z-index: 999;
}
.nav-item {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 20px; border-radius: 8px; cursor: pointer;
    font-size: 0.88rem; font-weight: 500; color: var(--color-texto-muted);
    transition: var(--transicion); user-select: none;
    border-bottom: 2px solid transparent;
}
.nav-item:hover { color: var(--color-blanco); background: rgba(255,255,255,0.04); }
.nav-item.activo {
    color: var(--color-acento); border-bottom-color: var(--color-acento);
    background: rgba(59,130,246,0.08);
}
.nav-item span { font-size: 1.1rem; }

/* Layout 3 Columnas */
.layout-3columnas {
    display: grid; grid-template-columns: 280px 1fr 300px; gap: 20px;
    max-width: 1400px; margin: 0 auto; padding: 20px 24px;
    height: calc(100vh - var(--altura-cabecera) - var(--altura-nav) - 52px);
    overflow: hidden;
}
.columna-izquierda, .columna-derecha { overflow-y: auto; height: 100%; padding-right: 4px; }
.columna-central { overflow-y: auto; height: 100%; padding: 0 4px; }

.columna-izquierda::-webkit-scrollbar,
.columna-central::-webkit-scrollbar,
.columna-derecha::-webkit-scrollbar { width: 5px; }
.columna-izquierda::-webkit-scrollbar-thumb,
.columna-central::-webkit-scrollbar-thumb,
.columna-derecha::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }

/* Pie de página */
.pie-pagina {
    text-align: center; padding: 14px 16px;
    color: var(--color-texto-muted); font-size: 0.78rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: var(--color-superficie);
}
.pie-pagina p { margin: 2px 0; }

/* Texto para secciones */
.titulo-seccion,
.subtitulo-seccion,
.calculadora-card h3,
.calculadora-card p,
.cat-card h3,
.cat-card p,
.descarga-card h3,
.descarga-card p {
    color: var(--color-blanco);