/* =============================================================================
   IAFLOW · ACCESIBILIDAD (Bloque E)
   =============================================================================
   Skip links, sr-only, focus uniformes. Se carga ANTES que cualquier
   página y funciona sin JavaScript.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. SKIP LINK (Saltar al contenido principal con teclado)
   ---------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: var(--space-3) var(--space-5);
    background: var(--cyan-600);
    color: var(--slate-0);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: top var(--transition-base);
}

/* Solo aparece al recibir foco por teclado */
.skip-link:focus,
.skip-link:focus-visible {
    top: var(--space-3);
    outline: 2px solid var(--slate-0);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   2. SR-ONLY (visible solo a screen readers)
   ---------------------------------------------------------------------------- */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Versión que se hace visible al recibir foco (útil para skip links secundarios) */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
    position: static;
    width: auto;
    height: auto;
    padding: var(--space-2) var(--space-3);
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Botón a ancho completo (sustituye inline style común) */
.btn-block {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    margin-top: var(--space-4, 16px);
}

/* -----------------------------------------------------------------------------
   3. FOCUS UNIFORME (cuando el global no ya lo cubre)
   ---------------------------------------------------------------------------- */
:focus-visible {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(6, 182, 212, 0.35));
    border-radius: var(--radius-sm, 6px);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Inputs y textareas: el outline se ve mejor que el shadow */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(6, 182, 212, 0.35));
}

/* -----------------------------------------------------------------------------
   4. CONTENIDO PRINCIPAL: ancla del skip link
   ---------------------------------------------------------------------------- */
#main-content {
    scroll-margin-top: calc(var(--header-height, 72px) + var(--space-3, 12px));
}

/* -----------------------------------------------------------------------------
   5. IMAGEN PLACEHOLDER (reemplaza inline styles del antiguo cargar_mas)
   ---------------------------------------------------------------------------- */
.img-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--bg-surface-2, #f1f5f9) 0%, var(--bg-surface, #ffffff) 100%);
}

/* -----------------------------------------------------------------------------
   6. ANUNCIOS ADSENSE (reemplazan inline styles de los <ins>)
   ---------------------------------------------------------------------------- */
.adsense-vertical {
    display: inline-block;
    width: 160px;
    height: 600px;
}

.adsense-inline {
    display: block;
    text-align: center;
}

/* -----------------------------------------------------------------------------
   7. AUTH PAGES STANDALONE (recuperar.php, reset.php)
   ---------------------------------------------------------------------------- */
.auth-standalone {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--bg-page);
    font-family: var(--font-ui);
}

.auth-standalone-card {
    width: 100%;
    max-width: 420px;
    padding: var(--space-10) var(--space-8);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.auth-standalone-card h1 {
    margin: 0 0 var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    text-align: center;
}

.auth-standalone-card .subtitle {
    margin: 0 0 var(--space-6);
    color: var(--text-muted);
    text-align: center;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.auth-standalone-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-standalone-form input {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-standalone-form input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus);
}

.auth-standalone-form button {
    width: 100%;
    min-height: 48px;
    background: var(--primary);
    color: var(--text-on-primary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.auth-standalone-form button:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.auth-standalone-footer {
    margin-top: var(--space-6);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.auth-standalone-footer a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.auth-standalone-footer a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-standalone-msg {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
    text-align: center;
    line-height: var(--leading-normal);
}

.auth-standalone-msg.success {
    background: var(--success-bg);
    color: var(--success-fg);
    border: 1px solid var(--success-line);
}

.auth-standalone-msg.error {
    background: var(--danger-bg);
    color: var(--danger-fg);
    border: 1px solid var(--danger-line);
}

/* Página standalone de "enlace caducado" */
.auth-token-invalido {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    text-align: center;
    background: var(--bg-page);
    font-family: var(--font-ui);
    color: var(--text-main);
}

.auth-token-invalido h2 {
    font-size: var(--text-3xl);
    margin: 0 0 var(--space-4);
}

.auth-token-invalido a {
    margin-top: var(--space-4);
    color: var(--primary);
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   8. PREFIERE-NO-ANIMACIÓN (extra protection sobre el de global.css)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .skip-link,
    .skip-link:focus,
    .skip-link:focus-visible {
        transition: none !important;
    }
}