/* =========================================
   TEMA: Colores base + Normalizacin + Tipografa
   Ubicacin: src/css/tema.css
   Propsito: Tokens de color base (CSS custom properties),
   reset universal, estilos base de elementos HTML y
   tipografa semntica. Los valores de los ejes de apariencia
   (trazo, espaciado, tamano, radio, fuente, grosor, transicion
   y sombras) los definen las secciones de personalizacion.css.
   ========================================= */

/* CAPA 1  TOKENS DE DISEO (CSS Custom Properties) */

:root {
    --fondo-pantalla: #f8fafc;
    --fondo-elemento: #ffffff;
    --fondo-alterno: #f1f5f9;
    --fondo-flotante: #ffffff;
    --fondo-textura: none;

    --texto-fuerte: #0f172a;
    --texto-base: #334155;
    --texto-suave: #64748b;
    --texto-invertido: #ffffff;

    --trazo-suave: #e2e8f0;
    --trazo-fuerte: #cbd5e1;
    --trazo-enfoque: #a5b4fc;

    --color-marca: #4f46e5;
    --color-marca-hover: #4338ca;
    --color-marca-claro: #eef2ff;
    --color-exito: #059669;
    --color-advertencia: #d97706;
    --color-peligro: #dc2626;
    --color-info: #2563eb;
}

/* CAPA 2  TEMA OSCURO (prefers-color-scheme) */

@media (prefers-color-scheme: dark) {
    :root {
        --texto-fuerte: #e8e8e8;
        --texto-base: #b0b0b0;
        --texto-suave: #808080;
        --texto-invertido: #121212;

        --trazo-suave: #2a2a2a;
        --trazo-fuerte: #404040;
        --trazo-enfoque: #818cf8;

        --color-marca: #818cf8;
        --color-marca-hover: #a5b4fc;
        --color-marca-claro: #1e1b4b;
    }
}

/* CAPA 4  RESET UNIVERSAL */

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

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100dvh;
    overflow-x: hidden;
    background-color: var(--fondo-pantalla);
    background-image: var(--fondo-textura, none);
    background-attachment: fixed;
    color: var(--texto-base);
    font-family: var(--fuente-base, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    font-size: var(--tamano-base, 1rem);
    font-weight: var(--grosor-base, 400);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg,
iframe {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    color: inherit;
    background: transparent;
    border: none;
}

/* CAPA 5  TIPOGRAFA SEMNTICA */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fuente-titulos);
    color: var(--texto-fuerte);
    font-weight: var(--grosor-negrita);
    line-height: 1.3;
    margin-bottom: var(--espacio-pequeno);
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(var(--tamano-3xl), 4vw, var(--tamano-4xl)); }
h2 { font-size: clamp(var(--tamano-xl), 3vw, var(--tamano-3xl)); }
h3 { font-size: clamp(var(--tamano-xl), 2.5vw, var(--tamano-3xl)); }
h4 { font-size: clamp(var(--tamano-lg), 2vw, var(--tamano-2xl)); }

p {
    margin-bottom: var(--espacio-normal);
}

a {
    color: var(--color-marca);
    text-decoration: none;
    transition: color var(--transicion-base);
}

a:hover {
    color: var(--color-marca-hover);
    text-decoration: underline;
}

strong,
b {
    color: var(--texto-fuerte);
    font-weight: var(--grosor-negrita);
}

em,
i {
    font-style: italic;
}

small {
    font-size: var(--tamano-sm);
    color: var(--texto-suave);
}

hr {
    border: 0;
    border-top: var(--grosor-trazo) solid var(--trazo-suave);
    margin: var(--espacio-grande) 0;
}

/* Cdigo */
code,
kbd,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9em;
    background-color: var(--fondo-alterno);
    color: var(--color-marca);
    padding: 0.2em 0.4em;
    border-radius: var(--radio-redondeado);
}

pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9em;
    display: block;
    background-color: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    padding: var(--espacio-normal);
    border-radius: var(--radio-redondeado);
    overflow-x: auto;
    margin-bottom: var(--espacio-normal);
    color: var(--texto-base);
}

pre code {
    background: none;
    padding: 0;
    border-radius: var(--radio-cuadrado);
}

/* Listas */
ul,
ol {
    margin-bottom: var(--espacio-normal);
    padding-left: var(--espacio-grande);
    color: var(--texto-base);
}

ul { list-style-type: disc; }
ol { list-style-type: decimal; }

/* Navegacin  quitar estilos de lista por defecto */
nav ul,
nav ol {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

li {
    margin-bottom: var(--espacio-minimo);
}

/* Citas */
blockquote {
    border-left: calc(var(--grosor-trazo) * 4) solid var(--color-marca);
    padding: var(--espacio-normal) var(--espacio-mediano);
    margin: var(--espacio-normal) 0;
    background-color: var(--fondo-alterno);
    border-radius: 0 var(--radio-redondeado) var(--radio-redondeado) 0;
    font-style: italic;
    color: var(--texto-fuerte);
}

/* CAPA 6  UTILIDADES TIPOGRFICAS (clases) */

.texto-gigante {
    font-size: var(--tamano-4xl);
    font-weight: var(--grosor-extranegrita);
    line-height: 1.1;
}


/* Adaptacion por cliente */
.touch-device .barra-lateral-enlace:hover { background: transparent; }
.touch-device .tarjeta:hover, .touch-device article:hover { transform: none; box-shadow: var(--sombra-suave); }
.slow-conexion *, .slow-conexion *::before, .slow-conexion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
.offline .barra-lateral-pie::before { content: 'Sin conexion'; display: block; text-align: center; font-size: var(--tamano-xs); color: var(--color-peligro); padding: var(--espacio-pequeno); }