/* Estilos base de todas las zonas. Solo consumen variables de tokens.css. */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente-base);
    font-size: var(--tam-base);
    line-height: var(--interlineado);
    color: var(--color-texto);
    background: var(--color-fondo);
}

h1 { font-size: var(--tam-titulo); margin: 0 0 var(--espacio-3); }

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

.zona-cabecera,
.zona-contenido,
.zona-pie {
    max-width: var(--ancho-contenido);
    margin: 0 auto;
    padding: var(--espacio-3);
}

.zona-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    border-bottom: 1px solid var(--color-borde);
}

.zona-cabecera .marca {
    font-weight: 700;
    text-decoration: none;
    color: var(--color-primario-oscuro);
}

.zona-etiqueta {
    font-size: 0.875rem;
    color: var(--color-texto-suave);
}

.zona-pie {
    color: var(--color-texto-suave);
    font-size: 0.875rem;
    border-top: 1px solid var(--color-borde);
}

/* Navegación */
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3); }
.menu a { text-decoration: none; }
.form-en-linea { display: inline; margin: 0; }
.boton-enlace {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: var(--color-primario); text-decoration: underline;
}

/* Formularios */
.formulario { display: grid; gap: var(--espacio-3); max-width: 28rem; margin-bottom: var(--espacio-4); }
.campo { display: grid; gap: var(--espacio-1); font-weight: 600; }
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"] {
    font: inherit; padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie);
}
.campo small { font-weight: 400; color: var(--color-texto-suave); }
.campo-casilla { display: flex; gap: var(--espacio-2); align-items: flex-start; font-weight: 400; }
.boton {
    display: inline-block; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
    padding: var(--espacio-2) var(--espacio-4); border: 0; border-radius: var(--radio);
    background: var(--color-primario); color: #fff;
}
.boton:hover { background: var(--color-primario-oscuro); }
.boton-peligro { background: var(--color-error); }

/* Avisos */
.alerta { padding: var(--espacio-2) var(--espacio-3); border-radius: var(--radio); border: 1px solid var(--color-borde); max-width: 40rem; }
.alerta-error { border-color: var(--color-error); color: var(--color-error); }
.alerta-exito { border-color: var(--color-exito); color: var(--color-exito); }
.alerta-info { background: var(--color-superficie); }

/* 2FA */
.clave-2fa { font-size: 1.25rem; letter-spacing: 0.1em; }
.codigos-respaldo { columns: 2; max-width: 20rem; list-style: none; padding: 0; font-size: 1.1rem; }

/* Las zonas internas se distinguen a primera vista mientras no hay marca. */
.zona-admin .zona-cabecera { border-bottom-color: var(--color-primario); }
.zona-empresa .zona-cabecera { border-bottom-color: var(--color-acento); }