/* app.css — Lo propio del portal de socios, encima del VA App Kit.
 *
 * Regla: acá NO se redefine lo que el kit ya resuelve (botones, tarjetas, tablas, pills,
 * campos, panel lateral). Sólo va lo que este portal tiene y el kit no:
 *
 *   · el toast y el modal de confirmación;
 *   · el ingreso del equipo y las pantallas públicas, que no tienen shell;
 *   · el enlace del socio, que es MÓVIL PRIMERO y no comparte layout con el back office;
 *   · tres piezas de la cobranza: el número grande, el panel de imputación y el
 *     checklist de cierre.
 *
 * Todo consume tokens del contrato (var(--...)); ningún color literal.
 */

/* ---------- Base que el kit deja abierta ---------- */

/* El panel lateral cerrado vive estacionado FUERA de la pantalla, a la derecha
   (`.sheet { transform: translateX(100%) }` del kit), y eso ensancha el documento: en un
   teléfono de 390 px la página arrancaba con 217 px de scroll horizontal en todas las
   pantallas. Se recorta acá. `clip` y no `hidden` a propósito: `hidden` convertiría al
   html en un contenedor de scroll y rompería el `position: sticky` de la barra de arriba.
   El mismo arreglo le corresponde al kit, porque le pasa a cualquier app que use .sheet. */
html { overflow-x: clip; }

body { font-family: var(--fuente); }
.mono, .num-mono { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }
.marca-logo { display: block; }
.topbar__logo .marca-logo { height: 15px; width: auto; }

