/* ══════════════════════════════════════════════════════════════════════════
   Un Corazón Contigo · la oficina virtual
   Sistema de diseño de las pantallas con sesión iniciada (Fase 1).

   La referencia abandona la barra superior para quien ya entró y usa una barra
   lateral fija. Es un cambio de estructura, no de piel: los tokens, la paleta y
   los componentes de corazon.css siguen valiendo; aquí se añade el armazón de la
   oficina y los componentes que solo viven dentro de ella (indicadores, tablas
   con pestañas, asistente por pasos, panel de detalle) más las gráficas.

   Dos variantes de oficina:
     .oficina--claro  solicitante y voluntario · barra lateral blanca
     .oficina--navy   administración          · barra lateral azul confianza

   Sistema base en corazon.css · identidad en docs/04-IDENTIDAD.md
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --oficina-side: 272px;   /* ancho de la barra lateral */
  --oficina-head: 74px;    /* alto de la cabecera */
  --oficina-max: 1160px;   /* ancho máximo del contenido, para que respire */
}

/* Fila de cinco indicadores (dashboards). Cae a menos columnas en pantallas
   angostas sin romperse. */
.grid--5 { grid-template-columns: repeat(auto-fit, minmax(min(178px, 100%), 1fr)); gap: 16px; }

/* ── Armazón ────────────────────────────────────────────────────────────── */

.oficina {
  display: grid;
  grid-template-columns: var(--oficina-side) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--nube);
}

/* Panel de solicitantes y voluntarios: base cálida, más amigable que el gris. */
.oficina--claro { background: var(--fondo); }

/* Toque cálido también en su panel: una acuarela muy tenue arriba del contenido
   (no en el admin navy, que es modo trabajo). Muy sutil, para no distraer. */
.oficina--claro .oficina__contenido { position: relative; }
.oficina--claro .oficina__contenido::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 320px;
  background: url('/img/fondo-acuarela.jpg') no-repeat top center;
  background-size: cover;
  opacity: .16;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
          mask-image: linear-gradient(to bottom, #000, transparent);
}
.oficina--claro .oficina__contenido > * { position: relative; z-index: 1; }

/* Marca de agua del backoffice: un corazón grande de trazo (como de rotulador),
   rojo claro, que asoma por la esquina inferior derecha y se corta. Anclado
   bien abajo/afuera para que solo se vea el lóbulo — sin invadir la zona de
   trabajo de arriba — y siempre detrás del contenido. */
.oficina::after {
  content: '';
  position: fixed;
  right: -13vw;
  bottom: -24vh;
  width: min(58vw, 680px);
  height: min(58vw, 680px);
  transform: rotate(-8deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92' fill='none' stroke='%23F2A0A0' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 80 C 22 60, 9 42, 16 27 C 21 16, 37 15, 50 29 C 63 15, 79 16, 84 27 C 91 42, 78 60, 50 80'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .4;
  pointer-events: none;
  z-index: 0;
}
.oficina__main { display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; }

/* El velo del cajón solo existe en móvil; en escritorio no debe ocupar celda. */
.oficina__velo { display: none; }

.oficina__contenido { flex: 1 1 auto; padding: 30px clamp(18px, 3.2vw, 44px) 96px; }
.oficina__limite { width: min(100%, var(--oficina-max)); margin-inline: auto; }

/* El router marca `#vista` con `.shell` (del sitio público). Dentro de la oficina
   ese contenedor cede su ancho al límite propio, sin duplicar los márgenes. */
.oficina__contenido > .vista { width: 100%; margin-inline: auto; }
.oficina__contenido > .vista.shell { width: 100%; max-width: var(--oficina-max); }

/* ── Barra lateral ──────────────────────────────────────────────────────── */

.oficina__side {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px 16px;
  background: var(--blanco);
  border-right: 1px solid var(--linea);
}
.oficina__marca { padding: 4px 8px 2px; }

/* Tarjeta de identidad: avatar + nombre + subtítulo (rol o especialidad) */
.identidad {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--r-sm);
  background: var(--crema); border: 1px solid var(--linea);
}
.identidad__texto { display: grid; gap: 1px; min-width: 0; }
.identidad__nombre { font-weight: 800; font-size: .98rem; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.identidad__rol { font-size: .8rem; color: var(--tinta-2); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Menú de secciones: icono + etiqueta + contador opcional */
.menu-lateral { display: grid; gap: 3px; }
.menu-lateral__titulo {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-2); padding: 10px 12px 4px;
}
.menu-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--tinta-2); text-decoration: none; font-weight: 700; font-size: .95rem;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.menu-item:hover { background: var(--nube); color: var(--confianza); }
.menu-item__icono { flex: none; display: grid; place-items: center; width: 24px; color: inherit; }
.menu-item__label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item__contador {
  flex: none; display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px;
  background: var(--corazon-fuerte); color: var(--blanco);
  font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.menu-item--boton { width: 100%; background: none; border: none; cursor: pointer; font: inherit; text-align: left; margin-top: 4px; }
.menu-item.is-active { background: var(--confianza-tenue); color: var(--confianza); }
.menu-item.is-active::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 4px;
  border-radius: 0 3px 3px 0; background: var(--corazon);
}

