/* Lo propio de outbox. La base (colores, botones, login, topbar) es la de las teApps:
   css/app.css, compartida con inbox — misma familia, mismos gestos. */

/* ── Estado de la petición ──────────────────────────────────────────────── */
.estado-caja {
    display: flex; align-items: center; gap: .8rem;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .9rem;
}
.estado-caja.es-lista { border-color: #15803d; background: rgba(21, 128, 61, .07); }
.estado-caja.es-fallo { border-color: var(--brand); background: var(--brand-soft); }
.estado-ico { display: inline-flex; font-size: 1.6rem; color: var(--brand-texto); }
.estado-caja.es-lista .estado-ico { color: #15803d; }
.estado-txt { flex: 1; min-width: 0; }
.estado-tit { font-size: 1.05rem; font-weight: 800; }
.estado-sub { font-size: .82rem; opacity: .75; }

/* El giro solo mientras se está haciendo algo: si gira parado, parece colgado. */
.estado-ico.girando svg { animation: outbox-giro 1.1s linear infinite; }
@keyframes outbox-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .estado-ico.girando svg { animation: none; }
}

/* ── Aviso de extracto viejo ────────────────────────────────────────────── */
/* Mismo mensaje que va sellado en la cabecera de la captura. Se repite aquí a propósito:
   el sello viaja con la imagen, este se ve sin abrirla. */
.aviso-banco {
    background: var(--brand); color: #fff; border-radius: var(--radius);
    padding: .7rem .9rem; margin: 0 0 .9rem; font-size: .86rem; font-weight: 600;
}

/* ── El parte ───────────────────────────────────────────────────────────── */
.parte { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.parte-dato {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .7rem .8rem;
}
.parte-dato.ancho { grid-column: 1 / -1; }
.parte-et { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
.parte-val { font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.parte-val.ojo { color: var(--brand-texto); }
.parte-nota { font-size: .78rem; opacity: .7; }

/* ── Capturas ───────────────────────────────────────────────────────────── */
.capturas { display: grid; gap: .8rem; margin-bottom: 1rem; }
.captura { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.captura img { display: block; width: 100%; height: auto; }
.captura-pie {
    font-size: .78rem; padding: .45rem .7rem; opacity: .75;
    border-top: 1px solid var(--border); background: var(--panel);
}

/* ── Visor a pantalla completa ──────────────────────────────────────────── */
/* La captura completa es alta y estrecha: en el móvil no se lee sin ampliar. Aquí se abre
   a pantalla completa y se deja hacer zoom con los dedos. */
.visor {
    position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .93);
    overflow: auto; -webkit-overflow-scrolling: touch;
    padding: calc(3.2rem + var(--safe-top, 0px)) .5rem calc(1rem + var(--safe-bottom));
}
.visor img { display: block; width: 100%; height: auto; margin: 0 auto; max-width: 1400px; }
.visor-cerrar {
    position: fixed; top: calc(.6rem + var(--safe-top, 0px)); right: .6rem; z-index: 61;
    background: rgba(255, 255, 255, .92); border-radius: 999px;
}

/* ── Últimas peticiones ─────────────────────────────────────────────────── */
.ultimas { margin-top: 1.6rem; }
.ultimas-tit {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
    opacity: .6; margin: 0 0 .5rem;
}
.ultima {
    display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left;
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .6rem .8rem; margin-bottom: .45rem; color: inherit; font: inherit; cursor: pointer;
}
.ultima:active { transform: scale(.99); }
.ultima-ico { display: inline-flex; color: var(--brand-texto); }
.ultima-txt { flex: 1; min-width: 0; }
.ultima-tit { font-weight: 700; font-size: .92rem; }
.ultima-sub { font-size: .76rem; opacity: .7; }
.ultima-pinta { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.ultima-pinta.lista { color: #15803d; }
.ultima-pinta.fallo { color: var(--brand-texto); }
.ultima-pinta.curso { opacity: .7; }

/* Peticion suelta en fila impar: ocupa el ancho entero (ver pintarHome en app.js). */
.ambito.ancho { grid-column: 1 / -1; }