/* ==========================================================================
   Mini App de correo · NEXO — sistema visual único
   Fuente de la marca: _docs/design.md (RentalMe).

   TOKENS (todo se define una sola vez en :root; el resto del CSS y app.js solo
   usan var(--…) y clases, sin colores sueltos):
   - Marca:      --azul #3B82F6 · --azul-hover #2563EB · --azul-suave #DCE7FE
                 · --azul-caja #EEF3FF · --navy #1E293B
   - Semánticos: --verde #22C55E · --rojo #E11D48
   - Neutros:    --texto #16202E · --gris #5B6B7A · --linea #E2E8F0
   - Tema:       fondo/texto/gris siguen a Telegram (--tg-theme-*) si existe;
                 el ACENTO (botones, enlaces, pestaña activa, insignias) es
                 siempre el azul de marca. Claro/oscuro con light-dark() según
                 `color-scheme` (app.js pone data-tema con el de Telegram; sin
                 Telegram manda el del navegador).
   - Tipografía: DM Sans (Google Fonts, display=swap) con fallback del sistema;
                 base 15px / 1.5.
   - Radios:     --r-lg 16px (contenedores) · --r-sm 12px (pequeños) · --r-pill
   - Espaciado:  --e1 4 · --e2 8 · --e3 12 · --e4 16 · --e5 24 · --e6 40
   - Táctil:     --tactil 44px (alto mínimo de lo pulsable)
   - Negocios:   --neg-<clave> por clase .neg-<clave> (rentalme, konk, sinforosa,
                 progestia, inmoglobal, rentiglobal, homeme, heritage, clicklead,
                 grupomall, otros); el chip usa el color al 14 % de fondo y al 100 % de texto.
   Componentes: .cab · .pestanas · .seccion/.sec-tit/.cuenta · .lista/.fila ·
   .etq (+ .neg-*, .alta, .tipo) · .btn (.btn-pri .btn-sec .btn-pel) ·
   .vacio-msg · .cargando · .error · .hoja · .aviso-flotante
   ========================================================================== */