/* El pie de la barra: lo empuja al fondo el margin-top auto */
.oficina__side-pie { margin-top: auto; display: grid; gap: 12px; }

/* Aviso de emergencia (solicitante) y estado de verificación (voluntario) */
.side-nota {
  display: grid; gap: 8px; padding: 14px; border-radius: var(--r-sm);
  background: var(--corazon-tenue); border: 1px solid #FBD9D7;
}
.side-nota__cab { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: .9rem; color: #A83535; }
.side-nota p { margin: 0; font-size: .82rem; color: var(--tinta-2); }
.side-nota--bien { background: var(--bienestar-tenue); border-color: #C9E9DE; }
.side-nota--bien .side-nota__cab { color: #1A6B54; }
.side-nota--espera { background: var(--esperanza-tenue); border-color: #F6E3B8; }
.side-nota--espera .side-nota__cab { color: #7A5600; }

/* ── Variante navy (administración) ─────────────────────────────────────── */

.oficina--navy .oficina__side {
  background: var(--confianza); border-right-color: var(--confianza-hondo);
}
.oficina--navy .identidad {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12);
}
.oficina--navy .identidad__nombre { color: var(--blanco); }
.oficina--navy .identidad__rol { color: rgba(255, 255, 255, .68); }
.oficina--navy .menu-lateral__titulo { color: rgba(255, 255, 255, .55); }
.oficina--navy .menu-item { color: rgba(255, 255, 255, .78); }
.oficina--navy .menu-item:hover { background: rgba(255, 255, 255, .08); color: var(--blanco); }
.oficina--navy .menu-item.is-active { background: rgba(255, 255, 255, .12); color: var(--blanco); }
.oficina--navy .menu-item.is-active::before { background: var(--esperanza); }
.oficina--navy .side-nota { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); }
.oficina--navy .side-nota__cab { color: var(--esperanza); }
.oficina--navy .side-nota p { color: rgba(255, 255, 255, .72); }

/* Enlace de texto (los «Ver todas» de la referencia): color institucional, sin subrayado. */
.enlace {
  color: var(--confianza); font-weight: 800; font-size: .92rem;
  text-decoration: none; white-space: nowrap;
}
.enlace:hover { text-decoration: underline; }

/* ── Cabecera ───────────────────────────────────────────────────────────── */

.oficina__head {
  position: sticky; top: 0; z-index: 30;
  min-height: var(--oficina-head);
  display: flex; align-items: center; gap: 16px;
  padding: 12px clamp(18px, 3.2vw, 44px);
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.oficina__saludo { display: grid; gap: 1px; min-width: 0; }
.oficina__saludo h1 { font-size: 1.28rem; line-height: 1.2; letter-spacing: -.01em; }
.oficina__saludo p { margin: 0; font-size: .86rem; color: var(--tinta-2); }
.oficina__head-acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }

/* Botón redondo de la cabecera (campana, mensajes), con contador */
.head-btn {
  position: relative;
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--blanco); border: 1px solid var(--linea); color: var(--tinta-2);
  cursor: pointer; text-decoration: none;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.head-btn:hover { color: var(--confianza); border-color: #C8D3E2; background: var(--confianza-tenue); }
.head-btn__punto {
  position: absolute; top: 8px; right: 9px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--corazon-fuerte); color: var(--blanco);
  font-size: .66rem; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 2px solid var(--blanco);
}

/* Botón para abrir el menú en móvil; oculto en escritorio */
.oficina__abrir { display: none; }

/* ── Indicador (tarjeta KPI con variación) ──────────────────────────────── */

.indicador { display: grid; gap: 10px; }
.indicador--link { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.indicador--link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13, 43, 78, .10); }
.indicador__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.indicador__label { font-size: .9rem; font-weight: 700; color: var(--tinta-2); }
.indicador__num { font-weight: 800; font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.indicador__pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .84rem; color: var(--tinta-2); }

.variacion {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 9px 2px 6px; border-radius: var(--r-pill);
  font-weight: 800; font-size: .8rem; font-variant-numeric: tabular-nums;
  background: var(--bienestar-tenue); color: #1A6B54;
}
.variacion--baja { background: var(--corazon-tenue); color: #A83535; }
.variacion--plana { background: var(--nube); color: var(--tinta-2); }
.variacion svg { flex: none; }

/* ── Pestañas ───────────────────────────────────────────────────────────── */

.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--linea); }
.tab {
  position: relative; appearance: none; background: none; border: none; cursor: pointer;
  padding: 11px 16px; margin-bottom: -2px;
  font-family: inherit; font-weight: 700; font-size: .95rem; color: var(--tinta-2);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--t) var(--ease);
}
.tab:hover { color: var(--confianza); }
.tab.is-active { color: var(--confianza); }
.tab.is-active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--corazon);
}
.tab__cuenta {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 99px; background: var(--nube); color: var(--tinta-2);
  font-size: .74rem; font-weight: 800;
}
.tab.is-active .tab__cuenta { background: var(--confianza-tenue); color: var(--confianza); }

