/* ── Base ──────────────────────────────────────────────────────────────────── */

:root {
    --verde: #075e54;
    --verde-claro: #128c7e;
    --burbuja-entrante: #ffffff;
    --burbuja-saliente: #d9fdd3;
    --fondo-hilo: #efeae2;
    --borde: #e3e3e3;
    --texto: #1f2937;
    --texto-suave: #6b7280;
    --bien: #16a34a;
    --aviso: #d97706;
    --alerta: #dc2626;
}

html, body {
    margin: 0;
    height: 100%;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--texto);
}

h1 { font-size: 1.35rem; margin: 0 0 .5rem; }
h2 { font-size: 1rem; margin: 0 0 .5rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
a { color: var(--verde-claro); }

.vacio { color: var(--texto-suave); padding: 1rem; }
.cargando-pantalla { padding: 2rem; color: var(--texto-suave); }

/* ── Marco general ─────────────────────────────────────────────────────────── */

.marco { display: flex; height: 100vh; overflow: hidden; }

.lateral {
    width: 210px;
    flex: 0 0 210px;
    background: var(--verde);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
}

.marca { padding: 0 1rem 1.25rem; line-height: 1.1; }
.marca-titulo { display: block; font-size: 1.15rem; font-weight: 600; }
.marca-sub { display: block; font-size: .8rem; opacity: .7; }

.lateral .enlace {
    display: block;
    padding: .6rem 1rem;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: .92rem;
    border-left: 3px solid transparent;
}
.lateral .enlace:hover { background: rgba(255,255,255,.08); color: #fff; }
.lateral .enlace.active { background: rgba(255,255,255,.14); color: #fff; border-left-color: #fff; }

.usuario { margin-top: auto; padding: 1rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .85rem; }
.usuario-nombre { display: block; margin-bottom: .4rem; opacity: .85; }
.salir {
    background: none; border: 1px solid rgba(255,255,255,.4); color: #fff;
    padding: .3rem .6rem; border-radius: 4px; cursor: pointer; font-size: .8rem;
}
.salir:hover { background: rgba(255,255,255,.12); }

.contenido { flex: 1; overflow: auto; padding: 1.25rem 1.5rem; }

/* ── Bandeja ───────────────────────────────────────────────────────────────── */

/* La bandeja ocupa el alto completo y se sale del padding del contenido: es una
   pantalla de dos paneles, no un documento. */
.bandeja {
    display: flex;
    height: 100vh;
    margin: -1.25rem -1.5rem;
}

.bandeja-lista {
    width: 330px;
    flex: 0 0 330px;
    border-right: 1px solid var(--borde);
    display: flex;
    flex-direction: column;
    background: #fff;
}

.bandeja-buscar { padding: .75rem; border-bottom: 1px solid var(--borde); }
.bandeja-buscar input {
    width: 100%; box-sizing: border-box; padding: .5rem .7rem;
    border: 1px solid var(--borde); border-radius: 18px; font-size: .9rem;
}

.bandeja-lista ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.bandeja-lista li { border-bottom: 1px solid #f2f2f2; }
.bandeja-lista li.activa { background: #f0f2f5; }
.bandeja-lista a { display: block; padding: .7rem .9rem; text-decoration: none; color: inherit; }
.bandeja-lista a:hover { background: #f7f7f7; }

.fila-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.fila-cabeza .nombre { font-weight: 600; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-cabeza .fecha { font-size: .72rem; color: var(--texto-suave); flex: 0 0 auto; }

.fila-cuerpo { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-top: .15rem; }
.fila-cuerpo .previo {
    font-size: .82rem; color: var(--texto-suave);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fila-cuerpo .tu { color: #9ca3af; }
.fila-cuerpo .conteo {
    font-size: .7rem; color: var(--texto-suave); background: #f0f2f5;
    border-radius: 10px; padding: 0 .4rem; flex: 0 0 auto;
}

/* ── Hilo ──────────────────────────────────────────────────────────────────── */

.bandeja-hilo { flex: 1; display: flex; flex-direction: column; background: var(--fondo-hilo); min-width: 0; }

.hilo-vacio { margin: auto; text-align: center; color: var(--texto-suave); padding: 2rem; }

.hilo-cabeza { background: #f0f2f5; border-bottom: 1px solid var(--borde); padding: .7rem 1rem; }
.hilo-cabeza h1 { font-size: 1.05rem; margin: 0; }
.hilo-meta { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .76rem; color: var(--texto-suave); margin-top: .2rem; }
.hilo-meta .etiquetas { color: var(--verde-claro); }

.hilo-mensajes { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }

.cargar-mas { text-align: center; margin-bottom: 1rem; }
.cargar-mas button {
    background: #fff; border: 1px solid var(--borde); border-radius: 16px;
    padding: .35rem .9rem; cursor: pointer; font-size: .82rem; color: var(--texto-suave);
}

.separador-dia {
    text-align: center; margin: 1rem 0 .75rem; font-size: .72rem; color: var(--texto-suave);
}
.separador-dia::before, .separador-dia::after { content: "  ·  "; }

.burbuja {
    max-width: 66%;
    padding: .45rem .6rem .3rem;
    border-radius: 8px;
    margin-bottom: .45rem;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
    font-size: .9rem;
    word-wrap: break-word;
}
.burbuja.entrante { background: var(--burbuja-entrante); margin-right: auto; }
.burbuja.saliente { background: var(--burbuja-saliente); margin-left: auto; }

.burbuja .agente { font-size: .74rem; color: var(--verde-claro); font-weight: 600; margin-bottom: .1rem; }
.burbuja .tipo { font-size: .74rem; color: var(--texto-suave); margin-bottom: .15rem; }
.burbuja .texto { white-space: pre-wrap; }

.burbuja .adjunto {
    margin-top: .35rem; padding: .35rem .5rem; background: rgba(0,0,0,.04);
    border-radius: 5px; font-size: .78rem; display: flex; gap: .4rem; align-items: center;
}
.burbuja .adjunto .tam { color: var(--texto-suave); }
.burbuja .adjunto .edo-descarga { margin-left: auto; font-size: .72rem; }
.edo-descarga.pendiente, .edo-descarga.descargando { color: var(--aviso); }
.edo-descarga.completa { color: var(--bien); }
.edo-descarga.fallida, .edo-descarga.caducada { color: var(--alerta); }

.burbuja .pie {
    display: flex; justify-content: flex-end; align-items: center; gap: .35rem;
    font-size: .68rem; color: var(--texto-suave); margin-top: .15rem;
}
.burbuja .acuse.leido { color: #53bdeb; }
.burbuja .origen { opacity: .6; font-style: italic; }
.burbuja .falla { font-size: .74rem; color: var(--alerta); margin-top: .2rem; }

/* ── Salud ─────────────────────────────────────────────────────────────────── */

.salud-porque { color: var(--texto-suave); font-size: .88rem; max-width: 60ch; margin-bottom: 1.5rem; }
.salud-bloque { margin-bottom: 1.75rem; }

.salud-tabla { border-collapse: collapse; width: 100%; max-width: 820px; font-size: .88rem; }
.salud-tabla th, .salud-tabla td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--borde); }
.salud-tabla th { font-weight: 500; width: 250px; }
.salud-tabla th.sangria { padding-left: 1.5rem; color: var(--texto-suave); font-weight: 400; }
.salud-tabla .detalle { color: var(--texto-suave); font-size: .8rem; }

/* El semáforo va como barra a la izquierda y no como color de texto: se lee de un
   vistazo sin tener que interpretar cada número. */
.salud-tabla tr.bien   th { box-shadow: inset 3px 0 0 var(--bien); }
.salud-tabla tr.aviso  th { box-shadow: inset 3px 0 0 var(--aviso); }
.salud-tabla tr.alerta th { box-shadow: inset 3px 0 0 var(--alerta); }

.salud-cifras { display: flex; gap: 2rem; margin-bottom: 1rem; flex-wrap: wrap; }
.salud-cifras div { display: flex; flex-direction: column; }
.salud-cifras strong { font-size: 1.5rem; font-weight: 600; }
.salud-cifras span { font-size: .78rem; color: var(--texto-suave); }

.nota { font-size: .8rem; color: var(--texto-suave); margin-top: .5rem; max-width: 65ch; }

/* ── Login ─────────────────────────────────────────────────────────────────── */

.login-fondo {
    height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--fondo-hilo);
}
.login-caja {
    background: #fff; padding: 2rem 2.25rem; border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.12); width: 320px;
}
.login-caja h1 { margin-bottom: .1rem; }
.login-sub { color: var(--texto-suave); font-size: .85rem; margin: 0 0 1.5rem; }
.login-caja label { display: block; font-size: .82rem; margin-bottom: .25rem; color: var(--texto-suave); }
.login-caja input {
    width: 100%; box-sizing: border-box; padding: .5rem .6rem; margin-bottom: .9rem;
    border: 1px solid var(--borde); border-radius: 5px; font-size: .95rem;
}
.login-caja button {
    width: 100%; padding: .55rem; background: var(--verde); color: #fff;
    border: none; border-radius: 5px; font-size: .95rem; cursor: pointer;
}
.login-caja button:hover:not(:disabled) { background: var(--verde-claro); }
.login-caja button:disabled { opacity: .6; cursor: default; }
.login-error {
    background: #fef2f2; color: var(--alerta); border: 1px solid #fecaca;
    padding: .5rem .6rem; border-radius: 5px; font-size: .83rem; margin-bottom: .9rem;
}

#blazor-error-ui {
    background: lightyellow; bottom: 0; display: none; left: 0; position: fixed;
    width: 100%; z-index: 1000; padding: .6rem 1.25rem; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ── Buscar ────────────────────────────────────────────────────────────────── */

.buscar-caja { display: flex; gap: .5rem; max-width: 640px; margin-bottom: .75rem; }
.buscar-caja input {
    flex: 1; padding: .55rem .8rem; border: 1px solid var(--borde);
    border-radius: 20px; font-size: .95rem;
}
.buscar-caja button {
    padding: .55rem 1.1rem; background: var(--verde); color: #fff; border: none;
    border-radius: 20px; cursor: pointer; font-size: .9rem;
}
.buscar-caja button:disabled { opacity: .5; cursor: default; }

.buscar-aviso {
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
    padding: .5rem .7rem; border-radius: 5px; font-size: .83rem; max-width: 640px;
}
.buscar-total { color: var(--texto-suave); font-size: .85rem; }
.buscar-total .literal { color: var(--aviso); }

.resultados { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.resultados li { border-bottom: 1px solid var(--borde); }
.resultados a { display: block; padding: .7rem .2rem; text-decoration: none; color: inherit; }
.resultados a:hover { background: #f7f7f7; }

.res-cabeza { display: flex; justify-content: space-between; align-items: baseline; }
.res-cabeza .quien { font-weight: 600; font-size: .9rem; }
.res-cabeza .cuando { font-size: .75rem; color: var(--texto-suave); }
.res-texto { font-size: .88rem; margin: .2rem 0; }
.res-texto .dir { color: var(--texto-suave); }
.res-texto mark { background: #fff3a3; padding: 0 .1em; }
.res-pie { display: flex; gap: .8rem; font-size: .73rem; color: var(--texto-suave); }
.res-pie .origen { font-style: italic; opacity: .8; }

.exportar {
    background: none; border: 1px solid var(--borde); border-radius: 4px;
    padding: .2rem .55rem; font-size: .75rem; cursor: pointer; color: var(--texto-suave);
    text-decoration: none;
}
.exportar:hover { background: #fff; }