.nowrap { white-space: nowrap; }
.txt-der { text-align: right; }
.txt-cen { text-align: center; }
.w100 { width: 100%; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fila-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* La etiqueta que avisa de algo que hay que mirar antes de decidir, y no de un estado. Hoy
   la usa la bandeja de altas para el referente que duda de que el postulante fabrique, que
   es la pregunta por la que se cae uno de cada tres de los que no entran. */
.tag--alerta { background: #fdf1e6; color: #9a3412; }
/* La lista de un modal de confirmación, para cuando lo que se confirma son varias cosas
   (los dos o tres casos de una tanda del comité, con su resultado cada uno). */
.modal-lista { margin: 8px 0 12px 18px; }
.modal-lista li { margin-bottom: 4px; }
.pila { display: flex; flex-direction: column; gap: 14px; }
.chico { font-size: 12.5px; }
.negativo { color: var(--error); }
.positivo { color: var(--ok); }

/* Botón de acción destructiva. El kit no lo trae porque no toda app borra; acá se anula
   una imputación y se reabre un mes cerrado, y esos botones no pueden verse iguales que
   "guardar". */
.btn--peligro { background: var(--error); color: #fff; }
.btn--peligro:hover { filter: brightness(.92); text-decoration: none; }
/* La acción principal del socio, en el amarillo de la marca. Uso puntual y único por
   pantalla: es "ya pagué, subo el comprobante". */
.btn--destacado { background: var(--destacado); color: var(--destacado-contenido); font-weight: 800; }
.btn--destacado:hover { filter: brightness(.96); text-decoration: none; }
.btn--bloque { width: 100%; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  z-index: 400; max-width: min(560px, calc(100vw - 32px));
  background: var(--tinta); color: var(--superficie);
  padding: 12px 18px; border-radius: var(--radio); box-shadow: var(--sombra-lg);
  font-size: 14px; font-weight: 600; line-height: 1.4;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast--ok { background: var(--ok); }
.toast--error { background: var(--error); }
.toast--warn { background: var(--atencion); }

/* ---------- Modal de confirmación ---------- */
.modal-back { display: grid; place-items: center; padding: 20px; }
.modal {
  background: var(--elevado); border-radius: var(--radio-lg); box-shadow: var(--sombra-lg);
  width: min(520px, 100%); padding: 24px; transform: scale(.97); transition: transform .18s ease;
}
.modal-back.is-open .modal { transform: scale(1); }
.modal h3 { font-size: 18px; margin-bottom: 10px; }
.modal__cuerpo { font-size: 14px; color: var(--tinta-suave); line-height: 1.55; }
.modal__cuerpo p { margin: 0 0 .7em; }
.modal__cuerpo p:last-child { margin-bottom: 0; }
.modal__pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---------- Firma de VA ----------

   La franja del fondo de las caras que mira un socio (su enlace y las públicas). Calco del
   pie del portal de Che: marca del cliente a la izquierda, firma chica a la derecha.

   `.pagina` es el envoltorio que la empuja al fondo de la pantalla cuando el contenido es
   corto, que en el enlace del socio es lo normal: "estás al día" son tres renglones. El
   `min-height: 0` sobre `.plano` desarma su propio 100vh, que ya aporta la .pagina; sin eso
   la página mediría 100vh MÁS el pie y toda pantalla arrancaría con scroll. El ingreso del
   equipo usa `.plano` sin `.pagina` y no se entera. */
.pagina { min-height: 100vh; display: flex; flex-direction: column; }
.pagina > :first-child { flex: 1 0 auto; }
.pagina > .plano { min-height: 0; }

.pie-va { background: var(--marca); color: var(--marca-contenido); padding: 20px 24px; font-size: 12.5px; }
.pie-va__in { width: min(760px, 100%); margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pie-va .marca-logo { height: 11px; width: auto; opacity: .85; flex: none; }
.pie-va__sp { flex: 1; }
.pie-va a { color: inherit; text-decoration: underline; text-underline-offset: 2px; opacity: .85; }
.pie-va a:hover { opacity: 1; }

/* ---------- Pantallas sin shell (ingreso, público, socio) ---------- */
.plano { min-height: 100vh; display: flex; flex-direction: column; align-items: center; }
.plano__caja { width: min(460px, calc(100vw - 32px)); margin: auto; padding: 32px 0 48px; }
.plano__ancho { width: min(760px, calc(100vw - 32px)); margin: 0 auto; padding: 24px 0 64px; }
.plano__marca { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 28px; color: var(--marca); }
.plano__marca .marca-logo { height: 34px; width: auto; }
.plano__marca img { height: 62px; width: auto; }
.plano__pie { color: var(--tinta-tenue); font-size: 12.5px; text-align: center; padding: 20px; }

/* ---------- Ingreso del equipo ---------- */
.ingreso .card__body { padding: 26px; }
.ingreso h1 { font-size: 20px; margin-bottom: 4px; }
.ingreso p.sub { color: var(--tinta-tenue); font-size: 13.5px; margin-bottom: 22px; }
.ingreso .error { color: var(--error); font-size: 13.5px; font-weight: 600; margin-bottom: 12px; }

/* ---------- El número grande (S1 y el tablero) ---------- */
.numerote {
  font-family: var(--fuente-mono); font-weight: 500;
  font-size: clamp(38px, 11vw, 56px); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.numerote--ok { color: var(--ok); }
.numerote--debe { color: var(--tinta); }
.saludo { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.bajada { color: var(--tinta-suave); font-size: 14px; margin-top: 8px; }

/* ---------- Enlace del socio: móvil primero ---------- */
.socio { width: min(680px, 100%); margin: 0 auto; padding: 0 16px 72px; }
.socio__top {
  display: flex; align-items: center; gap: 12px; padding: 16px 0 20px;
  color: var(--marca);
}
.socio__top .marca-logo { height: 13px; width: auto; }
.socio__bloque { margin-bottom: 16px; }
.socio__bloque--hero { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: 24px 20px; box-shadow: var(--sombra-sm); }
.socio__bloque--aldia { background: var(--marca-suave); border-color: transparent; color: var(--marca-suave-contenido); }
.socio__acciones { display: grid; gap: 10px; margin-top: 20px; }
.pagar { background: var(--superficie-alt); border-radius: var(--radio); padding: 14px 16px; margin-top: 14px; }
.pagar h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--tinta-tenue); margin-bottom: 10px; }
.cbu { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--borde-suave); }
.cbu:first-of-type { border-top: 0; }
.cbu__valor { font-family: var(--fuente-mono); font-size: 13.5px; word-break: break-all; }
.cbu__copiar { border: 0; background: none; color: var(--marca); font-weight: 700; font-size: 13px; cursor: pointer; padding: 6px 8px; border-radius: var(--radio-sm); flex: none; }
.cbu__copiar:hover { background: var(--marca-suave); }

details.plegable { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
details.plegable > summary {
  list-style: none; cursor: pointer; padding: 15px 18px; font-weight: 700; font-size: 14.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::after { content: '＋'; color: var(--tinta-tenue); font-weight: 400; }
details.plegable[open] > summary::after { content: '−'; }
details.plegable > .plegable__cuerpo { padding: 0 18px 18px; }

.linea-mov { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--borde-suave); font-size: 14px; }
.linea-mov:first-child { border-top: 0; }
/* La línea que abre su detalle. Misma regla que la fila de tabla del kit: si el dato se
   puede abrir, se abre desde la línea entera y el cursor lo anuncia. El padding lateral
   con margen negativo hace que el fondo del hover se note sin mover el texto de lugar. */
/* La línea que hay que mirar antes de decidir: hoy, la referencia que no confirma que el
   postulante fabrique. Se marca con el borde izquierdo y no con el fondo, para que se
   distinga sin gritar en una lista de tres. */
.linea-mov--alerta { border-left: 3px solid var(--atencion); padding-left: 10px; }
.linea-mov__acc { flex: none; display: flex; align-items: flex-start; }
.linea-mov--clic { cursor: pointer; padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px; }
.linea-mov--clic:hover { background: var(--superficie-alt); }
.linea-mov--clic:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.linea-mov__que { min-width: 0; }
.linea-mov__que small { display: block; color: var(--tinta-tenue); font-size: 12.5px; margin-top: 2px; }
.linea-mov__cuanto { font-family: var(--fuente-mono); font-weight: 500; white-space: nowrap; }

/* Chips de monto de S2 ("el total", "una cuota", "otro monto"). */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
  border: 1.5px solid var(--borde); background: var(--superficie); color: var(--tinta-suave);
  border-radius: var(--radio-pill, 999px); padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.chip.is-on { border-color: var(--marca); background: var(--marca-suave); color: var(--marca-suave-contenido); }

/* Una columna de plata no se parte. El kit le da `tabular-nums` para que las cifras
   queden alineadas, pero sin esto el `$` cae en un renglón y el número en el siguiente, y
   la alineación que se buscó se pierde justo donde importa. */
.tbl .num { white-space: nowrap; }

/* Foco por teclado en una fila clickeable. El anillo global del kit se recorta contra el
   borde de la celda, así que acá va hacia adentro. */
.tbl tbody tr.is-clickable:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }

/* El combo con buscador ya no vive acá: lo trae el VA App Kit (.combo, .combo__list,
   .combo__opt) junto con su comportamiento en kit.js. Se sacó de este archivo cuando el
   kit lo incorporó, para que no queden dos versiones del mismo control. */

/* ---------- Pestañas ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); margin-bottom: 20px; overflow-x: auto; }
.tab {
  border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--tinta-tenue);
  padding: 11px 15px; cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--tinta); }
.tab.is-on { color: var(--marca); border-bottom-color: var(--marca); }
.tab__n { display: inline-block; margin-left: 7px; font-size: 11.5px; background: var(--superficie-alt); color: var(--tinta-suave); border-radius: 999px; padding: 1px 7px; }
.tab.is-on .tab__n { background: var(--marca-suave); color: var(--marca-suave-contenido); }

/* ---------- Panel de imputación ---------- */
.imputar__cabeza { background: var(--superficie-alt); border-radius: var(--radio); padding: 14px 16px; margin-bottom: 18px; }
/* La ficha de un pago son seis bloques cortos, uno abajo del otro. Los títulos van como
   rótulo y no como título de verdad: lo que se lee es el dato, no el encabezado. */
.pago-ficha h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--tinta-tenue); margin-bottom: 10px; }
.pago-ficha .linea-mov strong { font-family: var(--fuente-mono); font-weight: 500; white-space: nowrap; }
.imputar__linea { display: grid; grid-template-columns: 1fr 130px; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borde-suave); }
.imputar__linea:first-of-type { border-top: 0; }
.imputar__que { font-size: 13.5px; line-height: 1.3; }
.imputar__que small { display: block; color: var(--tinta-tenue); font-size: 12px; margin-top: 2px; }
.imputar__saldo { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; padding-top: 14px; margin-top: 6px; border-top: 2px solid var(--borde); }
.imputar__saldo.is-mal { color: var(--error); }
.ajeno { border-left: 3px solid var(--atencion); padding-left: 10px; }

/* ---------- Barras de mora por antigüedad ---------- */
.mora-bar { display: grid; grid-template-columns: 62px 1fr 96px; gap: 12px; align-items: center; padding: 7px 0; font-size: 13px; }
.mora-bar__lbl { color: var(--tinta-suave); font-weight: 600; }
.mora-bar__pista { height: 22px; background: var(--superficie-alt); border-radius: var(--radio-sm); overflow: hidden; }
.mora-bar__llena { height: 100%; background: var(--serie-1); border-radius: var(--radio-sm); min-width: 2px; }
.mora-bar__llena[data-tono="alto"] { background: var(--error); }
.mora-bar__llena[data-tono="medio"] { background: var(--serie-3); }
.mora-bar__val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
/* Cada barra abre la mora filtrada por su escalón, así que es un enlace y no un div. Sale
   con el color del texto: pintada de azul, la columna entera parecería un menú. */
a.mora-bar { color: inherit; text-decoration: none; border-radius: var(--radio-sm); margin: 0 -8px; padding: 7px 8px; }
a.mora-bar:hover { background: var(--superficie-alt); text-decoration: none; }
a.mora-bar:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }

