/* ==========================================================================
   pagina-estado.css — Hoja compartida de las "páginas de estado autónomas":
   pages/pago_resultado.html y pages/verificar.html.

   Ambas son páginas de una sola tarjeta que muestran el desenlace de una
   operación (un pago confirmado, un folio verificado). Se llega a ellas desde
   fuera del sitio —un retorno 303 desde Flow, un QR impreso en un PDF— así
   que no dependen de sesión ni del router de curso.html.

   Antes cada una llevaba su propio <style> con :root local: ~90 líneas
   duplicadas de nav, hero, tarjeta, lista de detalle y botones, más dos
   juegos de colores copiados a mano que ya divergían del resto del sitio
   (azul #1d3d59 en vez del token, 'Segoe UI' en vez de las tipografías de
   marca). Esto lo unifica sobre css/tokens.css.

   Orden de enlace en cada página: tokens.css → nav.css → esta hoja.
   No declarar :root acá.
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background: var(--color-stone-50);
    color: var(--color-stone-800);
    min-height: 100vh;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}

.icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.15em;
}

/* ==================== HERO ====================
   Mismo degradado que .page-hero de mis_cursos.css, con el relleno inferior
   extra que necesita la tarjeta para montarse encima (margin-top negativo). */
.page-hero {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-mid) 100%);
    color: var(--color-white);
    text-align: center;
    padding: 2.6rem 1.2rem 4.5rem;
}

.page-hero h1 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: 1.9rem;
    text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* El icono del título va en amarillo de marca sobre el azul del hero. */
.page-hero h1 .icon {
    width: 1.3em;
    height: 1.3em;
    color: var(--color-secondary);
}

.page-hero p {
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.98rem;
}

/* ==================== TARJETA ==================== */
.container {
    max-width: 640px;
    margin: -2.8rem auto 3rem;
    padding: 0 1.2rem;
    width: 100%;
    flex: 1;
}

/* Las páginas legales son texto corrido, no una tarjeta de resultado: caben
   más caracteres por línea sin perder legibilidad. */
.container.prose {
    max-width: 760px;
}

/* Base común. .status-card (pago_resultado) centra su contenido;
   .verify-card (verificar) lo alinea a la izquierda porque lleva formulario. */
.status-card,
.verify-card,
.prose-card {
    background: var(--color-white);
    border-radius: 1rem;
    border: 1px solid var(--color-stone-200);
    box-shadow: var(--sombra-lg);
}

.status-card {
    padding: 2rem 1.8rem;
    text-align: center;
}

.verify-card {
    padding: 1.8rem;
}

/* ==================== LISTA DE DETALLE ====================
   Rejilla etiqueta/valor usada por las dos páginas (datos del certificado y
   desglose de la orden). .status-detail añade el recuadro sobre fondo gris;
   .result-detail va dentro de una caja de estado ya coloreada. */
.status-detail,
.result-detail {
    border: 1px solid var(--color-stone-200);
    border-radius: 0.7rem;
    overflow: hidden;
}

.status-detail {
    margin: 1.3rem auto 0;
    max-width: 380px;
    text-align: left;
    display: none;
    background: var(--color-stone-50);
}

.result-detail {
    margin-top: 0.9rem;
    background: var(--color-white);
}

.status-detail dl,
.result-detail dl {
    display: grid;
    grid-template-columns: auto 1fr;
}

.status-detail dt,
.result-detail dt {
    padding: 0.55rem 0.9rem;
    font-size: 0.8rem;
    color: var(--color-stone-500);
    border-bottom: 1px solid var(--color-stone-200);
    white-space: nowrap;
}

.status-detail dd,
.result-detail dd {
    padding: 0.55rem 0.9rem;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-stone-200);
}

.status-detail dt:last-of-type,
.status-detail dd:last-of-type,
.result-detail dt:last-of-type,
.result-detail dd:last-of-type {
    border-bottom: none;
}

