/* Reset básico y box-sizing */
:root {
    --bg: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    --surface: #f8fafc;
    --accent: #2563eb;
    --radius: 8px;
    --gap: 1rem;
    --max-width: 1100px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* HTML / body básicos */
html, body {
    height: 100%;
}

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    line-height: 1.4;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;

    /* Contenido alineado y centrado en columna */
    display: flex;
    flex-direction: column;
    align-items: center;      /* centrar horizontalmente */
    justify-content: center;  /* centrar verticalmente */
    gap: var(--gap);
    padding: 1.25rem;
}

/* Contenedor principal con ancho máximo y centrado */
.container {
    width: min(var(--max-width), 100%);
    display: flex;
    flex-direction: column; /* columna */
    align-items: center;    /* contenido centrado en eje transversal */
    justify-content: center;/* centrado en eje principal si aplica */
    gap: var(--gap);
}

/* Tipos y elementos comunes */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: inherit;
    line-height: 1.2;
}

p {
    color: var(--muted);
    margin: 0;
}

/* Formularios y accesibilidad */
input, textarea, select, button {
    font: inherit;
    color: inherit;
    background: transparent;
    outline: none;
}

button {
    cursor: pointer;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Imágenes y tablas responsivas */
img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* Focus visible para accesibilidad */
:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent);
    outline-offset: 2px;
    border-radius: calc(var(--radius) / 2);
}

/* Modo oscuro automático */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b1220;
        --text: #e6eef8;
        --muted: #9aa6b2;
        --surface: #071023;
        --accent: #60a5fa;
    }

    body {
        background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent), var(--bg);
    }

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

/* Clase utilitaria para centrar en columna dentro de cualquier bloque */
.center-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
}

/* Pequeños atajos responsive */
@media (max-width: 480px) {
    :root { --gap: 0.75rem; font-size: 15px; }
    body { padding: 0.75rem; }
}


#btn{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(37, 99, 235, 0.8));
    border: none;
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    color: var(--text);
    font-weight: bold;
}