/* ---------- Formulario público de postulación ---------- */
.paso { margin-bottom: 28px; }
.paso__t { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--tinta-tenue); font-weight: 800; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--borde-suave); }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
/* Texto de ayuda debajo de un campo. Sin margen negativo: el `.field` que lo contiene ya
   pone su separación, y tirarlo hacia arriba lo montaba encima del campo siguiente. */
.ayuda { font-size: 12.5px; color: var(--tinta-tenue); margin: 6px 0 0; line-height: 1.45; }
.field--error .input, .field--error .select { border-color: var(--error); }
.field__error { color: var(--error); font-size: 12.5px; font-weight: 600; margin-top: 5px; }
/* Honeypot: un humano no lo ve y un bot lo completa. No usa display:none, que algunos
   bots detectan; se saca del flujo y se le quita el foco. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gracias { text-align: center; padding: 40px 20px; }
.gracias h2 { font-size: 22px; margin-bottom: 12px; }
.gracias p { color: var(--tinta-suave); font-size: 15px; max-width: 46ch; margin: 0 auto .8em; }

/* ---------- Panel de avisos ---------- */

/* El correo tal como llega, adentro de un marco aislado. Va aislado porque el mail trae su
   propia hoja de estilos (todo inline, para que Gmail y Outlook lo entiendan) y sin el marco
   se mezclaría con la del portal. El borde y el fondo son los de cualquier tarjeta: lo que
   tiene que llamar la atención es el correo, no el recuadro. */