:root {
  color-scheme: light dark;
  --tema-ancho: 720px;

  /* marca */
  --azul: #3B82F6;
  --azul-hover: #2563EB;
  --azul-suave: light-dark(#DCE7FE, #1E3A8A);
  --azul-caja: light-dark(#EEF3FF, #172554);
  --navy: #1E293B;
  --verde: #22C55E;
  --rojo: #E11D48;
  --sobre-azul: #ffffff;

  /* tema (Telegram manda en fondo y texto si está) */
  --fondo: var(--tg-theme-bg-color, light-dark(#ffffff, #0F172A));
  --fondo2: var(--tg-theme-secondary-bg-color, light-dark(#F6F8FB, #1E293B));
  --texto: var(--tg-theme-text-color, light-dark(#16202E, #E8EEF6));
  --gris: var(--tg-theme-hint-color, light-dark(#5B6B7A, #94A3B8));
  --linea: light-dark(#E2E8F0, #334155);
  --velo: rgba(15, 23, 42, .45);

  /* tipografía */
  --fuente: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-base: 15px;
  --t-peq: 13px;
  --t-mini: 11px;
  --t-tit: 20px;

  /* radios y espaciado */
  --r-lg: 16px;
  --r-sm: 12px;
  --r-pill: 999px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 40px;
  --tactil: 44px;

  /* negocios */
  --neg-rentalme: #3B82F6;
  --neg-konk: #D97706;
  --neg-sinforosa: #9333EA;
  --neg-progestia: #0D9488;
  --neg-inmoglobal: #6366F1;
  --neg-rentiglobal: #0891B2;
  --neg-homeme: #16A34A;
  --neg-heritage: #A16207;
  --neg-clicklead: #DB2777;
  /* Grupo Mall: verde oliva en claro y lima en oscuro (el punto/tinte del chip
     tiene contraste con el fondo en ambos temas; el texto del chip usa --texto). */
  --neg-grupomall: light-dark(#4D7C0F, #A3E635);
  --neg-otros: #64748B;
}
/* Respaldo para WebViews sin light-dark() (Chrome < 123, Safari < 17.5): tema claro fijo;
   dentro de Telegram mandan igualmente las variables --tg-theme-*. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --azul-suave: #DCE7FE; --azul-caja: #EEF3FF;
    --fondo: var(--tg-theme-bg-color, #ffffff);
    --fondo2: var(--tg-theme-secondary-bg-color, #F6F8FB);
    --texto: var(--tg-theme-text-color, #16202E);
    --gris: var(--tg-theme-hint-color, #5B6B7A);
    --linea: #E2E8F0;
    --neg-grupomall: #4D7C0F;
  }
}
:root[data-tema="dark"] { color-scheme: dark; }
:root[data-tema="light"] { color-scheme: light; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font: var(--t-base)/1.5 var(--fuente);
  background: var(--fondo);
  color: var(--texto);
  padding-bottom: 96px;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}
#vista { max-width: var(--tema-ancho); margin: 0 auto; }
button { font-family: inherit; }
b { font-weight: 650; }

/* --- cabecera --- */
.cab {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fondo) 90%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--linea);
  padding: var(--e2) max(var(--e4), calc((100% - var(--tema-ancho)) / 2 + var(--e4)));
  display: flex; align-items: center; gap: var(--e2); min-height: 56px;
}
.cab h1 {
  font-size: 18px; font-weight: 700; line-height: 1.2; margin: 0; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cab .sub { display: block; font-size: var(--t-peq); color: var(--gris); font-weight: 400; margin-top: 2px; }
.atras {
  background: var(--azul-caja); border: 0; color: var(--azul); font-size: var(--t-base);
  font-weight: 600; min-height: var(--tactil); padding: 0 var(--e3);
  border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; gap: var(--e1);
}
.atras:active { background: var(--azul-suave); }

/* --- buscador --- */
.buscador { padding: var(--e3) var(--e4) var(--e1); }
.buscador input {
  width: 100%; min-height: var(--tactil); padding: var(--e3) var(--e4); font: inherit; font-size: 16px;
  border: 1px solid var(--linea); border-radius: var(--r-sm);
  background: var(--fondo2); color: var(--texto); outline: none;
}
.buscador input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.buscador input::placeholder { color: var(--gris); }

/* --- tarjeta / sección con título y contador --- */
.seccion { padding: var(--e1) var(--e4) var(--e2); }
.seccion h2 {
  font-size: var(--t-peq); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gris); margin: var(--e5) 0 var(--e2);
  display: flex; align-items: center; gap: var(--e2);
}
.seccion h2 .cuenta {
  background: var(--azul-caja); color: var(--azul); border-radius: var(--r-pill);
  padding: 1px var(--e2); font-size: 12px; letter-spacing: 0; font-weight: 700;
}
.lista {
  background: var(--fondo2); border: 1px solid var(--linea);
  border-radius: var(--r-lg); overflow: hidden;
}
.pie {
  text-align: center; color: var(--gris); font-size: 12px; padding: var(--e4) 0;
}

/* --- fila de correo --- */
.fila {
  display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4);
  min-height: 60px; border-bottom: 1px solid var(--linea); cursor: pointer;
  transition: background .12s, opacity .2s;
}
.fila:last-child { border-bottom: 0; }
.fila:active { background: var(--azul-caja); }
.fila.hecho { opacity: .4; }
.fila .cuerpo { flex: 1; min-width: 0; }
/* El texto se corta con puntos suspensivos, pero las etiquetas de al lado
   (📎, ×17, «alta») no se encogen ni se parten: el texto va en .txt con
   min-width:0 y ellas con flex:0 0 auto. */
.fila .rem {
  font-size: var(--t-peq); color: var(--gris);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fila .t1 {
  font-weight: 500; display: flex; align-items: baseline; gap: var(--e2);
}
.fila .t1 > .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .t1 > :not(.txt) { flex: 0 0 auto; }
.fila .t2 {
  font-size: var(--t-peq); color: var(--gris); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fila .extracto {
  font-size: var(--t-peq); color: var(--gris); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.fila .meta-fila { display: flex; gap: var(--e2); align-items: center; margin-top: var(--e1); flex-wrap: wrap; }
.fila.nol .rem { color: var(--texto); font-weight: 650; }
.fila.nol .t1 { font-weight: 650; }
/* flex-shrink:0: sin esto la hora y la insignia se encogen antes que el texto. */
.fila .fin {
  color: var(--gris); font-size: 12px; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--e1); flex: 0 0 auto;
}
.fila .chevron { color: var(--gris); opacity: .6; font-size: 20px; flex: 0 0 auto; }
.estrella { color: #F59E0B; font-size: 14px; line-height: 1; }

.punto { width: 10px; height: 10px; border-radius: 50%; background: var(--azul); flex: 0 0 10px; }
.punto.vacio { background: transparent; border: 1.5px solid var(--linea); }
.glob {
  background: var(--azul); color: var(--sobre-azul); border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; padding: 2px var(--e2); min-width: 24px; text-align: center;
}
.glob.gris { background: var(--azul-caja); color: var(--gris); }
.glob.rojo { background: var(--rojo); color: #fff; }
.emoji { font-size: 22px; width: 28px; text-align: center; flex: 0 0 28px; }

/* --- chips / etiquetas --- */
.etq {
  display: inline-flex; align-items: center; font-size: var(--t-mini); font-weight: 700;
  padding: 2px var(--e2); border-radius: var(--r-pill); line-height: 1.4;
  background: var(--azul-caja); color: var(--gris);
  text-transform: uppercase; letter-spacing: .03em;
}
.etq.alta { background: color-mix(in srgb, var(--rojo) 14%, transparent); color: var(--rojo); }
.etq.tipo { background: var(--azul-caja); color: var(--azul); }
.etq.sin-verificar { background: color-mix(in srgb, var(--rojo) 14%, transparent); color: var(--texto); }
.fila.lead-web { box-shadow: inset 3px 0 0 var(--azul); }
/* Seguimiento: «Sin responder · N d». Azul a las 24 h; rojo a las 72 h. */
.etq.sin-resp { background: color-mix(in srgb, var(--azul) 16%, transparent); color: var(--texto); }
.etq.sin-resp.rojo { background: var(--rojo); color: #fff; }
.fila.sin-resp { box-shadow: inset 3px 0 0 var(--azul); }
.fila.sin-resp:has(.etq.sin-resp.rojo) { box-shadow: inset 3px 0 0 var(--rojo); }
.ya-esta {
  font: inherit; font-size: var(--t-mini); font-weight: 700; cursor: pointer;
  padding: 2px var(--e2); border-radius: var(--r-pill); border: 1px solid var(--azul);
  background: transparent; color: var(--azul); margin-left: var(--e1);
}
/* Etiquetas del correo (origen, sin verificar, sin responder…): fila propia que
   salta de línea, para no montarse sobre la hora ni sobre el ⋯. */
.fila .etqs { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); align-items: center; margin-top: var(--e1); }
.fila .etqs .etq { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .etqs .ya-esta { margin-left: 0; }
.ya-esta:active { opacity: .65; }
.ya-esta:disabled { opacity: .4; }
.sin-responder-cab {
  display: flex; align-items: center; gap: var(--e2); margin: var(--e3) var(--e4) 0;
  padding: var(--e2) var(--e3); border-radius: var(--r-sm);
  background: var(--azul-caja); font-size: var(--t-peq); font-weight: 700;
}
.sin-responder-cab .emoji { font-size: 16px; width: auto; flex: 0 0 auto; }
.sin-responder-cab .cuenta {
  margin-left: var(--e2); background: var(--azul); color: var(--sobre-azul);
  border-radius: var(--r-pill); padding: 1px var(--e2); font-size: 12px;
}
.sin-responder-cab.rojo .cuenta { background: var(--rojo); color: #fff; }
/* «Lead web»: de qué web viene. Texto con el color de la interfaz sobre un tinte azul. */
.etq.origen { background: color-mix(in srgb, var(--azul) 16%, transparent); color: var(--texto); }
/* Texto con el color de la interfaz (contraste suficiente en claro y oscuro) y el
   color del negocio solo en un punto: el color puro sobre su propio tinte no llega a 4,5:1. */
.etq[class*="neg-"] {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--texto);
}
.etq[class*="neg-"]::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px;
  border-radius: 50%; background: var(--c); vertical-align: 1px;
}
.neg-rentalme { --c: var(--neg-rentalme); }
.neg-konk { --c: var(--neg-konk); }
.neg-sinforosa { --c: var(--neg-sinforosa); }
.neg-progestia { --c: var(--neg-progestia); }
.neg-inmoglobal { --c: var(--neg-inmoglobal); }
.neg-rentiglobal { --c: var(--neg-rentiglobal); }
.neg-homeme { --c: var(--neg-homeme); }
.neg-heritage { --c: var(--neg-heritage); }
.neg-clicklead { --c: var(--neg-clicklead); }
.neg-grupomall { --c: var(--neg-grupomall); }
.neg-otros { --c: var(--neg-otros); }

/* --- filtro de empresa en «Hoy»: chips con scroll horizontal --- */
.chips-negocio {
  display: flex; gap: var(--e2); overflow-x: auto; padding: var(--e3) var(--e4);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chips-negocio::-webkit-scrollbar { display: none; }
.chip-neg {
  flex: 0 0 auto; min-height: var(--tactil); padding: 0 var(--e4);
  display: inline-flex; align-items: center; gap: var(--e2);
  background: var(--fondo2); color: var(--texto); border: 1px solid var(--linea);
  border-radius: var(--r-pill); font-size: 14px; font-weight: 600; cursor: pointer;
}
.chip-neg::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--azul));
}
.chip-neg .n { color: var(--gris); font-size: 12px; font-weight: 700; }
.chip-neg.on {
  background: color-mix(in srgb, var(--c, var(--azul)) 16%, transparent);
  border-color: var(--c, var(--azul)); box-shadow: 0 0 0 1px var(--c, var(--azul)) inset;
}
.chip-neg.on .n { color: var(--texto); }
.chip-neg:active { opacity: .65; }

/* --- «Otros por revisar»: sección colapsada al final de Hoy --- */
details.otros { margin-top: var(--e5); }
details.otros > summary {
  list-style: none; cursor: pointer; min-height: var(--tactil);
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-peq); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gris);
}
details.otros > summary::-webkit-details-marker { display: none; }
details.otros > summary::before { content: "›"; font-size: 18px; transition: transform .15s; }
details.otros[open] > summary::before { transform: rotate(90deg); }
details.otros > summary .cuenta {
  background: var(--azul-caja); color: var(--azul); border-radius: var(--r-pill);
  padding: 1px var(--e2); font-size: 12px; letter-spacing: 0; font-weight: 700;
}

/* --- tipos a medida (config/<INSTANCIA>/tipos.json): color propio --tc --- */
.sec-tipo { --tc: var(--azul); }
.sec-tipo h2 { border-left: 3px solid var(--tc); padding-left: var(--e2); }
.sec-tipo .lista { border-left: 3px solid var(--tc); }
/* El título puede partirse en varias líneas; contador e insignia no se parten ni se
   encogen (si no, «requiere acción» se rompía en dos líneas y descuadraba la cabecera). */
.seccion h2 .tit { min-width: 0; overflow-wrap: anywhere; }
.seccion h2 .cuenta, .sec-tipo h2 .etq.accion { flex: 0 0 auto; white-space: nowrap; }
.sec-tipo h2 .etq.accion {
  margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600;
  background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--texto);
}
.chips-tipo { padding-top: 0; }
.chip-tipo {
  flex: 0 0 auto; min-height: var(--tactil); padding: 0 var(--e4);
  display: inline-flex; align-items: center; gap: var(--e2);
  background: transparent; color: var(--texto); border: 1px solid var(--linea);
  border-radius: var(--r-pill); font-size: 14px; font-weight: 500; cursor: pointer;
  --tc: var(--azul);
}
.chip-tipo .emoji { font-size: 15px; }
.chip-tipo .n { color: var(--gris); font-size: 12px; font-weight: 700; }
.chip-tipo.suave { color: var(--gris); }
.chip-tipo.on {
  background: color-mix(in srgb, var(--tc) 16%, transparent);
  border-color: var(--tc); box-shadow: 0 0 0 1px var(--tc) inset; color: var(--texto);
}
.chip-tipo:active { opacity: .65; }
details.plegado-tipo { --tc: var(--gris); }
details.plegado-tipo > summary .emoji { font-size: 15px; }
details.plegado-tipo[open] > .lista { border-left: 3px solid var(--tc); }

/* --- estados: vacío, cargando, error --- */
.vacio-msg { text-align: center; color: var(--gris); padding: var(--e6) var(--e5); }
.vacio-msg .grande { font-size: 44px; display: block; margin-bottom: var(--e3); }
.vacio-msg.compacto { padding: var(--e5); }
.cargando { text-align: center; padding: var(--e6); color: var(--gris); }
.spinner {
  width: 24px; height: 24px; border: 3px solid var(--azul-suave);
  border-top-color: var(--azul); border-radius: 50%; margin: 0 auto var(--e3);
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.error {
  background: color-mix(in srgb, var(--rojo) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--rojo) 30%, transparent);
  color: var(--rojo); padding: var(--e3) var(--e4); border-radius: var(--r-sm);
  margin: var(--e4); font-size: 14px;
}

/* --- ficha del correo --- */
.ficha { padding: var(--e4); }
.ficha .asunto { font-size: var(--t-tit); font-weight: 700; line-height: 1.3; margin: 0 0 var(--e3); }
.ficha .meta { color: var(--gris); font-size: var(--t-peq); margin-bottom: var(--e1); }
.ficha .meta.sep { margin-top: var(--e2); }
.ficha .cuerpo-txt {
  white-space: pre-wrap; word-break: break-word; margin-top: var(--e4);
  padding: var(--e4); background: var(--fondo2); border: 1px solid var(--linea);
  border-radius: var(--r-lg); font-size: var(--t-base);
}
.tenue { color: var(--gris); }
.adjunto {
  display: flex; align-items: center; gap: var(--e3); background: var(--azul-caja);
  border-radius: var(--r-sm); padding: var(--e3) var(--e4); margin-top: var(--e2); font-size: 14px;
}
.adjunto .datos { flex: 1; min-width: 0; word-break: break-word; }
.adjunto .peso { color: var(--gris); font-size: 12px; }

/* --- botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e1);
  min-height: var(--tactil); padding: 0 var(--e4); border: 0; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 650; cursor: pointer; flex: 1;
  background: var(--azul-caja); color: var(--azul);
}
.btn:active { opacity: .65; }
.btn-pri { background: var(--azul); color: var(--sobre-azul); }
.btn-pri:active { background: var(--azul-hover); opacity: 1; }
.btn-sec { background: var(--fondo2); color: var(--texto); border: 1px solid var(--linea); }
.btn-pel { background: color-mix(in srgb, var(--rojo) 12%, transparent); color: var(--rojo); }
.paginacion { display: flex; gap: var(--e2); margin: var(--e4) 0; }

/* --- barra de acciones del correo --- */
.acciones {
  position: fixed; left: 50%; transform: translateX(-50%); width: min(100%, var(--tema-ancho));
  bottom: 0; z-index: 30; display: flex; gap: var(--e2);
  padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fondo) 94%, transparent);
  backdrop-filter: blur(18px); border-top: 1px solid var(--linea);
}
.acciones .btn { flex-direction: column; gap: 2px; padding: var(--e2) var(--e1); min-height: 52px; font-size: 12px; }
.acciones .ic { font-size: 18px; line-height: 1; }

/* --- pestañas de abajo --- */
.pestanas {
  position: fixed; left: 50%; transform: translateX(-50%); width: min(100%, var(--tema-ancho));
  bottom: 0; z-index: 25; display: flex;
  background: color-mix(in srgb, var(--fondo) 94%, transparent);
  backdrop-filter: blur(18px); border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.pestanas button {
  flex: 1; background: none; border: 0; min-height: 56px; padding: var(--e2) var(--e1); cursor: pointer;
  color: var(--gris); font-size: var(--t-mini); font-weight: 600; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; position: relative;
}
.pestanas button.on { color: var(--azul); }
.pestanas button.on::before {
  content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px;
  background: var(--azul); border-radius: 0 0 3px 3px;
}
.pestanas button .ic { font-size: 20px; line-height: 1.1; }
.pestanas button .pip {
  position: absolute; top: 4px; right: 50%; transform: translateX(22px);
  background: var(--rojo); color: #fff; border-radius: var(--r-pill); font-size: 10px;
  font-weight: 700; padding: 1px 5px; min-width: 16px; text-align: center;
}

/* --- aviso flotante y hoja inferior --- */
/* indicador de «Actualizado hace X» (tiempo real) */
.act {
  max-width: var(--tema-ancho); margin: 0 auto; padding: 2px var(--e4);
  display: flex; justify-content: flex-end; align-items: center; gap: var(--e2);
  font-size: var(--t-mini); color: var(--gris); min-height: 22px;
}
.act .act-btn {
  background: none; border: 0; color: var(--gris); font-size: 16px; line-height: 1;
  min-width: 28px; min-height: 28px; cursor: pointer;
}
.act.act-on .act-btn { animation: act-gira 1s linear infinite; }
.act.act-fallo { color: var(--rojo); }
@keyframes act-gira { to { transform: rotate(360deg); } }
.aviso-flotante {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; padding: var(--e3) var(--e4);
  border-radius: var(--r-pill); font-size: 14px; z-index: 60; opacity: 0;
  transition: opacity .2s; pointer-events: none; max-width: 88%; text-align: center;
}
.aviso-flotante.ver { opacity: .96; }
.hoja {
  position: fixed; inset: 0; z-index: 50; background: var(--velo);
  display: flex; align-items: flex-end; justify-content: center;
}
.hoja .panel {
  background: var(--fondo); width: 100%; max-width: var(--tema-ancho);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--e2) 0 calc(var(--e4) + env(safe-area-inset-bottom)); max-height: 72vh;
  overflow: auto;
}
.hoja h3 { margin: var(--e3) var(--e4); font-size: 16px; font-weight: 700; }
.hoja .lista { margin: 0 var(--e4); }

/* --- menú ⋯ de cada fila --- */
.fila .mas-fila {
  flex: 0 0 auto; min-width: var(--tactil); min-height: var(--tactil);
  margin: calc(var(--e3) * -1) calc(var(--e3) * -1) calc(var(--e3) * -1) 0;
  border: 0; background: none; color: var(--gris); font-size: 22px; font-weight: 700;
  line-height: 1; cursor: pointer; border-radius: var(--r-sm);
}
.fila .mas-fila:active { background: var(--azul-caja); color: var(--azul); }
.hoja .fila { min-height: var(--tactil); }
.hoja .fila.peligro .t1 { color: var(--rojo); }

/* --- aviso con acción (Deshacer) --- */
.aviso-flotante.accion { pointer-events: auto; display: flex; align-items: center; gap: var(--e3); }
.aviso-flotante .deshacer {
  min-height: var(--tactil); padding: 0 var(--e3); border: 0; background: none;
  color: var(--azul-suave); font: inherit; font-weight: 700; cursor: pointer;
}

/* --- responder --- */
.resp { padding: var(--e4); }
.resp .meta { color: var(--gris); font-size: var(--t-peq); margin-bottom: var(--e2); }
.resp .campo { display: block; margin-top: var(--e3); font-size: var(--t-peq); color: var(--gris); font-weight: 600; }
.resp input, .resp textarea, .resp select {
  display: block; width: 100%; margin-top: var(--e1); padding: var(--e3);
  min-height: var(--tactil); font: inherit; font-size: var(--t-base); color: var(--texto);
  background: var(--fondo2); border: 1px solid var(--linea); border-radius: var(--r-sm);
  box-sizing: border-box;
}
.resp textarea { resize: vertical; line-height: 1.5; }
.resp input:focus, .resp textarea:focus, .resp select:focus { outline: 0; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.resp .nota-resp {
  background: var(--azul-caja); border-radius: var(--r-sm); padding: var(--e3);
  font-size: var(--t-peq); margin-bottom: var(--e2);
}
.resp .otra-ia { margin-top: var(--e3); }
.resp .otra-ia summary { min-height: var(--tactil); display: flex; align-items: center; color: var(--azul); font-weight: 600; cursor: pointer; }
.resp .otra-ia .btn { margin-top: var(--e2); width: 100%; }
.resp .pie-resp { min-height: 20px; margin-top: var(--e2); font-size: var(--t-peq); }
.resp .error { margin: var(--e3) 0 0; }
.resp-botones { display: flex; gap: var(--e2); margin-top: var(--e4); }
.ficha .resp-botones .btn { flex-direction: column; gap: 2px; padding: var(--e2); min-height: 52px; }
.btn:disabled { opacity: .5; cursor: default; }
.confirmar { padding: var(--e2) var(--e4) 0; display: grid; gap: var(--e2); font-size: 14px; word-break: break-word; }
.confirmar .tenue { display: inline-block; min-width: 54px; font-size: var(--t-peq); }
.vista-previa {
  margin: var(--e1) 0 0; padding: var(--e3); white-space: pre-wrap; font: inherit; font-size: var(--t-peq);
  background: var(--fondo2); border: 1px solid var(--linea); border-radius: var(--r-sm);
  max-height: 30vh; overflow: auto;
}

/* --- adjuntos tocables y visor a pantalla completa --- */
.adjunto.toca { cursor: pointer; min-height: var(--tactil); }
.adjunto.toca:active { opacity: .65; }
.act .act-salir {
  background: none; border: 0; color: var(--azul); font-size: var(--t-peq); font-weight: 600;
  min-height: 28px; padding: 0 var(--e2); cursor: pointer;
}
.visor {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  background: var(--fondo);
}
.visor-cab {
  display: flex; align-items: center; gap: var(--e2); min-height: 56px;
  padding: var(--e2) var(--e4); padding-top: max(var(--e2), env(safe-area-inset-top));
  border-bottom: 1px solid var(--linea);
}
.visor-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.visor-btn {
  min-height: var(--tactil); padding: 0 var(--e4); border: 0; border-radius: var(--r-sm);
  background: var(--azul-caja); color: var(--azul); font-size: 14px; font-weight: 650; cursor: pointer;
}
.visor-cerrar { background: var(--azul); color: var(--sobre-azul); min-width: var(--tactil); padding: 0; }
.visor-cuerpo { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; background: var(--fondo2); }
.visor-cuerpo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor-cuerpo iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.visor-peso { color: var(--gris); font-size: 12px; white-space: nowrap; }
.visor-estado {
  display: flex; flex-direction: column; align-items: center; gap: var(--e3);
  width: min(86vw, 360px); padding: var(--e5); text-align: center;
}
.visor-texto { margin: 0; font-size: 14px; color: var(--gris); word-break: break-word; }
.visor-estado.error .visor-texto { color: var(--texto); }
.visor-acciones { display: flex; gap: var(--e2); justify-content: center; flex-wrap: wrap; }
.visor-barra { width: 100%; height: 6px; border-radius: 3px; background: var(--azul-caja); overflow: hidden; }
.visor-barra i { display: block; height: 100%; width: 0; background: var(--azul); transition: width .15s linear; }
.visor-barra.indeterminada i { width: 40%; animation: visor-vaiven 1.1s ease-in-out infinite alternate; }
@keyframes visor-vaiven { from { margin-left: 0; } to { margin-left: 60%; } }
@media (prefers-reduced-motion: reduce) {
  .visor-barra.indeterminada i { animation: none; width: 100%; }
  .visor-barra i { transition: none; }
}
@media (min-width: 900px) { .visor-cuerpo img { max-width: 92%; } }

/* --- acceso web con contraseña --- */
.login-pagina { padding: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login {
  width: min(92vw, 380px); padding: var(--e5); background: var(--fondo2);
  border: 1px solid var(--linea); border-radius: var(--r-lg);
}
.login h1 { margin: 0 0 var(--e1); font-size: var(--t-tit); font-weight: 700; }
.login p { margin: 0 0 var(--e4); }
.login form { display: flex; flex-direction: column; gap: var(--e3); }
.login-campo {
  min-height: var(--tactil); padding: 0 var(--e4); border-radius: var(--r-sm);
  border: 1px solid var(--linea); background: var(--fondo); color: var(--texto);
  font: inherit; font-size: 16px;
}
.login-campo:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
.login .login-error {
  color: var(--rojo); font-size: var(--t-peq); margin: 0; padding: var(--e2) var(--e3);
  border: 1px solid var(--rojo); border-radius: var(--r-sm); text-align: center;
  background: color-mix(in srgb, var(--rojo) 9%, transparent);
}
.login-tema .login { box-sizing: border-box; text-align: center; padding: var(--e5) var(--e5) calc(var(--e5) + env(safe-area-inset-bottom)); }
.login-tema::before { display: none !important; }   /* el tema pone el nombre arriba: aquí va en la tarjeta */
.login-tema .login-logo { display: block; max-width: 70%; max-height: 56px; margin: 0 auto var(--e3); object-fit: contain; }
.login-solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.login-tema .login .btn { width: 100%; }

/* --- identidades, plantillas, redactar y reenviar (solo si la instancia las activa) --- */
.resp select { appearance: auto; }
.resp .sec-peq { margin: var(--e5) 0 var(--e2); font-size: var(--t-peq); color: var(--gris); font-weight: 700; }
.resp .lista { margin-top: var(--e2); }
.resp .btn:disabled { opacity: .5; }
.chips-var { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); }
.chips-var .btn { flex: 0 0 auto; min-height: 36px; padding: 0 var(--e3); font-size: var(--t-peq); }
.vista-completa { max-height: 36vh; }

/* ==========================================================================
   ESCRITORIO (≥ 1024 px) y tablet (700-1023 px)
   Regla de oro: TODO lo del layout ancho vive dentro de
   `@media (min-width: 1024px)`. Fuera solo está el ocultar la barra lateral y
   el panel de lectura (display:none), para que el móvil quede EXACTAMENTE como
   estaba. Nada depende del user-agent. Test: tests/test_escritorio.py.
   Tres zonas: .lateral (220 px) · #vista (lista, 400 px, scroll propio) ·
   .lectura (resto, texto a 860 px máx.).
   ========================================================================== */
.lateral, .lectura { display: none; }

/* Tablet: una columna centrada como en móvil; las barras fijas no pasan del
   ancho del contenido. */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .pestanas, .acciones { width: min(100%, var(--tema-ancho)); }
}

@media (min-width: 1024px) {
  html, body { height: 100%; }
  body {
    display: grid; height: 100vh; height: 100dvh; overflow: hidden;
    grid-template-columns: 220px 400px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    padding: 0 !important;
  }
  /* el nombre/logo del tema va en la barra lateral, no como pseudo-elemento suelto */
  html body::before { display: none; }
  #pestanas { display: none !important; }

  /* --- barra lateral --- */
  .lateral {
    grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column;
    min-height: 0; overflow-y: auto; padding: var(--e4) var(--e3);
    background: var(--fondo2); border-right: 1px solid var(--linea);
  }
  .lat-marca {
    min-height: 40px; padding: var(--e1) var(--e2) var(--e4); display: flex; align-items: center;
    font-family: var(--fuente-titulares, var(--fuente)); font-size: 20px; font-weight: 600;
    line-height: 1.2; color: var(--texto); overflow-wrap: anywhere;
  }
  .lat-marca.con-logo { height: 56px; background: var(--tema-logo) left center / contain no-repeat; font-size: 0; }
  .lat-nav { display: flex; flex-direction: column; gap: 2px; }
  .lat-item, .lat-neg, .lat-pie button {
    display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 40px;
    padding: 0 var(--e3); border: 0; border-radius: var(--r-sm); background: none;
    color: var(--texto); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  }
  .lat-item .ic { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; color: var(--gris); }
  .lat-item .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round; }
  .lat-item .lat-txt, .lat-neg .lat-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lat-item:hover, .lat-neg:hover, .lat-pie button:hover { background: var(--azul-caja); }
  .lat-item.on { background: var(--azul-caja); font-weight: 650; box-shadow: inset 3px 0 0 var(--azul); }
  .lat-item.on .ic { color: var(--azul); }
  .lat-item .pip {
    background: var(--rojo); color: #fff; border-radius: var(--r-pill); font-size: 11px;
    font-weight: 700; padding: 1px 6px; min-width: 18px; text-align: center;
  }
  .lat-sec { margin-top: var(--e5); }
  .lat-sec h2 {
    margin: 0 0 var(--e2); padding: 0 var(--e3); font-size: var(--t-mini); font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em; color: var(--gris);
  }
  .lat-neg { min-height: 36px; font-size: 13.5px; }
  .lat-neg::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--c, var(--azul));
  }
  .lat-neg .n { color: var(--gris); font-size: 12px; font-weight: 700; }
  .lat-neg[aria-pressed="true"] {
    background: color-mix(in srgb, var(--c, var(--azul)) 14%, transparent); font-weight: 650;
    box-shadow: inset 0 0 0 1px var(--c, var(--azul));
  }
  .lat-pie { margin-top: auto; padding-top: var(--e4); display: flex; flex-direction: column; gap: 2px; }
  .lat-pie button { color: var(--gris); font-size: 13px; min-height: 36px; }
  .lat-pie kbd { margin-left: auto; }

  /* --- columna central: cabecera, estado y lista con scroll propio --- */
  .cab { grid-column: 2; grid-row: 1; padding: var(--e2) var(--e4); border-right: 1px solid var(--linea); }
  #act { grid-column: 2; grid-row: 2; max-width: none; margin: 0; border-right: 1px solid var(--linea); }
  #vista {
    grid-column: 2; grid-row: 3; max-width: none; margin: 0; min-height: 0; overflow-y: auto;
    overscroll-behavior: contain; border-right: 1px solid var(--linea);
  }
  .act .act-salir { display: none; }                    /* «Salir» vive en la barra lateral */
  .chips-negocio:not(.chips-tipo) { display: none; }    /* el filtro de empresa vive en la barra lateral */
  #vista .seccion { padding-left: var(--e3); padding-right: var(--e3); }
  #vista .fila { padding: var(--e3); min-height: 56px; }
  #vista .fila .fin { font-size: 11.5px; }
  #vista .fila:hover { background: var(--azul-caja); }
  #vista .lista .fila.sel { background: var(--azul-caja); box-shadow: inset 3px 0 0 var(--azul); }
  #vista .lista .fila.cur { outline: 1px solid var(--azul); outline-offset: -1px; }

  /* --- panel de lectura --- */
  .lectura {
    grid-column: 3; grid-row: 1 / -1; display: flex; flex-direction: column;
    min-width: 0; min-height: 0; overflow: hidden; background: var(--fondo);
  }
  .lectura:focus { outline: none; }
  .lectura-barra {
    flex: 0 0 auto; min-height: 56px; display: flex; align-items: center; gap: var(--e2);
    flex-wrap: wrap; padding: var(--e2) var(--e5); border-bottom: 1px solid var(--linea);
    background: color-mix(in srgb, var(--fondo) 92%, transparent);
  }
  .lectura-barra:empty { display: none; }
  .lectura-barra .btn { flex: 0 0 auto; min-height: 36px; padding: 0 var(--e3); font-size: 13px; }
  .lectura-barra .btn .ic { display: inline-flex; align-items: center; }
  .lectura-barra .btn .ic .ic-svg { width: 16px; height: 16px; }
  .lectura-barra .sep { flex: 1; }
  .lb-tit { font-family: var(--fuente-titulares, var(--fuente)); font-size: 18px; font-weight: 600; margin-right: auto; }
  .lectura-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .lectura-cuerpo > * { max-width: 860px; margin-left: auto; margin-right: auto; }
  .lectura-cuerpo .ficha, .lectura-cuerpo .resp { padding: var(--e5) var(--e5) var(--e6); }
  .lectura-cuerpo .ficha .asunto { font-size: 28px; line-height: 1.25; }
  .lec-rem { font-size: var(--t-base); }
  .lectura-cuerpo .acciones {
    position: sticky; bottom: 0; left: auto; transform: none; width: auto; z-index: 5;
    padding: var(--e3) var(--e5);
  }
  .lectura-cuerpo .acciones .btn { flex-direction: row; min-height: 44px; font-size: 14px; }
  .lectura-cuerpo .resp textarea { min-height: 320px; }
  .lectura-cuerpo .cargando, .lectura-cuerpo .error { margin-top: var(--e6); }
  .lectura-vacio {
    min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: var(--gris); padding: var(--e6); max-width: none !important;
  }
  .lectura-vacio .lv-ic { width: 48px; height: 48px; margin-bottom: var(--e4); color: var(--gris); opacity: .7;
    fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
  .lectura-vacio .lv-tit {
    margin: 0 0 var(--e2); font-family: var(--fuente-titulares, var(--fuente)); font-size: 26px;
    font-weight: 600; color: var(--texto);
  }
  .lectura-vacio .lv-sub { margin: 0; font-size: var(--t-peq); }

  kbd {
    display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid var(--linea);
    border-bottom-width: 2px; border-radius: 5px; background: var(--fondo); color: var(--texto);
    font: 600 11px/1.5 var(--fuente); text-align: center;
  }

  /* --- foco visible --- */
  :focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
  #vista .fila:focus-visible { outline-offset: -2px; }

  /* --- avisos, hojas y visor --- */
  .aviso-flotante { bottom: 32px; left: calc(220px + (100% - 220px) / 2); }
  .hoja { align-items: center; }
  .hoja .panel { max-width: 520px; border-radius: var(--r-lg); padding-bottom: var(--e4); max-height: 80vh; }
  /* Visor de adjuntos: modal centrado (el velo es una sombra gigante del propio cuadro). */
  .visor {
    inset: 0; margin: auto; width: min(960px, 84vw); height: min(86vh, 920px);
    border: 1px solid var(--linea); border-radius: var(--r-lg); overflow: hidden;
    box-shadow: 0 0 0 100vmax var(--velo), 0 30px 80px -24px rgba(0, 0, 0, .5);
  }
  .visor-cuerpo img { max-width: 96%; }

  /* --- ayuda de atajos --- */
  .ayuda { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; background: var(--velo); }
  .ayuda-caja {
    width: min(480px, 90vw); max-height: 86vh; overflow: auto; padding: var(--e5);
    background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r-lg);
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .5);
  }
  .ayuda-caja h3 { margin: 0 0 var(--e4); font-family: var(--fuente-titulares, var(--fuente)); font-size: 22px; font-weight: 600; }
  .ayuda-caja dl { display: grid; grid-template-columns: auto 1fr; gap: var(--e2) var(--e4); margin: 0 0 var(--e4); font-size: 14px; }
  .ayuda-caja dt { white-space: nowrap; }
  .ayuda-caja dd { margin: 0; color: var(--gris); }
  .ayuda-caja .btn { width: 100%; }

  /* --- movimiento reducido --- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
    .spinner { animation-duration: 3s; }
    .act.act-on .act-btn { animation: none; }
  }
}

/* Vista previa del HTML exacto que sale (iframe sandbox sin scripts); fondo blanco: así lo ve el cliente de correo */
.vista-html {
  width: 100%; height: 38vh; min-height: 220px; border: 1px solid var(--linea);
  border-radius: var(--r-sm); background: #fff; color-scheme: light;
}