/* Control segmentado compacto: filtro secundario (p. ej. estado del voluntario). */
.segmento { display: inline-flex; flex-wrap: wrap; gap: 3px; background: var(--nube); border-radius: 11px; padding: 4px; }
.segmento a {
  padding: 6px 13px; border-radius: 8px; font-size: .84rem; font-weight: 700;
  color: var(--tinta-2); text-decoration: none;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.segmento a:hover { color: var(--tinta); }
.segmento a.is-active { background: var(--blanco); color: var(--confianza); box-shadow: 0 1px 4px rgba(13, 43, 78, .12); }

/* ── Renglón de cita (lista con badge de fecha, como la referencia) ─────── */

.cita-fila { display: flex; gap: 16px; align-items: center; flex-wrap: nowrap; }
.cita-fila__fecha {
  flex: none; width: 58px; padding: 9px 0; border-radius: 14px; text-align: center;
  background: var(--nube); border: 1px solid var(--linea-fria);
}
.cita-fila__dia { display: block; font-size: 1.5rem; font-weight: 900; line-height: 1; color: var(--tinta); }
.cita-fila__mes { display: block; margin-top: 3px; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-2); }
.cita-fila__cuerpo { flex: 1; min-width: 0; }
.cita-fila__meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; color: var(--tinta-2); font-size: .9rem; }
.cita-fila__meta span { display: inline-flex; align-items: center; gap: 5px; }
.cita-fila__acciones { flex: none; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
@media (max-width: 620px) {
  .cita-fila { flex-wrap: wrap; }
  .cita-fila__acciones { flex-direction: row-reverse; width: 100%; justify-content: space-between; align-items: center; }
}

/* Paneles de pestañas: solo se ve el activo. */
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ── Tabla de datos (pestañas + tabla + paginación) ─────────────────────── */

.tabla-datos { display: grid; gap: 0; }
.tabla-datos__barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 4px 4px 16px;
}
.tabla-datos__buscar { position: relative; flex: 1 1 220px; max-width: 340px; }
.tabla-datos__buscar .input { min-height: 44px; padding-left: 42px; }
.tabla-datos__buscar svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tinta-2); }

.tabla-datos__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 4px 2px; font-size: .88rem; color: var(--tinta-2);
}
.paginas { display: flex; align-items: center; gap: 6px; }
.pagina {
  min-width: 38px; height: 38px; padding: 0 10px;
  display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--blanco); border: 1px solid var(--linea); color: var(--tinta-2);
  font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
}
.pagina:hover:not(:disabled) { border-color: var(--confianza); color: var(--confianza); }
.pagina.is-active { background: var(--confianza); border-color: var(--confianza); color: var(--blanco); }
.pagina:disabled { opacity: .45; cursor: not-allowed; }

/* ── Distintivo de estado ───────────────────────────────────────────────── */