/* ==================== BOTONES ==================== */
.status-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    cursor: pointer;
    padding: 0.7rem 1.4rem;
    border-radius: 0.6rem;
    font-family: inherit;
    font-size: 0.97rem;
    font-weight: 600;
    border: 1.5px solid var(--color-primary-dark);
    background: var(--color-primary-dark);
    color: var(--color-white);
    transition: all 0.2s ease;
}

.btn-action:hover {
    background: var(--color-primary-darker);
    border-color: var(--color-primary-darker);
    transform: translateY(-1px);
}

.btn-action:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.btn-action.secondary {
    background: var(--color-white);
    color: var(--color-primary-dark);
}

.btn-action.secondary:hover {
    background: var(--color-stone-100);
    color: var(--color-primary-darker);
}

/* ==================== ESTADO DE LA TARJETA DE PAGO ==================== */
.status-icon .icon {
    width: 3.4rem;
    height: 3.4rem;
}

.status-card.loading .status-icon {
    color: var(--color-primary-dark);
}

.status-card.ok .status-icon,
.status-card.ok .status-title {
    color: var(--color-success-text);
}

.status-card.bad .status-icon,
.status-card.bad .status-title {
    color: var(--color-danger-text);
}

.status-card.warn .status-icon,
.status-card.warn .status-title {
    color: var(--color-warning-text);
}

.status-title {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: 1.35rem;
    font-weight: 600;
    margin-top: 0.8rem;
}

.status-msg {
    color: var(--color-stone-500);
    font-size: 0.95rem;
    margin-top: 0.6rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* tokens.css neutraliza la animación bajo prefers-reduced-motion. */
.spinning {
    animation: spin 1.6s linear infinite;
    display: inline-block;
}

.legal-note {
    margin-top: 1.4rem;
    font-size: 0.78rem;
    color: var(--color-stone-500);
}

.legal-note a {
    color: var(--color-primary-dark);
}

/* ==================== FORMULARIO DE VERIFICACIÓN ==================== */
.verify-card label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0.45rem;
}

.verify-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Monoespaciada y con tracking: el folio se lee y se teclea carácter a
   carácter, y así no se confunden 0/O ni 1/l. */
#folioInput {
    flex: 1;
    min-width: 220px;
    padding: 0.7rem 0.9rem;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    border: 1.5px solid var(--color-stone-200);
    border-radius: 0.6rem;
    outline: none;
}

#folioInput:focus {
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.form-help {
    font-size: 0.82rem;
    color: var(--color-stone-500);
    margin-top: 0.55rem;
}

/* ==================== CAJA DE RESULTADO (verificar) ==================== */
.result {
    margin-top: 1.4rem;
    border-radius: 0.8rem;
    padding: 1.2rem 1.3rem;
    display: none;
}

.result.ok {
    display: block;
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
}

.result.bad {
    display: block;
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
}

.result-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
}

.result.ok .result-head {
    color: var(--color-success-text);
}

.result.bad .result-head {
    color: var(--color-danger-text);
}

.result p.msg {
    margin-top: 0.4rem;
    font-size: 0.9rem;
}

.result.bad p.msg {
    color: var(--color-danger-text);
}

/* ==================== TEXTO LEGAL (privacidad, términos) ==================== */
.prose-card {
    padding: 2rem 1.9rem;
}

.prose-card h2 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin: 1.6rem 0 0.5rem;
}

.prose-card h2:first-of-type {
    margin-top: 0;
}

.prose-card p,
.prose-card li {
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--color-stone-800);
}

.prose-card ul {
    padding-left: 1.3rem;
    margin: 0.4rem 0;
}

.prose-card a {
    color: var(--color-primary-dark);
}

.updated {
    font-size: 0.8rem;
    color: var(--color-stone-500);
    margin-bottom: 1.2rem;
}

/* ==================== PIE ==================== */
footer {
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-stone-500);
    padding: 1.2rem;
}