/* Sistema de diseño Tyvarak 2a — sobrio, base heredable.
   Tokens exactos del prompt: la base que el panel heredará. */

:root {
    --fondo: #F4F6F8;
    --superficie: #FFFFFF;
    --texto: #16202C;
    --texto-secundario: #5A6B7B;
    --acento: #0E5C5C;
    --acento-hover: #0A4444;
    --borde: #DDE3E9;
    --error: #A6342E;

    --fuente-display: "Space Grotesk", system-ui, sans-serif;
    --fuente-cuerpo: "Inter", system-ui, sans-serif;
    --fuente-mono: "JetBrains Mono", ui-monospace, monospace;

    --radio: 8px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--fuente-cuerpo);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.centro {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.tarjeta {
    background: var(--superficie);
    width: 100%;
    max-width: 380px;
    padding: 32px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 1px 3px rgba(22, 32, 44, 0.06),
                0 8px 24px rgba(22, 32, 44, 0.06);
}

.tarjeta--ancha { max-width: 520px; }

.wordmark {
    font-family: var(--fuente-display);
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
    margin: 0 0 24px;
    color: var(--texto);
}

label {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    margin: 16px 0 6px;
    color: var(--texto-secundario);
}

input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--fuente-cuerpo);
    font-size: 1rem;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

input:focus-visible,
.boton:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
    border-color: var(--acento);
}

.boton {
    width: 100%;
    margin-top: 24px;
    padding: 11px 16px;
    font-family: var(--fuente-cuerpo);
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--acento);
    border: 1px solid var(--acento);
    border-radius: var(--radio);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.boton:hover { background: var(--acento-hover); border-color: var(--acento-hover); }

.boton--secundario {
    width: auto;
    color: var(--acento);
    background: transparent;
}

.boton--secundario:hover {
    background: var(--fondo);
    color: var(--acento-hover);
}

.error {
    margin: 0 0 16px;
    padding: 10px 12px;
    font-size: 0.9rem;
    color: var(--error);
    background: rgba(166, 52, 46, 0.06);
    border: 1px solid rgba(166, 52, 46, 0.25);
    border-radius: var(--radio);
}

.saludo, .rol { margin: 4px 0; color: var(--texto-secundario); }
.saludo { color: var(--texto); font-size: 1.05rem; }

.dato {
    font-family: var(--fuente-mono);
    font-size: 0.95em;
    color: var(--texto);
}

.nota {
    margin: 20px 0 24px;
    padding-top: 20px;
    border-top: 1px solid var(--borde);
    color: var(--texto-secundario);
    font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}