.mail-previa {
  display: block; width: 100%; border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--superficie-alt);
}

/* El WhatsApp y el correo del que sólo guardamos el texto: se muestran tal cual, con los
   saltos de línea donde están, porque así es como los va a leer quien los recibe. */
.mail-texto-plano {
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--fuente); font-size: 13.5px; line-height: 1.55; color: var(--tinta);
  background: var(--superficie-alt); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px; margin: 0;
}

/* Elegir a quién le llega un aviso interno: casillas con la etiqueta visible, no un
   desplegable múltiple. Lo elegido tiene que verse sin abrir nada, porque la pregunta que
   esa pantalla contesta es justamente a quién le llega. */
.lista-elegir { display: flex; flex-direction: column; gap: 2px; }
.lista-elegir label {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 10px; border-radius: var(--radio-sm); font-size: 13.5px; cursor: pointer;
}
.lista-elegir label:hover { background: var(--superficie-alt); }
.lista-elegir input { margin-top: 3px; flex: none; }
.lista-elegir small { display: block; color: var(--tinta-tenue); font-size: 12.5px; margin-top: 2px; }
.lista-elegir input:disabled + span { color: var(--tinta-tenue); }

/* ---------- Cargando ---------- */
.cargando { display: flex; align-items: center; gap: 10px; color: var(--tinta-tenue); font-size: 14px; padding: 30px 0; justify-content: center; }
.girito { width: 18px; height: 18px; border: 2.5px solid var(--borde); border-top-color: var(--marca); border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Responsive propio ---------- */
@media (max-width: 1080px) { .grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .grid--4 { grid-template-columns: 1fr; }
  .campos-2 { grid-template-columns: 1fr; }
  .imputar__linea { grid-template-columns: 1fr 110px; }
  .main { padding: 18px 16px 48px; }
  .page-title { font-size: 21px; }

  /* La barra de arriba es un flex que no envuelve: en un teléfono, el rótulo y el nombre
     con el rol la empujaban hasta 606 px y toda la app arrancaba con scroll horizontal.
     En pantalla chica queda el logo, el avatar y "Salir", que es lo único que se toca. */
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar__title, .topbar__sep, .topbar__user .chico { display: none; }
  .topbar__logo .marca-logo { height: 11px; }

  /* La cabecera de una tarjeta lleva el buscador a la izquierda y los filtros a la
     derecha. En teléfono no entran en una línea: se apilan, y los filtros ruedan. */
  .card__head { flex-wrap: wrap; }
  .card__head .right { margin-left: 0; width: 100%; }
  .seg { max-width: 100%; overflow-x: auto; }
}

/* ---------- El pizarrón del comité de encuadramiento ----------
   Se diseña para el teléfono y no para el escritorio: es lo que abre alguien desde el
   grupo de WhatsApp, entre dos reuniones. Por eso los botones de voto son grandes y están
   siempre al final de cada tarjeta, sin que haya que buscarlos. */
/* El lockup del cliente es ancho y en un teléfono de 360 px se sale de la pantalla. Se
   escala en vez de recortarse: es la marca del cliente y cortada por la mitad queda peor
   que chica. */
.plano__marca svg, .plano__marca img { max-width: 100%; height: auto; }
.caso {
  background: var(--fondo-tarjeta, #fff); border: 1px solid var(--borde);
  border-radius: 14px; padding: 18px; margin-bottom: 14px;
}
.caso__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.caso__nombre { font-size: 18px; font-weight: 600; line-height: 1.25; }
.caso__empresa { font-size: 14px; color: var(--texto-suave); margin-top: 2px; }
.caso__votado {
  flex: none; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--marca-suave); color: var(--marca-suave-contenido);
  border-radius: 999px; padding: 4px 10px;
}
.caso__hace { font-size: 14px; line-height: 1.5; margin: 8px 0; }
.caso__datos { font-size: 13px; color: var(--texto-suave); margin-bottom: 6px; }
.caso__trae { font-size: 13px; margin-bottom: 12px; }
.caso__mas {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--marca); text-decoration: underline;
}
.caso__detalle { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); }
.caso__voto { display: flex; gap: 8px; margin-top: 16px; }
.votar {
  flex: 1; min-height: 46px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--borde); background: #fff;
  font-size: 15px; font-weight: 600; color: var(--texto);
}
.votar.is-on { border-color: var(--marca); background: var(--marca-suave); color: var(--marca-suave-contenido); }
.votar--info { font-size: 13px; }
.caso__pregunta { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
/* Los votos de los demás, con nombre. Van abajo de los botones y no arriba: primero se
   decide, después se mira qué dijo el resto. */
.caso__votos {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde);
}
.voto-chip {
  font-size: 12px; border-radius: 999px; padding: 3px 9px;
  background: var(--fondo-suave, #f1f2f4); color: var(--texto-suave);
}
.voto-chip--si { background: var(--marca-suave); color: var(--marca-suave-contenido); }
.voto-chip--mas_info { background: #fdf1e6; color: #9a3412; }
.ref-bloque { margin-bottom: 12px; padding-left: 12px; border-left: 3px solid var(--borde); }
/* La duda sobre si fabrica se marca: es la pregunta que descarta. */
.ref-bloque--duda { border-left-color: var(--alerta, #c2410c); }
.ref-bloque__quien { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.ref-bloque__datos { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--texto-suave); }
.ref-bloque__texto { font-size: 13.5px; line-height: 1.5; margin-top: 6px; }
.aviso-cerrado {
  font-size: 13.5px; background: var(--marca-suave); color: var(--marca-suave-contenido);
  border-radius: 10px; padding: 10px 12px; margin-top: 10px;
}

/* ---------- Impresión: lo que se lleva a una reunión ---------- */
@media print {
  .topbar, .sidebar, .page-head__actions, .btn, .tabs, .toast { display: none !important; }
  .main { padding: 0; }
  .card { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}