.distintivo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 800; line-height: 1.5;
  background: var(--nube); color: var(--tinta-2); border: 1px solid var(--linea-fria);
}
.distintivo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.distintivo--bien   { background: var(--bienestar-tenue); color: #1A6B54; border-color: #C9E9DE; }
.distintivo--espera { background: var(--esperanza-tenue); color: #7A5600; border-color: #F6E3B8; }
.distintivo--alto   { background: var(--corazon-tenue);   color: #A83535; border-color: #FBD9D7; }
.distintivo--info   { background: var(--confianza-tenue); color: var(--confianza); border-color: #CFDCEC; }

/* ── Asistente por pasos ────────────────────────────────────────────────── */

.asistente { display: flex; align-items: flex-start; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.asistente__paso { display: flex; align-items: center; gap: 11px; flex: 1 1 0; min-width: 0; }
.asistente__bola {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .92rem;
  background: var(--blanco); border: 2px solid var(--linea); color: var(--tinta-2);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.asistente__texto { display: grid; gap: 0; min-width: 0; }
.asistente__nombre { font-weight: 800; font-size: .9rem; line-height: 1.2; }
.asistente__orden { font-size: .74rem; font-weight: 700; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .05em; }
.asistente__linea { flex: 1 1 auto; height: 2px; min-width: 18px; background: var(--linea); border-radius: 2px; }

.asistente__paso.is-hecho .asistente__bola { background: var(--bienestar); border-color: var(--bienestar); color: var(--tinta); }
.asistente__paso.is-activa .asistente__bola { background: var(--confianza); border-color: var(--confianza); color: var(--blanco); }
.asistente__paso.is-activa .asistente__nombre { color: var(--confianza); }

/* ── Panel de detalle ───────────────────────────────────────────────────── */

.panel-detalle { display: grid; gap: 18px; }
.panel-detalle__cab { display: flex; align-items: flex-start; gap: 14px; }
.panel-detalle__datos { display: grid; gap: 0; }
.dato { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linea); }
.dato:last-child { border-bottom: none; }
.dato__clave { font-size: .88rem; color: var(--tinta-2); font-weight: 700; flex: none; }
.dato__valor { font-weight: 700; text-align: right; }

/* ── Gráficas (contenedor de los SVG de graficas.js) ────────────────────── */

.grafica { width: 100%; }
.grafica svg { width: 100%; height: auto; display: block; }
.grafica__leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.leyenda-item { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--tinta-2); font-weight: 700; }
.leyenda-item__punto { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.leyenda-item b { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* La dona lleva un total en el centro */
.dona-wrap { position: relative; display: grid; place-items: center; }
.dona-centro { position: absolute; display: grid; justify-items: center; gap: 1px; text-align: center; pointer-events: none; }
.dona-centro__num { font-weight: 800; font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.dona-centro__label { font-size: .78rem; color: var(--tinta-2); font-weight: 700; }

/* ── Barra inferior en móvil ────────────────────────────────────────────── */

.oficina__movil {
  display: none;
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--linea);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
}
.movil-item {
  flex: 1 1 0; display: grid; justify-items: center; gap: 3px;
  padding: 6px 4px; border-radius: var(--r-sm); text-decoration: none;
  color: var(--tinta-2); font-size: .68rem; font-weight: 700;
  position: relative;
}
.movil-item__icono { position: relative; }
.movil-item.is-active { color: var(--confianza); }
.movil-item__punto {
  position: absolute; top: -3px; right: -8px; min-width: 15px; height: 15px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 99px;
  background: var(--corazon-fuerte); color: var(--blanco);
  font-size: .6rem; font-weight: 800; border: 2px solid var(--blanco);
}

/* ── Responsivo: la barra lateral se pliega en un cajón ─────────────────── */

@media (max-width: 900px) {
  .oficina { grid-template-columns: 1fr; }
  .oficina__side {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: min(84vw, var(--oficina-side)); height: 100dvh;
    transform: translateX(-100%); transition: transform var(--t) var(--ease);
    box-shadow: var(--sombra-alta);
  }
  .oficina.is-abierta .oficina__side { transform: none; }
  .oficina__velo {
    display: none; position: fixed; inset: 0; z-index: 55;
    background: rgba(13, 43, 78, .5);
  }
  .oficina.is-abierta .oficina__velo { display: block; animation: aparece 160ms var(--ease); }
  .oficina__abrir { display: grid; }
  .oficina__contenido { padding-bottom: 96px; }   /* hueco para la barra inferior */
  .oficina__movil { display: flex; }
}

/* ── Mensajería: lista de conversaciones + hilo ─────────────────────────── */

.mensajeria {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px;
  height: min(74vh, 760px); min-height: 480px;
}
.mensajeria__lista, .mensajeria__hilo {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
  box-shadow: var(--sombra); overflow: hidden;
}

.msg-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; }
.msg-cab h1 { font-size: 1.24rem; margin: 0; }
.msg-buscar { position: relative; padding: 0 14px 12px; }
.msg-buscar .input { min-height: 42px; padding-left: 40px; }
.msg-buscar svg { position: absolute; left: 27px; top: 11px; color: var(--tinta-2); pointer-events: none; }

.conversaciones { flex: 1; overflow-y: auto; padding: 4px 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.conversacion {
  display: flex; gap: 12px; align-items: center; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer; padding: 11px 12px; border-radius: 12px;
  transition: background var(--t) var(--ease); font: inherit; color: inherit;
}
.conversacion:hover { background: var(--nube); }
.conversacion.is-abierta { background: var(--confianza-tenue); }
.conversacion__txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.conversacion__quien { display: flex; align-items: center; gap: 7px; font-weight: 800; color: var(--tinta); }
.conversacion__esp { font-size: .8rem; color: var(--tinta-2); font-weight: 700; }
.conversacion__ultimo { font-size: .85rem; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversacion__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.conversacion__cuando { font-size: .74rem; color: var(--tinta-2); white-space: nowrap; }
.conversacion__vacia { padding: 8px 16px; color: var(--tinta-2); }
.punto-num {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px;
  background: var(--corazon-fuerte); color: #fff; font-size: .7rem; font-weight: 800;
  display: inline-grid; place-items: center;
}

.hilo__vacio { flex: 1; display: grid; place-items: center; padding: 30px; }
.hilo__head { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--linea); }
.hilo__acciones { margin-left: auto; display: flex; gap: 6px; }
.hilo__volver { display: none; }
.hilo__cuerpo { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; background: var(--nube); }

.burbuja {
  max-width: 76%; align-self: flex-start; background: var(--blanco);
  border: 1px solid var(--linea); padding: 10px 14px; border-radius: 16px 16px 16px 5px;
}
.burbuja p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja__hora { display: block; margin-top: 5px; font-size: .72rem; color: var(--tinta-2); }
.burbuja--mia { align-self: flex-end; background: var(--confianza); border-color: var(--confianza); color: #fff; border-radius: 16px 16px 5px 16px; }
.burbuja--mia .burbuja__hora { color: rgba(255, 255, 255, .8); }

.hilo__aviso { display: flex; align-items: center; gap: 8px; padding: 8px 18px; font-size: .78rem; color: var(--tinta-2); background: var(--crema); border-top: 1px solid var(--linea); }
.hilo__pie { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--linea); }
.hilo__pie .input { min-height: 46px; }
.hilo__pie .btn { flex: none; }

@media (max-width: 820px) {
  .mensajeria { grid-template-columns: 1fr; height: min(72vh, 640px); }
  .mensajeria[data-abierta="1"] .mensajeria__lista { display: none; }
  .mensajeria[data-abierta="0"] .mensajeria__hilo { display: none; }
  .hilo__volver { display: inline-grid; }
}

/* ── Agenda semanal (calendario del voluntario) ─────────────────────────── */

.agenda__barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.agenda__nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agenda__mes { font-size: 1.02rem; }
.agenda__leyenda { display: flex; flex-wrap: wrap; gap: 10px 20px; }

.agenda-cal-wrap { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--r); background: var(--blanco); box-shadow: var(--sombra); }
.agenda-cal { min-width: 760px; }
.agenda-cal__cab, .agenda-cal__cuerpo { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.agenda-cal__cab { border-bottom: 1px solid var(--linea); position: sticky; top: 0; background: var(--blanco); z-index: 4; }
.agenda-cal__dcab { padding: 9px 4px; text-align: center; border-left: 1px solid var(--linea); display: grid; gap: 1px; align-content: center; }
.agenda-cal__dcab span { font-size: .7rem; font-weight: 800; letter-spacing: .06em; color: var(--tinta-2); }
.agenda-cal__dcab b { font-size: 1.16rem; color: var(--tinta); }
.agenda-cal__dcab.es-hoy { background: var(--confianza-tenue); }
.agenda-cal__dcab.es-hoy b { color: var(--confianza); }

.agenda-cal__cuerpo { padding-top: 9px; }
.agenda-cal__hlab { position: relative; }
.agenda-cal__hlab span { position: absolute; top: -8px; right: 8px; font-size: .7rem; color: var(--tinta-2); white-space: nowrap; }
.agenda-cal__col {
  position: relative; border-left: 1px solid var(--linea);
  background-image: repeating-linear-gradient(to bottom, var(--linea), var(--linea) 1px, transparent 1px, transparent 58px);
}
.agenda-cal__col.es-hoy { background-color: rgba(13, 43, 78, .022); }

.ag-bloque {
  position: absolute; left: 4px; right: 4px; border-radius: 9px; padding: 5px 8px;
  overflow: hidden; display: flex; flex-direction: column; gap: 1px;
  font-size: .75rem; line-height: 1.2; text-decoration: none; border: 1px solid transparent;
}
.ag-bloque__hora { font-weight: 800; }
.ag-bloque__nombre, .ag-bloque__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-bloque__nombre { font-weight: 800; }
.ag-bloque__txt { opacity: .85; }
.ag-bloque--disp { background: var(--calidez-tenue); border-color: #D8DAF0; color: #45497F; z-index: 1; }
.ag-bloque--cita { background: var(--bienestar-tenue); border-color: #BFE9DA; color: #15654E; z-index: 2; }
.ag-bloque--pasada { background: #EEF1F5; border-color: #DDE3EA; color: var(--tinta-2); z-index: 2; }

/* ── Wizard «Agendar nueva cita» ────────────────────────────────────────── */

.wizard-pasos { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.wizard-paso { display: flex; align-items: center; gap: 9px; }
.wizard-paso__num {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: .85rem;
  background: var(--nube); color: var(--tinta-2); border: 1px solid var(--linea);
}
.wizard-paso__lbl { font-weight: 700; font-size: .92rem; color: var(--tinta-2); white-space: nowrap; }
.wizard-paso.is-activo .wizard-paso__num { background: var(--corazon-fuerte); color: #fff; border-color: var(--corazon-fuerte); }
.wizard-paso.is-activo .wizard-paso__lbl { color: var(--tinta); }
.wizard-paso.is-hecho .wizard-paso__num { background: var(--bienestar); color: #fff; border-color: var(--bienestar); }
.wizard-paso.is-hecho .wizard-paso__lbl { color: var(--tinta); }
.wizard-paso__linea { flex: 1; min-width: 16px; height: 2px; background: var(--linea); margin: 0 12px; }

.wizard-grupo {
  margin: 0; font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-2); display: flex; align-items: center; gap: 10px;
}
.wizard-grupo::after { content: ''; flex: 1; height: 1px; background: var(--linea); }

/* Tarjeta seleccionable (especialidad / profesional) */
.opcion { border: 1px solid var(--linea); }
.opcion.is-sel { border-color: var(--confianza); box-shadow: 0 0 0 2px var(--confianza-tenue); }
.opcion:disabled { pointer-events: none; }

@media (max-width: 640px) {
  .wizard-paso__lbl { display: none; }
  .wizard-paso__linea { margin: 0 6px; }
}

/* ── Modal «Reagendar cita» con mini-calendario ─────────────────────────── */

.reagendar__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reagendar__pro { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 13px 14px; background: var(--nube); border-radius: var(--r-sm); }
.reagendar__nota { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--tinta-2); margin: 16px 0 0; }
.reagendar__grid { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 20px; align-items: start; }
.reagendar__horas { display: flex; flex-direction: column; min-height: 220px; }
.reagendar__slots { display: flex; flex-direction: column; gap: 8px; }
.reagendar__slots .hora { width: 100%; }
.reagendar__pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

.cal-mini__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-mini__cab strong { font-size: 1rem; }
.cal-mini__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-mini__dow { text-align: center; font-size: .72rem; font-weight: 800; color: var(--tinta-2); padding-bottom: 2px; }
.cal-mini__dia {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px;
  font-size: .9rem; font-weight: 700; border: none; background: none; color: var(--tinta); padding: 0;
}
.cal-mini__dia--vacio { visibility: hidden; }
.cal-mini__dia--off { color: var(--tinta-2); opacity: .38; }
.cal-mini__dia--libre { cursor: pointer; background: var(--bienestar-tenue); color: #15654E; }
.cal-mini__dia--libre:hover { background: var(--bienestar); color: #fff; }
.cal-mini__dia.is-sel { background: var(--corazon-fuerte); color: #fff; }
.cal-mini__dia.es-hoy { box-shadow: inset 0 0 0 2px var(--confianza); }

@media (max-width: 520px) {
  .reagendar__grid { grid-template-columns: 1fr; }
  .reagendar__horas { min-height: 0; margin-top: 6px; }
  .reagendar__slots { flex-direction: row; flex-wrap: wrap; }
  .reagendar__slots .hora { width: auto; }
}

/* ── Desplegable con diseño propio (combo) ──────────────────────────────────
   El <select> nativo abre la lista del sistema operativo, que no se puede
   estilizar. Este combo la reemplaza por un panel propio, a juego con la marca.
   ──────────────────────────────────────────────────────────────────────── */
.combo { position: relative; }
.combo__boton {
  width: 100%; min-height: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--blanco); border: 1.5px solid #D9DFE9; border-radius: var(--r-sm);
  padding: 13px 16px; font-family: inherit; font-size: 1rem; color: var(--tinta);
  text-align: left; cursor: pointer;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.combo__boton:focus-visible { outline: none; border-color: var(--confianza); box-shadow: 0 0 0 4px rgba(13, 43, 78, .1); }
.combo[data-abierto="true"] .combo__boton { border-color: var(--confianza); box-shadow: 0 0 0 4px rgba(13, 43, 78, .1); }
.combo__etiqueta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo__flecha { flex: none; color: #5A6B84; transition: transform var(--t) var(--ease); }
.combo[data-abierto="true"] .combo__flecha { transform: rotate(180deg); }

.combo__panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 336px; overflow-y: auto;
  background: var(--blanco); border: 1.5px solid var(--linea); border-radius: var(--r-sm);
  box-shadow: 0 18px 44px rgba(13, 43, 78, .16); padding: 6px;
}
.combo__panel[hidden] { display: none; }
.combo__grupo {
  padding: 11px 12px 5px; font-size: .74rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2);
}
.combo__opcion {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: none; border-radius: var(--r-sm); cursor: pointer;
  font: inherit; text-align: left; padding: 11px 12px; color: var(--tinta);
}
.combo__opcion:hover { background: var(--nube); }
.combo__opcion:focus-visible { outline: none; background: var(--nube); box-shadow: inset 0 0 0 2px var(--confianza); }
.combo__opcion--tema { font-weight: 700; }
.combo__opcion.is-sel { background: var(--confianza-tenue); color: var(--confianza); font-weight: 700; }
.combo__opcion__cuenta { flex: none; color: var(--tinta-2); font-size: .9rem; }
.combo__opcion.is-sel .combo__opcion__cuenta { color: inherit; }

/* La tarjeta que contiene el combo se eleva mientras el desplegable está
   abierto, para que su panel no quede tapado por las tarjetas de resultados. */
.card.is-elevada { z-index: 60; }

/* ── Comunidad / Muro ───────────────────────────────────────────────────────
   El muro usaba clases sin estilar; aquí se define su diseño completo según la
   referencia: dos columnas, composer, tarjetas de publicación y rail. */
.muro { display: grid; grid-template-columns: minmax(0, 1fr) 322px; gap: 24px; align-items: start; }
.muro__lado { position: sticky; top: 12px; }
@media (max-width: 980px) {
  .muro { grid-template-columns: 1fr; }
  .muro__lado { position: static; }
}

/* Composer */
.composer-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.composer-accion {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--nube); border: none; border-radius: var(--r-sm);
  padding: 9px 13px; font: inherit; font-size: .9rem; font-weight: 600; color: var(--tinta);
  cursor: pointer; transition: background var(--t) var(--ease);
}
.composer-accion:hover { background: var(--confianza-tenue); }
.composer-accion__ic { display: grid; place-items: center; }
.composer-accion__ic--foto { color: #2E9E7B; }
.composer-accion__ic--animo { color: #D39A2B; }
.composer-accion__ic--encuesta { color: #7A6BD8; }

/* Tarjeta de publicación */
.post__fijada { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--corazon-fuerte); margin-bottom: 10px; }
.post__cuerpo { margin: 14px 0 0; white-space: pre-line; line-height: 1.62; color: var(--tinta); }
.post__stats {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 16px 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--linea);
  font-size: .88rem; color: var(--tinta-2);
}
.post__stat { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); }
.post__stat .icono, .post__stat svg { color: var(--corazon-fuerte); }
.post__stat--enlace { text-decoration: none; }
.post__stat--enlace:hover { color: var(--confianza); text-decoration: underline; }
.post__acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding-top: 8px; }
.post__accion {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: none; border-radius: var(--r-sm); padding: 10px;
  font: inherit; font-size: .92rem; font-weight: 600; color: var(--tinta-2); cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.post__accion:hover { background: var(--nube); color: var(--confianza); }
.post__accion.is-on { color: var(--corazon-fuerte); }

/* Comentarios */
.comentarios { margin-top: 6px; }
.comentario { display: flex; gap: 11px; padding: 12px 0; border-top: 1px solid var(--linea); }
.comentario__texto { margin: 3px 0 0; line-height: 1.5; }
.comentario-nuevo { display: flex; gap: 8px; margin-top: 12px; }

/* Publicaciones recomendadas (rail) */
.reco { display: block; text-decoration: none; color: inherit; padding: 11px; border-radius: var(--r-sm); transition: background var(--t) var(--ease); }
.reco + .reco { border-top: 1px solid var(--linea); }
.reco:hover { background: var(--nube); }
.reco__titulo { margin: 0 0 3px; font-weight: 700; font-size: .92rem; line-height: 1.4; color: var(--tinta); }
.reco__stats { display: flex; gap: 14px; margin-top: 7px; font-size: .82rem; color: var(--tinta-2); }
.reco__stats span { display: inline-flex; align-items: center; gap: 5px; }

/* Estados efímeros (mood) */
.estados { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.estado { position: relative; border-radius: var(--r-sm); padding: 12px 13px; background: var(--nube); border: 1px solid var(--linea); }
.estado--nuevo {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; font: inherit;
  text-align: left; color: var(--confianza); font-weight: 700;
  background: var(--confianza-tenue); border: 1px dashed var(--confianza);
}
.estado__mas { display: grid; place-items: center; }
.estado__animo { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-2); }
.estado__texto { margin: 5px 0; line-height: 1.45; font-size: .92rem; }
.estado__quien { font-size: .78rem; color: var(--tinta-2); }
.estado__quitar { position: absolute; top: 8px; right: 8px; background: none; border: none; cursor: pointer; color: var(--tinta-2); line-height: 0; }
.estado--corazon { background: var(--corazon-tenue); border-color: #FBD9D7; }
.estado--bienestar { background: var(--bienestar-tenue); border-color: #C9E9DE; }
.estado--esperanza { background: var(--esperanza-tenue); border-color: #F6E3B8; }
.estado--confianza { background: var(--confianza-tenue); border-color: #CBD9EA; }
.estado--mio { outline: 2px solid var(--confianza); outline-offset: 1px; }

/* Detalle de publicación: post + panel de comentarios */
.detalle-pub { display: grid; grid-template-columns: minmax(0, 1fr) 358px; gap: 22px; align-items: start; }
.detalle-pub__com { position: sticky; top: 12px; }
.detalle-pub__lista { margin-top: 10px; }
@media (max-width: 900px) {
  .detalle-pub { grid-template-columns: 1fr; }
  .detalle-pub__com { position: static; }
}

/* ── Perfil (comunidad) ─────────────────────────────────────────────────────*/
.perfil-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(135deg, var(--corazon-tenue), var(--calidez-tenue));
  border-radius: var(--r); padding: 24px 28px; min-height: 128px;
}
.perfil-banner__texto h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.2; color: var(--tinta); }
.perfil-banner__ilu { width: 200px; max-width: 40%; flex: none; line-height: 0; }
.perfil-banner__ilu svg { width: 100%; height: auto; }
@media (max-width: 640px) { .perfil-banner__ilu { display: none; } }

.perfil-cabecera__fila { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.perfil-cabecera__acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 560px) { .perfil-cabecera__acciones { margin-left: 0; width: 100%; } }

.perfil-stats { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.perfil-stat {
  flex: 1 1 0; min-width: 82px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--nube); border: 1px solid var(--linea); border-radius: var(--r-sm);
  padding: 12px 8px; font: inherit; cursor: pointer; color: var(--tinta);
  transition: background var(--t) var(--ease);
}
.perfil-stat[disabled] { cursor: default; }
.perfil-stat:not([disabled]):hover { background: var(--confianza-tenue); }
.perfil-stat strong { font-size: 1.3rem; }
.perfil-stat span { font-size: .8rem; color: var(--tinta-2); }

/* Atribución institucional (pie de la barra lateral) */
.side-iniciativa {
  display: flex; align-items: flex-start; gap: 7px; margin: 14px 4px 2px;
  font-size: .74rem; line-height: 1.35; color: var(--tinta-2); font-weight: 600;
}
.side-iniciativa svg { flex: none; margin-top: 1px; color: var(--confianza); }
.oficina--navy .side-iniciativa { color: rgba(255, 255, 255, .68); }
.oficina--navy .side-iniciativa svg { color: rgba(255, 255, 255, .8); }

/* ── Impresión: informe PDF (Estadísticas) ────────────────────────────────
   Oculta la navegación y los controles; deja solo el contenido para "Guardar
   como PDF" desde el navegador. */
@media print {
  .oficina__side, .oficina__head, .oficina__movil,
  .no-print, #dialogo, #avisos, .toasts { display: none !important; }
  .oficina, .oficina__main, .oficina__contenido, #principal {
    display: block !important; margin: 0 !important; padding: 0 !important; max-width: none !important;
  }
  body { background: #fff !important; }
  .card { box-shadow: none !important; border: 1px solid #EAE2DC !important; break-inside: avoid; }
  .grid--5 { grid-template-columns: repeat(3, 1fr) !important; }
  a[href]:after { content: ''; }
}

/* ── Soporte: bandeja del equipo ──────────────────────────────────────────── */
.soporte-hilo__badge {
  flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--corazon-fuerte); color: #fff; font-size: .76rem; font-weight: 800;
  display: grid; place-items: center; align-self: center;
}

/* ── Bandeja de soporte: dos paneles (lista + conversación) ───────────────── */
.soporte-bandeja {
  display: grid; grid-template-columns: minmax(300px, 360px) 1fr; gap: 16px;
  height: min(74vh, 680px);
}
.soporte-col-lista, .soporte-col-conv {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden;
}
.soporte-lista-cab { padding: 15px 15px 13px; border-bottom: 1px solid var(--linea); }
.soporte-buscar {
  display: flex; align-items: center; gap: 8px; margin-top: 11px; color: var(--tinta-2);
  background: var(--nube); border: 1px solid var(--linea); border-radius: var(--r-sm); padding: 0 12px;
}
.soporte-buscar input { flex: 1; border: none; background: none; outline: none; padding: 10px 0; font: inherit; color: var(--tinta); }
.soporte-lista { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 9px; }

.soporte-item {
  display: flex; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: var(--r-sm); padding: 10px; font: inherit; color: inherit;
  transition: background .12s ease;
}
.soporte-item:hover { background: var(--nube); }
.soporte-item.is-active { background: var(--confianza-tenue); }
.soporte-item--alerta { opacity: .82; }
.soporte-item__cuerpo { min-width: 0; flex: 1; }
.soporte-item__top { display: flex; justify-content: space-between; gap: 8px; }
.soporte-item__top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.soporte-item__ultimo { font-size: .85rem; color: var(--tinta-2); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soporte-item__pills { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

.soporte-conv-cab { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--linea); }
.soporte-volver { display: none; flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--nube); border: 1px solid var(--linea); cursor: pointer; place-items: center; color: var(--tinta-2); }
.soporte-conv-cuerpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.soporte-conv-hilo { display: flex; flex-direction: column; gap: 9px; }
.soporte-conv-pie { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linea); }
.soporte-conv-pie textarea { flex: 1; resize: none; min-height: 44px; max-height: 120px;
  border: 1px solid var(--linea); border-radius: var(--r-sm); padding: 11px 13px; font: inherit; color: var(--tinta); background: var(--nube); }
.soporte-conv-pie textarea:focus { outline: none; border-color: var(--confianza); background: #fff; }
.soporte-conv-pie .btn { flex: none; width: 44px; height: 44px; padding: 0; }
.soporte-conv-vacio { margin: auto; text-align: center; color: var(--tinta-2); padding: 40px 24px; max-width: 320px; }
.soporte-conv-nota { margin-bottom: 14px; padding: 13px 15px; background: var(--confianza-tenue);
  border-radius: var(--r-sm); font-size: .88rem; color: var(--confianza); line-height: 1.5; }
.soporte-conv-nota a { color: var(--confianza); font-weight: 700; }

@media (max-width: 900px) {
  .soporte-bandeja { grid-template-columns: 1fr; height: calc(100vh - 118px); }
  .soporte-col-conv { display: none; }
  .soporte-bandeja.is-viendo .soporte-col-lista { display: none; }
  .soporte-bandeja.is-viendo .soporte-col-conv { display: flex; }
  .soporte-volver { display: inline-grid; }
}