/**
 * Estilos para la página 404 (sys-not-found)
 * Requiere sys-base.css cargado antes (variables --base-*).
 *
 * @package HtmlResponseHttp
 */

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nf-container {
    max-width: 540px;
    width: 100%;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 2rem);
}

.nf-content {
    text-align: center;
}

.nf-code {
    display: block;
    font-size: clamp(3rem, 10vw, 5rem);
    font-weight: 700;
    color: var(--base-text-muted);
    line-height: 1;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

.nf-content h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    font-weight: 600;
    color: var(--base-text);
}

.nf-content p {
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
    color: var(--base-text-muted);
    line-height: 1.6;
}

.nf-home-link {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: var(--base-surface);
    border: 1px solid var(--base-border);
    border-radius: 6px;
    color: var(--base-accent);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
}

.nf-home-link:hover {
    border-color: var(--base-accent);
    background: rgba(88, 166, 255, 0.08);
}

/* Bloque de depuración (solo visible en desarrollo) */

.nf-debug {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--base-border);
}

.nf-dev-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    margin-bottom: 1rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    background: rgba(210, 153, 34, 0.2);
    border: 1px solid rgba(210, 153, 34, 0.4);
    color: #d29922;
}

.nf-debug-section {
    margin-bottom: 1rem;
}

.nf-debug-title {
    font-weight: 600;
    color: var(--base-text);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.nf-debug-detail {
    padding: 1rem 1.25rem;
    background: var(--base-surface);
    border: 1px solid var(--base-border);
    border-radius: 8px;
    color: var(--base-text-muted);
    line-height: 1.6;
    font-size: 0.8125rem;
}

.nf-debug-detail strong {
    color: var(--base-text);
    display: inline-block;
    min-width: 4.5rem;
}

.nf-debug-trace {
    padding: 1rem 1.25rem;
    background: var(--base-surface);
    border: 1px solid var(--base-border);
    border-radius: 8px;
    color: var(--base-text-muted);
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
    font-size: 0.75rem;
    white-space: pre;
    overflow-x: auto;
    overflow-y: auto;
    line-height: 1.5;
    max-height: 280px;
}