/* ─── Bandeja de entrada (solo lectura) ─── */
.correo-lista-panel { width: 340px; }
.vac-layout:has(.correo-lista-panel) { grid-template-columns: 340px 1fr; }

.correo-buzon {
    font-size: 12px; color: #64748b; margin-top: 4px; word-break: break-all;
}
.correo-buzon.correo-error { color: #b91c1c; font-weight: 600; }

/* ── El informe de la IA, en el panel de la derecha ── */
.btn-informe {
    display: block; width: calc(100% - 20px); margin: -4px 10px 6px;
    padding: 7px 10px; cursor: pointer; font-family: inherit; font-size: 12.5px;
    border: 1px solid #ddd6fe; border-radius: 9px; background: #f5f3ff; color: #5b21b6;
}
.btn-informe:hover { background: #ede9fe; }
.btn-desmarcar {
    display: block; width: calc(100% - 20px); margin: 0 10px 6px;
    padding: 7px 10px; cursor: pointer; font-family: inherit; font-size: 12.5px;
    border: 1px solid #e2e8f0; border-radius: 9px; background: #f8fafc; color: #64748b;
}
.btn-desmarcar:hover { background: #fef3c7; border-color: #fde68a; color: #92400e; }

.informe-tanda + .informe-tanda { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #e2e8f0; }
.informe-tanda-cab {
    font-size: 11.5px; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
}
.informe-resumen {
    margin-top: 18px; padding: 11px 14px; border-radius: 10px;
    background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; font-size: 13px;
}
.correo-btn-reanalizar {
    margin-top: 10px; padding: 6px 11px; cursor: pointer; font-family: inherit; font-size: 12px;
    border: 1px solid #bfdbfe; border-radius: 8px; background: #fff; color: #1d4ed8;
}
.correo-btn-reanalizar:hover { background: #dbeafe; }

.informe-ia { display: flex; flex-direction: column; gap: 14px; }
.informe-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.informe-titulo { display: flex; align-items: center; gap: 12px; }
.informe-titulo .flore-f {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6d28d9, #2563eb); color: #fff; font-size: 20px;
}
.informe-titulo h2 { margin: 0; font-size: 19px; color: #0f172a; }
.informe-titulo small { color: #64748b; font-size: 12.5px; }
.informe-cerrar {
    border: 1px solid #e2e8f0; background: #fff; color: #64748b;
    width: 32px; height: 32px; border-radius: 9px; cursor: pointer; flex-shrink: 0;
}
.informe-cerrar:hover { background: #f1f5f9; color: #0f172a; }

.informe-pasos { display: flex; flex-direction: column; gap: 8px; }
.informe-paso {
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px; color: #94a3b8; opacity: .5;
    transition: opacity .3s, color .3s;
}
.informe-paso.activo { opacity: 1; color: #1e293b; font-weight: 600; }
.informe-paso.hecho { opacity: 1; color: #15803d; }
.informe-paso-icono {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: #94a3b8; font-size: 12px;
}
.informe-paso.activo .informe-paso-icono {
    background: #ede9fe; color: #6d28d9;
    animation: informe-pulso 1.6s ease-in-out infinite;
}
.informe-paso.hecho .informe-paso-icono { background: #dcfce7; color: #15803d; }
@keyframes informe-pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(109, 40, 217, .35) }
    70% { box-shadow: 0 0 0 8px rgba(109, 40, 217, 0) }
}
.informe-detalle { font-size: 12.5px; color: #64748b; min-height: 18px; font-style: italic; }
.informe-cuerpo { font-size: 14px; color: #1f2937; line-height: 1.65; }
.informe-cuerpo .flora-burbuja {
    background: none; padding: 0; margin: 0; max-width: none;
    box-shadow: none; border: none; color: inherit; font-size: inherit;
}
.informe-error {
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
    padding: 12px 14px; color: #991b1b; font-size: 13.5px;
}
.informe-acciones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.informe-word {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8;
    border-radius: 9px; padding: 7px 12px; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.informe-word:hover { background: #dbeafe; }
.informe-word:disabled { opacity: .6; cursor: wait; }

/* ── Seguir hablando con FLORE sobre el informe ──
   Va FUERA de .informe-cuerpo a propósito: ahí dentro hay un ajuste que
   deja las burbujas planas para que el informe se lea como texto corrido. */
.informe-chat {
    border-top: 1px solid #e2e8f0; padding-top: 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.informe-chat-cab {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: #5b21b6;
}
.informe-chat-cab .flore-f {
    width: 24px; height: 24px; border-radius: 8px;
    background: linear-gradient(135deg, #6d28d9, #2563eb); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.informe-chat-mensajes {
    display: flex; flex-direction: column; gap: 12px;
    max-height: 420px; overflow-y: auto;
}
.informe-chat-mensajes:empty { display: none; }
.informe-chat-atajos { display: flex; gap: 6px; flex-wrap: wrap; }
.informe-chat-atajos button {
    border: 1px solid #e2e8f0; background: #f8fafc; color: #475569;
    border-radius: 999px; padding: 5px 11px; cursor: pointer;
    font-family: inherit; font-size: 12px;
}
.informe-chat-atajos button:hover { background: #ede9fe; border-color: #ddd6fe; color: #5b21b6; }
.informe-chat-entrada { display: flex; gap: 8px; align-items: flex-end; }
.informe-chat-entrada textarea {
    flex: 1; resize: none; border: 1px solid #dbe3ee; border-radius: 12px;
    padding: 10px 13px; font-size: 14px; font-family: inherit; color: #0f172a;
    max-height: 120px;
}
.informe-chat-entrada textarea:focus { outline: none; border-color: #2563eb; }
.informe-chat-entrada textarea:disabled { background: #f1f5f9; color: #94a3b8; }
.informe-chat-entrada button {
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(135deg, #6d28d9, #2563eb); color: #fff; flex-shrink: 0;
}
.informe-chat-entrada button:disabled { opacity: .5; cursor: wait; }

/* ── Elegir buzón y administrar cuentas ── */
.correo-selector { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.correo-selector select {
    flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px; font-family: inherit;
    border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #0f172a; cursor: pointer;
}
.btn-cuentas {
    border: 1px solid #e2e8f0; background: #fff; color: #64748b;
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
}
.btn-cuentas:hover { background: #f1f5f9; color: #1e293b; }

.cuentas-fondo {
    position: fixed; inset: 0; z-index: 3000; background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 20px;
}
.cuentas-fondo.abierto { display: flex; }
.cuentas-ventana {
    width: min(680px, 100%); max-height: 90vh; overflow: hidden auto;
    background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
}
.cuentas-cab {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; color: #fff; background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
}
.cuentas-cab h3 { margin: 0; font-size: 16px; }
.cuentas-cerrar {
    border: none; background: rgba(255, 255, 255, .18); color: #fff;
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
}
.cuentas-cuerpo { padding: 16px 18px 18px; }
.cuentas-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cuenta-fila {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px 12px; background: #f8fafc;
}
.cuenta-fila.activa { border-color: #bfdbfe; background: #eff6ff; }
.cuenta-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cuenta-datos b { font-size: 13.5px; color: #0f172a; }
.cuenta-datos small { font-size: 11.5px; color: #64748b; }
.cuenta-chip {
    align-self: flex-start; margin-top: 3px; font-size: 11px;
    background: #e0f2fe; color: #075985; border-radius: 999px; padding: 1px 8px;
}
.cuenta-chip-mal { background: #fef3c7; color: #92400e; }
.cuenta-botones { display: flex; gap: 5px; flex-shrink: 0; }
.cuenta-botones button {
    border: 1px solid #e2e8f0; background: #fff; color: #475569;
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
}
.cuenta-botones button:hover { background: #f1f5f9; color: #0f172a; }
.cuenta-borrar:hover { background: #fee2e2 !important; color: #b91c1c !important; }

.cuentas-form { border-top: 1px solid #e2e8f0; padding-top: 14px; }
.cuentas-form h4 { margin: 0 0 6px; font-size: 14px; color: #334155; }
.cuentas-nota { margin: 0 0 12px; font-size: 12.5px; color: #64748b; line-height: 1.5; }
.cuentas-avanzado { margin-top: 12px; }
.cuentas-avanzado summary {
    cursor: pointer; font-size: 12.5px; color: #64748b;
    padding: 6px 0; user-select: none;
}
.cuentas-avanzado summary:hover { color: #1e293b; }
.cuentas-avanzado[open] summary { margin-bottom: 8px; }
/* El "display: grid" de la rejilla le gana a lo que hace el navegador para
   plegar un <details>, así que se esconde a mano */
.cuentas-avanzado:not([open]) .cuentas-rejilla { display: none; }
.cuentas-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cuentas-rejilla label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: #475569; font-weight: 600; }
.cuentas-rejilla input {
    padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 13.5px; font-family: inherit; color: #0f172a;
}
.cuentas-rejilla input:focus { outline: none; border-color: #2563eb; }
.cuentas-rejilla input:disabled { background: #f1f5f9; color: #94a3b8; }
.cuentas-rejilla small { font-weight: 400; color: #94a3b8; font-size: 11px; }
.cuentas-ancho { grid-column: 1 / -1; }
.cuentas-acciones { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.cuentas-aviso { flex: 1; font-size: 12.5px; color: #15803d; }
.cuentas-aviso.malo { color: #b91c1c; }
.cuentas-cancelar, .cuentas-guardar {
    border-radius: 9px; padding: 9px 15px; cursor: pointer; font-size: 13.5px;
    font-weight: 600; font-family: inherit; border: none;
}
.cuentas-cancelar { background: #f1f5f9; color: #475569; }
.cuentas-guardar { background: linear-gradient(135deg, #1d4ed8, #0ea5e9); color: #fff; }

@media (max-width: 560px) {
    .cuentas-rejilla { grid-template-columns: 1fr; }
}

.btn-analizar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 10px; padding: 10px 12px; cursor: pointer;
    border: none; border-radius: 10px; color: #fff; font-size: 13.5px; font-weight: 600;
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
    box-shadow: 0 2px 6px rgba(37, 99, 235, .25);
    transition: filter .15s, transform .1s;
}
.btn-analizar:hover { filter: brightness(1.08); }
.btn-analizar:active { transform: translateY(1px); }
.btn-analizar .flore-f { font-size: 16px; }
.btn-analizar-pendientes {
    background: rgba(255,255,255,.28); border-radius: 999px;
    padding: 1px 8px; font-size: 12px; font-weight: 700;
}

.correo-marca {
    font-size: 11px; background: #dcfce7; color: #15803d;
    border-radius: 999px; padding: 1px 8px; flex-shrink: 0; font-weight: 600;
}
.correo-marca.es-pedido { background: #dbeafe; color: #1d4ed8; }
.correo-resumen {
    margin-top: 4px; font-size: 11.5px; color: #64748b; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.correo-analisis {
    margin-top: 14px; background: #eff6ff; border: 1px solid #bfdbfe;
    border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #1e293b; line-height: 1.6;
}
.correo-analisis-cab {
    display: flex; align-items: center; gap: 8px; font-weight: 700;
    color: #1d4ed8; margin-bottom: 6px;
}
.correo-analisis-accion { margin-top: 6px; color: #475569; }

.correo-filtros {
    display: flex; gap: 6px; padding: 8px 10px;
    border-bottom: 1px solid var(--border, #e2e8f0); background: #f8fafc;
}
.correo-filtros button {
    flex: 1; border: 1px solid transparent; background: transparent; color: #64748b;
    border-radius: 8px; padding: 6px 4px; font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s;
}
.correo-filtros button:hover { background: #e2e8f0; color: #334155; }
.correo-filtros button.activo { background: #fff; color: #2563eb; border-color: #dbe3ee; box-shadow: 0 1px 3px rgba(15,23,42,.08); }

.correo-lista { flex: 1; overflow-y: auto; }
.correo-item {
    padding: 10px 12px; border-bottom: 1px solid #eef2f7; cursor: pointer;
    transition: background .12s; border-left: 3px solid transparent;
}
.correo-item:hover { background: #f8fafc; }
.correo-item.activo { background: #eff6ff; border-left-color: #2563eb; }
.correo-item.nuevo .correo-asunto { font-weight: 700; color: #0f172a; }
.correo-item-cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.correo-de { font-weight: 600; font-size: 13px; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-fecha { font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.correo-asunto {
    font-size: 13px; color: #334155; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.correo-meta { display: flex; gap: 8px; align-items: center; margin-top: 3px; }
.correo-email { font-size: 11px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-clip { font-size: 11px; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 1px 7px; flex-shrink: 0; }

.correo-pie {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-top: 1px solid var(--border, #e2e8f0); background: #f8fafc;
    font-size: 12px; color: #64748b;
}
.btn-refrescar {
    border: 1px solid #dbe3ee; background: #fff; color: #2563eb; cursor: pointer;
    border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600;
}
.btn-refrescar:hover { background: #eff6ff; }

.correo-vacio { padding: 28px 16px; text-align: center; color: #94a3b8; font-size: 13px; }
.correo-vacio.correo-error { color: #b91c1c; }

/* ─── Correo abierto ─── */
.correo-detalle { overflow-y: auto; padding: 0; }
.correo-bienvenida { text-align: center; color: #64748b; padding: 60px 24px; }
.correo-bienvenida i { font-size: 42px; color: #cbd5e1; margin-bottom: 12px; display: block; }
.correo-bienvenida h2 { color: #1e293b; font-size: 19px; margin-bottom: 6px; }
.correo-nota {
    margin-top: 18px; font-size: 12.5px; color: #475569; background: #f1f5f9;
    display: inline-block; padding: 8px 14px; border-radius: 999px;
}
.correo-bienvenida.correo-error i, .correo-bienvenida.correo-error p { color: #b91c1c; }

/* El correo abierto aprovecha el ancho que haya. Estaba topado a 960px y en
   una pantalla grande quedaba encajonado en la izquierda con medio monitor
   vacio al lado. Se deja un tope alto solo para que una linea de texto no
   cruce 2000px de punta a punta, que tampoco se lee. */
.correo-abierto { padding: 22px 26px 40px; max-width: 1500px; }
.correo-abierto h2 { font-size: 20px; color: #0f172a; margin-bottom: 14px; word-break: break-word; }
.correo-cabecera {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 12px 14px; font-size: 13px; color: #475569; line-height: 1.7;
    word-break: break-word;
}
.correo-cabecera b { color: #1e293b; margin-right: 4px; }

.correo-adjuntos { margin-top: 16px; }
.correo-adjuntos h3 { font-size: 13px; color: #92400e; margin-bottom: 8px; }
.correo-adjunto {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
    padding: 9px 12px; margin-bottom: 6px; font-size: 13px;
}
.correo-adjunto > i { color: #dc2626; font-size: 16px; }
.correo-adjunto-nombre { flex: 1; min-width: 140px; color: #1e293b; word-break: break-all; }
.correo-adjunto-peso { color: #92400e; font-size: 12px; }
.correo-btn-ver, .correo-btn-bajar {
    text-decoration: none; font-size: 12.5px; font-weight: 600;
    border-radius: 8px; padding: 5px 11px; white-space: nowrap;
}
.correo-btn-ver { background: #2563eb; color: #fff; }
.correo-btn-bajar { background: #fff; color: #92400e; border: 1px solid #fde68a; }
.correo-btn-ver:hover { filter: brightness(1.1); }
.correo-btn-bajar:hover { background: #fef3c7; }

.correo-cuerpo { margin-top: 18px; }
.correo-marco {
    width: 100%; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
    min-height: 220px;
}
.correo-texto {
    white-space: pre-wrap; word-break: break-word; font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 14px; color: #1f2937; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 14px; margin: 0;
}

/* Esta regla apilaba la lista y el correo a 900px dejando la bandeja en una
   tira de 46vh: se leia mal y el correo abierto quedaba debajo del todo. El
   apilado de verdad se hace ahora a 820px, mas abajo, enseñando UNA cosa cada
   vez. Aqui solo se aprieta el texto. */
@media (max-width: 900px) {
    .correo-abierto { padding: 16px 14px 32px; }
}

/* ════════════════════════════════════════════════════════════════════════
   ADAPTADA A CUALQUIER PANTALLA
   ------------------------------------------------------------------------
   La pantalla eran dos columnas fijas: en el móvil la lista se quedaba en
   una tira estrecha y el correo abierto no se podía leer. Ahora:
     · en ordenador siguen las dos columnas
     · en tablet la lista se estrecha
     · en móvil solo se ve UNA cosa a la vez — la bandeja, o el correo
       abierto con su botón de volver
   ════════════════════════════════════════════════════════════════════════ */

/* OJO CON LOS NOMBRES: ".correo-abierto" es el contenido del correo o del
   informe. La marca que se le pone al <body> cuando hay algo abierto se llama
   "viendo-correo" a proposito: si se llamara igual, las reglas de una (fondo,
   margen, bordes) se le aplicarian al body entero y la pagina se encogeria.
   Paso, y se veia como si la aplicacion se hubiera reducido. */

/* El botón de volver solo existe en móvil */
.correo-volver { display: none; }

/* Hueco para la barra de navegación de abajo */
.vac-layout { padding-bottom: 50px; }

/* ── Tablet ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .vac-layout { grid-template-columns: 300px 1fr; }
    .correo-lista-panel { min-width: 0; }
}

/* ── Móvil: una cosa cada vez ───────────────────────────────────────── */
@media (max-width: 820px) {
    .vac-layout {
        grid-template-columns: 1fr;
        position: relative;
    }

    /* La bandeja ocupa todo y se desplaza sola */
    .correo-lista-panel {
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--border, #e2e8f0);
    }
    .correo-lista { max-height: none; }

    /* El correo abierto entra por encima de la bandeja */
    .correo-detalle {
        display: none;
        position: fixed;
        inset: 60px 0 50px 0;      /* debajo de la cabecera, encima de la barra */
        z-index: 40;
        overflow-y: auto;
        background: #fff;
        padding-top: 46px;         /* sitio para el botón de volver */
    }
    body.viendo-correo .correo-detalle { display: block; }
    body.viendo-correo .correo-lista-panel { display: none; }

    body.viendo-correo .correo-volver {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        top: 66px;
        left: 10px;
        z-index: 41;
        border: 1px solid #dbe3ee;
        background: #fff;
        color: var(--flora-azul, #2563eb);
        border-radius: 999px;
        padding: 8px 14px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
    }

    /* Dedos, no ratón: todo más alto */
    .correo-item { padding: 12px 14px; }
    .correo-filtros button { padding: 9px 12px; font-size: 13px; }
    .btn-analizar, .btn-informe, .btn-desmarcar,
    .btn-refrescar { min-height: 44px; }

    /* La cabecera deja de robar sitio */
    header .search-bar { display: none; }
    header .logo { font-size: 15px; }
}

/* ── Móvil estrecho ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
    header .user-info span { display: none; }   /* solo el botón de salir */
    .correo-selector { flex-wrap: wrap; }
    .correo-filtros { overflow-x: auto; flex-wrap: nowrap; }
    .correo-filtros button { flex: 0 0 auto; }
}

/* ── La ventana de cuentas, también ─────────────────────────────────── */
@media (max-width: 640px) {
    .cuentas-ventana { width: 96vw; max-height: 92vh; }
    .cuentas-rejilla { grid-template-columns: 1fr; }
    .cuentas-acciones { flex-wrap: wrap; gap: 8px; }
    .cuentas-acciones button { flex: 1 1 auto; min-height: 44px; }
}

/* ════════════════════════════════════════════════════════════════════════
   EL INFORME DE FLORE, MÁS LEGIBLE
   ------------------------------------------------------------------------
   Es lo que más se mira de esta pantalla y era una columna de texto suelto.
   Ahora: cabecera que se queda fija al desplazar, ancho de lectura cómodo, y
   en el móvil ocupa la pantalla entera con el chat pegado abajo.
   ════════════════════════════════════════════════════════════════════════ */

.informe-ia { display: flex; flex-direction: column; min-height: 100%; }

/* La cabecera no se pierde al bajar por un informe largo */
.informe-cab {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 12px;
}

/* Ancho de lectura comodo, pero SIN encajonar: hasta 1100px y lo que haya.
   Lo puse en 820px fijos y en pantalla grande se veia estrecho de mas. */
.informe-cuerpo { max-width: min(1100px, 100%); }
.informe-cuerpo h3 { margin-top: 18px; }
.informe-cuerpo ul, .informe-cuerpo ol { padding-left: 20px; }
.informe-cuerpo li { margin-bottom: 5px; }

/* Los pasos, en fila cuando caben */
.informe-pasos { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* Los atajos del chat no se salen */
.informe-chat-atajos { display: flex; flex-wrap: wrap; gap: 7px; }
.informe-chat-atajos button { white-space: normal; text-align: left; }

@media (max-width: 820px) {
    .informe-cab {
        /* Deja sitio al botón de volver, que va fijo arriba a la izquierda */
        padding-left: 116px;
        min-height: 44px;
    }
    .informe-cuerpo { max-width: none; }
    .informe-pasos { flex-direction: column; gap: 6px; }

    /* El chat, siempre a mano */
    .informe-chat { margin-top: 14px; }
    .informe-chat-entrada { position: sticky; bottom: 0; background: #fff; padding: 8px 0; }
    .informe-chat-entrada textarea { font-size: 16px; }  /* 16px evita que el móvil haga zoom */
    .informe-chat-mensajes { max-height: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   PANTALLAS GRANDES: QUE NO SOBRE MEDIO MONITOR
   ------------------------------------------------------------------------
   Con la lista fija en 340px, en un monitor de 1920 quedaban 1571px de
   blanco a la derecha y parecía que la página estaba rota. Ahora la bandeja
   crece con la pantalla y el panel de lectura tiene fondo propio, así que
   el hueco se lee como "aquí va el correo" y no como un vacío.
   ════════════════════════════════════════════════════════════════════════ */

/* El panel de lectura, con su fondo: deja de parecer un agujero en blanco */
.correo-detalle {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
}
.correo-bienvenida {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: min(60vh, 520px);
}
/* El correo abierto y el informe, sobre tarjeta blanca */
.correo-abierto {
    background: #fff;
    border-radius: 14px;
    margin: 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

@media (min-width: 1400px) {
    .vac-layout:has(.correo-lista-panel) { grid-template-columns: 420px 1fr; }
    .correo-lista-panel { width: 420px; }
}
@media (min-width: 1750px) {
    .vac-layout:has(.correo-lista-panel) { grid-template-columns: 480px 1fr; }
    .correo-lista-panel { width: 480px; }
}

/* El detalle por tandas: guardado pero fuera de la vista */
.informe-tandas-detalle { margin-top: 22px; }
.informe-tandas-detalle > summary {
    cursor: pointer; color: #64748b; font-size: 13px;
    padding: 8px 0; user-select: none;
}
.informe-tandas-detalle > summary:hover { color: var(--flora-azul, #2563eb); }
.informe-tandas-detalle .informe-tanda { opacity: .85; }