/* ═══════════════════════════════════════════════════════════════════════
   responsive_shell.css — Responsividad MOBILE del shell del portal RSP
   ───────────────────────────────────────────────────────────────────────
   Área: Shell/layout + nav + sidebar + bandeja (inbox) + búsqueda/filtros.

   REGLAS:
   - Se carga DESPUÉS del bundle Tailwind (theme/static/css/dist/styles.css)
     → por orden de cascada, en igualdad de especificidad gana este archivo.
   - Salvo la sección "FIX BASE" de abajo, TODA regla vive dentro de un bloque
     @media (max-width: …px): es mobile-only y NO toca el visual de PC.
   - Dentro de @media se usa !important para ganarle a las utilities de Tailwind
     (es seguro: solo aplica por debajo del breakpoint).
   - Hooks semánticos propios empiezan con prefijo `rsp-` (NO son utilities
     Tailwind; se agregan a los templates como gancho de CSS).
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   FIX BASE (NO mobile-only) — chips de "Filtros activos"
   ───────────────────────────────────────────────────────────────────────
   Las clases `active-filters / active-chip / active-chip-*` se referencian en
   inbox.html pero NO tenían NINGÚN CSS (se veían como links pelados, en PC y
   mobile). Esta es la ÚNICA excepción permitida a la regla mobile-only: es un
   fix de un bug pre-existente que mejora desktop + mobile. Estilo discreto,
   acorde a la marca (verde RSP via --color-primary).
   ─────────────────────────────────────────────────────────────────────── */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 24px;
  background: #f5f5f7;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.active-filters-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gl, #86868b);
  margin-right: 2px;
}
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none;
  color: var(--gd, #1d1d1f);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.active-chip:hover {
  border-color: rgba(0, 0, 0, .16);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.active-chip-key {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gl, #86868b);
}
.active-chip-val {
  font-weight: 500;
  color: var(--gd, #1d1d1f);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-chip-x {
  color: var(--gl, #86868b);
  font-size: 11px;
  line-height: 1;
}
.active-chip:hover .active-chip-x { color: var(--color-primary, #1e7d32); }
.active-chip-unread,
.active-chip-star {
  border-color: rgba(30, 125, 50, .25);
  background: var(--color-primary-light, #e9f4ec);
  color: var(--color-primary-dark, #155d24);
}
.active-chip-unread .active-chip-val,
.active-chip-star .active-chip-val { color: var(--color-primary-dark, #155d24); }
.active-chip-tag .active-chip-val {
  position: relative;
  padding-left: 12px;
}
.active-chip-tag .active-chip-val::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.active-chip-clearall {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-primary, #1e7d32);
  padding: 4px 8px;
  border-radius: 9999px;
  transition: background .12s ease;
}
.active-chip-clearall:hover { background: rgba(30, 125, 50, .08); }
.active-filters-count {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--gl, #86868b);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
[data-theme="dark"] .active-filters { background: #1d2226; border-bottom-color: #2a3035; }
[data-theme="dark"] .active-chip { background: #252b30; border-color: #383f45; color: #e8eaed; }
[data-theme="dark"] .active-chip-val { color: #e8eaed; }

/* ───────────────────────────────────────────────────────────────────────
   FIX BASE (NO mobile-only) — buscador (Fase 0): contador de resultados,
   resaltado de términos y placeholder del slot de adjunto.
   Clases planas (no utilities Tailwind) → no requieren recompilar el bundle.
   ─────────────────────────────────────────────────────────────────────── */
/* Contador "N resultados para «texto»" arriba de la lista. */
.search-results-count {
  padding: 8px 24px;
  font-size: 12.5px;
  color: var(--gl, #86868b);
  background: #fafafa;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.search-results-count strong {
  color: var(--gd, #1d1d1f);
  font-variant-numeric: tabular-nums;
}
.search-results-q { color: var(--gd, #1d1d1f); font-weight: 500; }
[data-theme="dark"] .search-results-count { background: #1d2226; border-bottom-color: #2a3035; color: #9aa3ab; }
[data-theme="dark"] .search-results-count strong,
[data-theme="dark"] .search-results-q { color: #e8eaed; }

/* Aviso anti-ruido: "N notificaciones ocultas — Mostrar". Link plano,
   CSP-safe (sin inline), discreto. Clase plana → no recompila Tailwind. */
.ruido-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 24px;
  font-size: 12.5px;
  color: var(--gl, #86868b);
  background: #fafafa;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.ruido-aviso:hover { background: #f2f2f4; color: var(--gd, #1d1d1f); }
.ruido-aviso strong { color: var(--gd, #1d1d1f); font-variant-numeric: tabular-nums; }
.ruido-aviso svg { flex-shrink: 0; color: var(--gl, #86868b); }
.ruido-aviso-cta {
  margin-left: auto;
  font-weight: 600;
  color: var(--color-primary, #1e7d32);
}
.ruido-aviso-on { background: var(--color-primary-light, #e9f4ec); color: var(--color-primary-dark, #155d24); }
.ruido-aviso-on strong, .ruido-aviso-on svg { color: var(--color-primary-dark, #155d24); }
[data-theme="dark"] .ruido-aviso { background: #1d2226; border-bottom-color: #2a3035; color: #9aa3ab; }
[data-theme="dark"] .ruido-aviso:hover { background: #232a30; color: #e8eaed; }
[data-theme="dark"] .ruido-aviso strong { color: #e8eaed; }

/* Resaltado de coincidencias (lo inyecta search_highlight.js). */
mark.search-hl {
  background: rgba(255, 213, 79, .55);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
[data-theme="dark"] mark.search-hl { background: rgba(255, 213, 79, .32); color: inherit; }

/* Placeholder del slot de adjunto: ocupa la columna del grid SIEMPRE (filas
   sin adjunto) para que fecha + borrar no se descuadren entre filas. Invisible
   pero reserva el ancho aproximado del pill 📎. */
.adj-slot {
  display: inline-block;
  visibility: hidden;
  width: 1.4em;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   FASE 4 — refinamientos del buscador (FIX BASE, NO mobile-only).
   Clases planas (no utilities Tailwind) → NO recompilan el bundle.
   Cubre: toggle de scope, badge de buzón de origen, contador con scope,
   búsquedas guardadas (chips localStorage) y autocompletado de operadores.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Toggle "este buzón / todos" ──────────────────────────────────────────
   Mismo lenguaje visual que .toolbar-vista-toggle del bundle (pill blanco). */
.scope-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--gd, #1d1d1f);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 0 0 .5px rgba(0, 0, 0, .04);
  transition: box-shadow .12s ease, background .12s ease, color .12s ease;
}
.scope-toggle:hover { box-shadow: 0 1px 6px rgba(0, 0, 0, .1); }
.scope-toggle.is-on {
  background: var(--color-primary-light, #e9f4ec);
  color: var(--color-primary, #1e7d32);
  border-color: transparent;
}
.scope-toggle svg { flex-shrink: 0; }
[data-theme="dark"] .scope-toggle { background: #1d2226; border-color: #2a3035; color: #e8eaed; }
[data-theme="dark"] .scope-toggle.is-on {
  background: rgba(30, 125, 50, .22);
  color: #5bbf6f;
  border-color: transparent;
}

/* Nota de scope en el contador de resultados. */
.search-results-scope {
  margin-left: 4px;
  font-weight: 600;
  color: var(--color-primary, #1e7d32);
}
[data-theme="dark"] .search-results-scope { color: #5bbf6f; }

/* Badge del buzón de origen por fila (solo en modo "todos"). Discreto, antes
   del asunto en la línea 1. No se encoge para que el asunto trunque a su lado. */
.correos-list .correo-row .correo-buzon-badge {
  flex-shrink: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 1px 6px;
  border-radius: 9999px;
  background: var(--color-primary-light, #e9f4ec);
  color: var(--color-primary-dark, #155d24);
}
[data-theme="dark"] .correos-list .correo-row .correo-buzon-badge {
  background: rgba(30, 125, 50, .2);
  color: #7fcf90;
}

/* ── Búsquedas guardadas (chips localStorage, search_saved.js) ─────────────
   Barra discreta debajo del toolbar. CSP-safe (el JS llena con createElement). */
.saved-searches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 24px;
  background: #fafafa;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.saved-searches-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gl, #86868b);
  margin-right: 2px;
}
.saved-searches-empty { font-size: 12px; color: var(--gl, #86868b); }
.saved-chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.saved-chip:hover { border-color: rgba(0, 0, 0, .16); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.saved-chip-link {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 4px 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none;
  color: var(--gd, #1d1d1f);
}
.saved-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  align-self: stretch;
  border: none;
  background: transparent;
  color: var(--gl, #86868b);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.saved-chip-x:hover { background: rgba(0, 0, 0, .06); color: var(--gd, #1d1d1f); }
.saved-chip-save {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px dashed rgba(0, 0, 0, .18);
  background: transparent;
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary, #1e7d32);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.saved-chip-save:hover { background: var(--color-primary-light, #e9f4ec); border-color: var(--color-primary, #1e7d32); }
.saved-chip-save.is-saved {
  color: var(--gl, #86868b);
  cursor: default;
  border-style: solid;
}
.saved-chip-save.is-saved:hover { background: transparent; border-color: rgba(0, 0, 0, .18); }
[data-theme="dark"] .saved-searches { background: #1d2226; border-bottom-color: #2a3035; }
[data-theme="dark"] .saved-chip { background: #232a30; border-color: #2a3035; }
[data-theme="dark"] .saved-chip-link { color: #e8eaed; }
[data-theme="dark"] .saved-chip-save { color: #5bbf6f; border-color: #3a444c; }

/* ── Autocompletado de operadores/contactos (search_autocomplete.js) ───────
   Dropdown anclado bajo el input. El toolbar es position:relative; lo anclamos
   al borde izquierdo del toolbar, alineado con la caja de búsqueda. */
.search-ac {
  position: absolute;
  top: 100%;
  left: 24px;
  z-index: 50;
  margin-top: 4px;
  width: min(440px, calc(100% - 48px));
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--bdr, rgba(0, 0, 0, .1));
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
  padding: 4px;
}
.search-ac-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.search-ac-row.is-active,
.search-ac-row:hover { background: var(--color-primary-light, #e9f4ec); }
.search-ac-primary {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gd, #1d1d1f);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.search-ac-hint {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--gl, #86868b);
  text-align: right;
}
[data-theme="dark"] .search-ac { background: #1d2226; border-color: #2a3035; }
[data-theme="dark"] .search-ac-row.is-active,
[data-theme="dark"] .search-ac-row:hover { background: rgba(30, 125, 50, .2); }
[data-theme="dark"] .search-ac-primary { color: #e8eaed; }
[data-theme="dark"] .search-ac-hint { color: #9aa3ab; }

/* ═══════════════════════════════════════════════════════════════════════
   FASE 2 — UX de lista (FIX BASE, NO mobile-only) — cambios aprobados
   ───────────────────────────────────────────────────────────────────────
   Estas reglas SÍ cambian el desktop (decisión de producto aprobada). Van como
   CSS plano sobre el bundle Tailwind → NO recompilan el bundle. Cubren:
     · Snippet en su propia 2ª línea (estilo Gmail)
     · Acciones de fila (estrella/borrar) accesibles en foco/teclado
     · Separadores temporales (Hoy / Ayer / …) + no-leído reforzado
   ═══════════════════════════════════════════════════════════════════════ */

/* ── (2) Snippet en 2ª línea (estilo Gmail) ──────────────────────────────
   El bundle define .correo-content como flex en UNA línea (nowrap), asunto
   max-width:60% y snippet apretado. Lo reorganizamos a 2 líneas dentro de la
   MISMA celda del grid (no cambia el nº de columnas ni el alto de las otras
   celdas, que están centradas verticalmente):
     línea 1 = asunto (+ contador de hilo + etiquetas)
     línea 2 = snippet a ancho completo, truncado con ellipsis.
   La columna del remitente (.correo-from) y la fecha siguen a izquierda/derecha
   → "remitente + asunto" en la línea 1 visual, snippet debajo. */
.correos-list .correo-row .correo-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 1px;
  white-space: normal;       /* el contenedor ya no fuerza nowrap */
  overflow: hidden;
  min-width: 0;
}
/* Línea 1: asunto + contador de hilo + etiquetas, en una fila, truncada. */
.correos-list .correo-row .correo-line1 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.correos-list .correo-row .correo-subject {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;           /* ya no 60%: ocupa el ancho de la celda */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Línea 2: snippet a ancho completo, 1 línea con ellipsis. */
.correos-list .correo-row .correo-snippet {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1.35;
  color: var(--gm, #515154);
}
/* Contador de hilo y etiquetas: no se encogen, viven al final de la línea 1. */
.correos-list .correo-row .correo-line1 .thread-count,
.correos-list .correo-row .correo-line1 .tag-chip-mini {
  flex-shrink: 0;
}
/* En modo compacto el snippet sigue oculto → la celda colapsa a una sola línea
   (solo asunto), sin alterar el alto compacto. OJO: la regla base de FASE2
   `.correos-list .correo-row .correo-snippet{display:block}` (0,3,0) empata en
   especificidad con la regla compacta del bundle
   `[data-density=compact] .correo-row .correo-snippet{display:none}` (0,3,0) y,
   por cargar DESPUÉS, le ganaría → el snippet reaparecería en compacto. Re-ocultamos
   acá con especificidad mayor (0,4,0) para que el modo compacto siga sin snippet. */
[data-density="compact"] .correos-list .correo-row .correo-content { gap: 0; }
[data-density="compact"] .correos-list .correo-row .correo-snippet { display: none; }

/* ── (3) Acciones de fila accesibles en foco/teclado ─────────────────────
   .row-star/.row-delete son opacity:0 hasta :hover en el bundle → invisibles
   al teclado y al foco. Las mostramos también en :focus-within de la fila y al
   enfocar el propio botón, garantizando un target táctil/clic >= 40px.
   (En mobile ya se muestran por responsive_shell @media; esto cubre PC + teclado.) */
.correos-list .correo-row:focus-within .row-star,
.correos-list .correo-row:focus-within .row-delete,
.correos-list .correo-row .row-star:focus-visible,
.correos-list .correo-row .row-delete:focus-visible,
.correos-list .correo-row.keyboard-focus .row-star,
.correos-list .correo-row.keyboard-focus .row-delete {
  opacity: 1;
}
/* Target accesible: el área clicable mínima 40px sin agrandar el icono. */
.correos-list .correo-row .row-star,
.correos-list .correo-row .row-delete {
  min-width: 40px;
  min-height: 40px;
}
/* Anillo de foco visible (CSP-safe, sin JS). */
.correos-list .correo-row .row-star:focus-visible,
.correos-list .correo-row .row-delete:focus-visible {
  outline: 2px solid var(--color-primary, #1e7d32);
  outline-offset: 1px;
}

/* ── (4) No-leído reforzado: acento de color + peso ──────────────────────
   El bundle ya pone peso 700 al asunto/remitente no leído. Agregamos un punto
   de color a la izquierda de la fila (indicador de barrido) y un teñido sutil. */
.correos-list .correo-row:not(.is-read) {
  position: relative;
}
.correos-list .correo-row:not(.is-read)::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-primary, #1e7d32);
}
.correos-list li:has(.correo-row:not(.is-read)) {
  box-shadow: inset 3px 0 0 -1px transparent;
}
.correos-list .correo-row:not(.is-read) .correo-snippet { color: var(--gd, #1d1d1f); }
[data-theme="dark"] .correos-list .correo-row:not(.is-read) .correo-snippet { color: #e8eaed; }

/* ── (4) Separadores temporales (Hoy / Ayer / Esta semana / …) ───────────
   <li class="fecha-sep"> insertado por el template cuando cambia el bucket de
   fecha respecto a la fila anterior. Encabezado sticky discreto, no clicable. */
.correos-list li.fecha-sep {
  position: sticky;
  top: 0;
  z-index: 2;
  list-style: none;
  padding: 6px 14px 5px;
  background: #fafafa;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gl, #86868b);
}
[data-theme="dark"] .correos-list li.fecha-sep {
  background: #1d2226;
  border-bottom-color: #2a3035;
  color: #9aa3ab;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE-ONLY — todo lo de abajo vive bajo @media (max-width: …px)
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   NAV superior (_nav_app.html) — [ALTA]
   El nav es un flex de 3 grupos (logo / selector buzón / email+botones) a
   h-16 que no entra <640px. En mobile escondemos el selector de buzón (el
   sidebar ya lista Buzones) y acortamos el email; bajamos el padding lateral.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* selector de buzón fuera: el sidebar (drawer) ya lista los Buzones */
  nav .rsp-nav-buzon-center { display: none !important; }
  /* el email completo se oculta (sin dejar un gap fantasma en el flex) —
     el usuario ya está identificado por el avatar/buzón del sidebar */
  .rsp-nav-email { display: none !important; }
}
@media (max-width: 480px) {
  nav.rsp-nav { padding-left: 12px !important; padding-right: 12px !important; }
  .rsp-nav-actions { gap: 8px !important; }
}

/* ───────────────────────────────────────────────────────────────────────
   BANDEJA (inbox) — filas .correo-row — [ALTA]
   7 columnas con anchos fijos (~404px) > viewport 360px → overflow + snippet
   aplastado. Colapsamos a [punto-sinleer, avatar, contenido, fecha].
   El grid base de desktop (styles.css:788) queda INTACTO.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Grid de 4 columnas: [avatar] [contenido] [fecha+adj] [borrar].
     2 filas: fila 1 = from + fecha + borrar; fila 2 = asunto/snippet + adj. */
  .page-inbox .correo-row,
  .correo-row {
    grid-template-columns: 28px minmax(0, 1fr) auto 44px !important;
    grid-template-rows: auto auto !important;
    gap: 2px 8px !important;
    padding: 10px 12px !important;
    align-items: center !important;
  }
  [data-density="compact"] .correo-row {
    grid-template-columns: 26px minmax(0, 1fr) auto 44px !important;
    padding: 7px 12px !important;
  }
  /* check y estrella fuera del flujo en mobile (touch no tiene hover) */
  .correo-row .row-check { display: none !important; }
  .correo-row .row-star { display: none !important; }
  /* avatar: columna 1, abarca las dos filas */
  .correo-row .avatar {
    grid-column: 1 / 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
  }
  /* "from": fila 1, columna de contenido */
  .correo-row .correo-from {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    font-size: 13px !important;
  }
  /* contenido (asunto + snippet): fila 2, envuelve en dos líneas */
  .correo-row .correo-content {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    row-gap: 2px !important;
  }
  .correo-row .correo-subject { max-width: 100% !important; }
  .correo-row .correo-sep { display: none !important; }
  .correo-row .correo-snippet {
    flex-basis: 100% !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
  }
  /* fecha: fila 1, columna 3 (alineada al "from") */
  .correo-row .correo-date {
    grid-column: 3 / 4 !important;
    grid-row: 1 / 2 !important;
    min-width: auto !important;
    font-size: 11px !important;
    justify-self: end !important;
  }
  /* pill de adjunto: fila 2, columna 3 */
  .correo-row .adj-pill {
    grid-column: 3 / 4 !important;
    grid-row: 2 / 3 !important;
    justify-self: end !important;
  }
  /* el placeholder no aplica en mobile (grid mobile coloca todo explícito) */
  .correo-row .adj-slot { display: none !important; }
  /* borrar: columna 4, abarca las dos filas (touch target 44px, visible) */
  .correo-row .row-delete {
    grid-column: 4 / 5 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    justify-self: center !important;
    opacity: 1 !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* row-check más grande si en algún flujo queda visible — [BAJA] */
@media (max-width: 640px) {
  .row-check { width: 20px !important; height: 20px !important; }
}

/* ───────────────────────────────────────────────────────────────────────
   TOOLBAR de búsqueda / filtros (inbox.html) — [MEDIA]
   Una sola fila flex que no entra: permitimos wrap y escondemos los textos
   "Filtros"/"Plano"/"Hilos" dejando solo el icono.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-inbox .inbox-toolbar { flex-wrap: wrap !important; padding: 10px 12px !important; }
  .page-inbox .toolbar-search { flex-basis: 100% !important; order: 0 !important; }
  .page-inbox .toolbar-adv-toggle,
  .page-inbox .toolbar-vista-toggle { order: 1 !important; }
  /* texto de los toggles oculto, queda el icono SVG (touch target 40px) */
  .rsp-toggle-label { display: none !important; }
  .page-inbox .toolbar-adv-toggle,
  .page-inbox .toolbar-vista-toggle {
    min-height: 40px !important;
    min-width: 40px !important;
    justify-content: center !important;
    padding: 8px 10px !important;
  }
  /* header del inbox más compacto */
  .page-inbox .inbox-header { padding: 12px 14px !important; }
}

/* Popover ayuda de búsqueda — [MEDIA] — w-80 se sale del viewport <360px */
@media (max-width: 640px) {
  .search-help-pop {
    width: calc(100vw - 24px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: 360px !important;
  }
}

/* Stats panel — charts lado a lado → apilados — [BAJA] */
@media (max-width: 640px) {
  .page-inbox .stats-panel .rsp-stats-charts { flex-direction: column !important; gap: 16px !important; }
}

/* Active filters — padding lateral reducido en mobile — [MEDIA] */
@media (max-width: 640px) {
  .active-filters { padding: 8px 12px !important; }
  .active-filters-count { margin-left: 0 !important; flex-basis: 100% !important; }
}