/* layout.css — reset, cabecera, pie, columna de contenido y componentes
   compartidos (botones, badges, alertas) del diseño "Validador — Digito". */

/* ── Base del documento ───────────────────────────────────── */
* {
    box-sizing: border-box;
}

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

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    background: var(--background);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button {
    font: inherit;
    color: inherit;
}

/* Foco. Sin esto manda el anillo azul del navegador, que no es de este sistema de
   diseño y desentona sobre el morado de la marca. Solo :focus-visible: llegar con el
   teclado tiene que verse —sin marca no se sabe dónde se está—, pero pulsar con el
   ratón no debe dibujar nada.
   El anillo es una sombra porque el diseño lo pinta en dos colores. El outline
   transparente no se ve, pero es lo que queda en modo de alto contraste, donde el
   sistema descarta las sombras. */
:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--focus-shadow);
}

.app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Cabecera ─────────────────────────────────────────────── */
/* 80 px en desktop (24 + logo 32 + 24), 64 px en mobile (16 + 32 + 16). */
.app-header {
    flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 24px 0;
}

.app-header-inner {
    display: flex;
    justify-content: center;
    padding: 0 24px;
}


.app-logo {
    display: block;
    width: 99.71px;
    height: 32px;
}

/* ── Contenido ────────────────────────────────────────────── */
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--background);
}

/* ── Pie ──────────────────────────────────────────────────── */
/* Uno solo para toda la aplicación (ver el comentario en layout.html). */
.app-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 28px;
    background: var(--footer-bg);
    color: var(--footer-text);
    font-size: 13px;
    line-height: 13px;
    text-align: center;
}

/* ── Botones ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    filter: drop-shadow(var(--shadow-xs));
}

.btn:hover {
    background: var(--background);
}

.btn--icon {
    width: 32px;
    height: 32px;
    padding: 0;
    gap: 0;
    border-color: var(--border);
}


.btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    padding: 8px 16px;
}

.btn--primary:hover {
    background: #3a14a6;
}

.btn--primary:disabled {
    background: #b6a5e4;
    border-color: #b6a5e4;
    cursor: not-allowed;
}

.btn .icon {
    width: 16px;
    height: 16px;
    display: block;
}

/* ── Alertas ──────────────────────────────────────────────── */
.alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    border: 1px solid var(--neutral-border);
    border-radius: var(--radius-lg);
    background: var(--neutral-light);
    font-size: 14px;
    line-height: 20px;
}

.alert__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    display: block;
}

.alert__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.alert__title {
    font-weight: 500;
    color: var(--text-primary);
}

.alert__text {
    font-weight: 300;
    color: var(--text-primary);
}

.alert--success {
    background: var(--success-light);
    border-color: var(--success-border);
}

.alert--success .alert__title {
    color: var(--success-text);
}

.alert--error {
    background: var(--error-light);
    border-color: var(--error-border);
}

.alert--error .alert__title {
    color: var(--error-text);
}

.alert--warning {
    background: var(--warning-light);
    border-color: var(--warning-border);
}

.alert--warning .alert__title {
    color: var(--warning-text);
}

/* ── Badges / chips ───────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--neutral-light);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    white-space: nowrap;
}

.badge--success {
    background: var(--success-light);
    color: var(--success-text);
    border-radius: var(--radius-full);
    padding: 4px 16px;
}

.badge--error {
    background: var(--error-light);
    color: var(--error-text);
    border-radius: var(--radius-full);
    padding: 4px 16px;
}

.badge--warning {
    background: var(--warning-light);
    color: var(--warning-text);
    border-radius: var(--radius-full);
    padding: 4px 16px;
}

/* Utilidad compartida */
.is-hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* El fragmento de contenido de Thymeleaf debe ocupar el alto restante para que
   la pantalla de subida quede centrada verticalmente. */
.app-main > section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media (max-width: 720px) {
    .app-header {
        padding: 16px 0;
    }

    .app-header-inner {
        padding: 0 20px;
    }

    .app-footer {
        padding: 16px;
        font-size: 13px;
        line-height: 15px;
    }
}