/*
 * Portal · inbodas — frontend dedicado para admin/comercial. Listado de
 * bodas, detalle por boda + cheques recibidos, export CSV.
 */

.inbodas-public.portal { min-height: 100svh; }
.inbodas-public.portal main { padding: 64px 0 96px; }
@media (min-width: 768px) {
  .inbodas-public.portal main { padding: 96px 0 128px; }
}

/* ============================================================
 *  Hero (compartido listado + detalle)
 * ============================================================ */
/* Hero alineado al container — coherente con stats y grid de bodas que
 * ocupan ancho completo. Lede limitado a 620px para legibilidad. */
.inbodas-public.portal .hero {
  margin: 0;
}
.inbodas-public.portal .sprig-wrap {
  color: var(--olive);
  margin-bottom: 14px;
}
.inbodas-public.portal .display-title {
  font-family: var(--font-display);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.1;
  font-size: clamp(28px, 3.6vw, 42px);
  margin: 18px 0 0;
}
.inbodas-public.portal .display-title .name {
  color: var(--olive-deep);
}
.inbodas-public.portal .display-title em {
  font-style: italic; font-weight: 600; color: var(--olive-deep);}
.inbodas-public.portal .lede {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55;
  color: var(--inksoft);
  margin: 22px 0 0; max-width: 620px;
}
.inbodas-public.portal .lede strong { color: var(--ink); font-weight: 500; }

/* ============================================================
 *  Stats globales — 3 mini cards horizontales
 * ============================================================ */
.inbodas-public.portal .portal-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 48px 0 0;
}
@media (min-width: 720px) {
  .inbodas-public.portal .portal-stats { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
.inbodas-public.portal .portal-stat {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(201, 191, 168, 0.5);
  border-radius: 6px;
  padding: 22px 24px;
}
.inbodas-public.portal .portal-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--inkmute);
  margin-bottom: 12px;
}
.inbodas-public.portal .portal-stat-value {
  font-family: 'Inter', sans-serif;
  font-size: 36px; line-height: 1; letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 6px;
}
.inbodas-public.portal .portal-stat-value .cur {
  font-size: 18px; font-style: italic; opacity: 0.7;
  margin-left: 2px;
}
.inbodas-public.portal .portal-stat-sub {
  font-family: 'Inter', sans-serif; font-style: italic;
  font-size: 13.5px; color: var(--inkmute);
}

/* ============================================================
 *  Background pastel coral diagonal a TODA la página del portal.
 *  No es un box: la pieza visual envuelve el flow entero.
 * ============================================================ */
/* ============================================================
 *  Background imagen — cubre toda la página (header + content + footer)
 *  Doble selector para ganar a Bricks (.brx-body) sin importar quién
 *  haya cargado primero el CSS.
 * ============================================================ */
/* Regla base del fondo `.inbodas-portal-bg` vive en inbodas-system.css
 * (con técnica pseudo `::after` fixed para iOS-friendly). Aquí solo
 * mantenemos la estructura del portal para no tener duplicación. */

.inbodas-public.portal {
  position: relative;
  /* Sin background propio — el body lo aporta. */
}

/* ============================================================
 *  WRAPPER LIQUID GLASS — pieza protagonista del dashboard.
 *  Envuelve TODO el contenido del portal con un solo gran cristal.
 * ============================================================ */
/* IMPORTANTE: el wrapper NO tiene backdrop-filter — si lo tuviera,
 * las cards interiores con backdrop-filter dejarían de aplicar blur
 * (limitación conocida: backdrop-filter no atraviesa ancestors con
 * backdrop-filter). El canvas es solo un border+sombra decorativos
 * para dar el "marco" del dashboard; las translucideces individuales
 * las gestiona cada sub-card. */
/* En el portal, comprimimos el espacio antes del footer.
 * El footer por defecto añade 96-128px de margin-top + 56-80px de padding-top
 * que en el contexto dashboard se siente como un vacío enorme. */
body.inbodas-portal-bg .ib-footer {
  margin-top: 0 !important;
  padding-top: 32px !important;
}
@media (min-width: 768px) {
  body.inbodas-portal-bg .ib-footer { padding-top: 40px !important; }
}
body.inbodas-portal-bg .ib-footer-hero {
  margin-bottom: 28px !important;
}

.inbodas-public.portal .portal-canvas {
  position: relative;
  margin: 28px 0 24px;
  padding: 32px 32px 36px;
  border-radius: 32px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.38) inset,
    0 12px 24px -8px rgba(15, 12, 8, 0.05),
    0 32px 64px -20px rgba(15, 12, 8, 0.08);
}
@media (max-width: 720px) {
  .inbodas-public.portal .portal-canvas {
    margin: 12px 0 24px;
    padding: 14px;
    border-radius: 20px;
  }
}

/* Hero plano — sin caja, sin borde, sin background propio.
 * Solo tipografía editorial sobre el gradient general. */
.inbodas-public.portal .portal-hero {
  margin: 20px 0 32px;
  padding: 16px 0 0;
}
/* Eyebrow del hero — usa la clase global .eyebrow (coral + dots).
 * La clase global es inline-flex; aquí la forzamos a flex (block-level)
 * para que ocupe su propia línea por encima del h1. */
.inbodas-public.portal .portal-hero .eyebrow {
  display: flex;
  width: fit-content;
  margin: 0 0 14px;
}
.inbodas-public.portal .portal-hero-greeting {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.1;
}
@media (max-width: 720px) {
  .inbodas-public.portal .portal-hero-greeting { font-size: 26px; gap: 6px; }
}
.inbodas-public.portal .portal-hero-name {
  color: var(--olive-deep);
}
.inbodas-public.portal .portal-hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--inksoft);
  margin: 0;
  line-height: 1.45;
  max-width: 540px;
}

/* Detalle de boda — el h1 es solo el nombre, lo tratamos como bloque
 * para que ocupe su propia línea (sin inline-flex, sin gap horizontal).
 * Tamaño dinámico con clamp. Tabla de saltos resultantes:
 *   320px  → 22px  (piso)
 *   600px  → 22px  (piso)
 *   720px  → 25.9px ≈ 26px
 *   900px  → 32.4px
 *   1024px → 36.9px
 *   1200px → 43.2px
 *   ≥1334px → 48px (techo)
 * Sin breakpoints discretos: escala suave por 3.6vw. */
/* Mismo tamaño que el saludo base de portal/mi cuenta — 34px desktop,
 * 26px mobile (override responsive más abajo). El override anterior usaba
 * clamp(22px,3.6vw,48px) que disparaba a 48px en pantallas ≥1334px y
 * rompía la coherencia visual con Mi Cuenta / portada admin. */
.inbodas-public.portal .portal-hero--detalle .portal-hero-greeting {
  display: block;
  color: var(--ink);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: 0 0 12px;
}
@media (max-width: 720px) {
  .inbodas-public.portal .portal-hero--detalle .portal-hero-greeting { font-size: 26px; }
}
.inbodas-public.portal .portal-hero--detalle .portal-hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--inksoft);
}
.inbodas-public.portal .portal-hero--detalle .portal-hero-sub strong {
  font-weight: 500;
  color: var(--ink);
}

/* ============================================================
 *  Quick actions — cards horizontales con icono squircle
 * ============================================================ */
.inbodas-public.portal .portal-quick { margin: 0 0 32px; }
.inbodas-public.portal .portal-quick-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
.inbodas-public.portal .portal-quick-count {
  color: var(--inkmute);
  font-weight: 400;
  margin-left: 2px;
}
.inbodas-public.portal .portal-quick-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 720px) {
  .inbodas-public.portal .portal-quick-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.inbodas-public.portal .portal-quick-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  /* Grid items por defecto tienen min-width: auto (= tamaño de su contenido).
   * Como el body interno tiene white-space: nowrap, el card no podía
   * encogerse y desbordaba el canvas en mobile. */
  min-width: 0;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 18px;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 4px 10px -2px rgba(15, 12, 8, 0.04),
    0 14px 28px -10px rgba(15, 12, 8, 0.10);
  -webkit-tap-highlight-color: transparent;
  transition: background .22s ease, transform .22s ease, box-shadow .25s ease;
}
.inbodas-public.portal .portal-quick-card:hover {
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 6px 14px -4px rgba(15, 12, 8, 0.06),
    0 24px 44px -16px rgba(15, 12, 8, 0.16);
}
.inbodas-public.portal .portal-quick-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
}
.inbodas-public.portal .portal-quick-icon svg { width: 18px; height: 18px; }
.inbodas-public.portal .portal-quick-icon--coral   { background: rgba(239, 68, 77, 0.10); color: var(--olive-deep); }
.inbodas-public.portal .portal-quick-icon--emerald { background: rgba(34, 139, 75, 0.10); color: #1E6B36; }
.inbodas-public.portal .portal-quick-icon--amber   { background: rgba(199, 142, 31, 0.12); color: #95641C; }
.inbodas-public.portal .portal-quick-icon--blue    { background: rgba(45, 96, 196, 0.10); color: #2C5BB6; }

.inbodas-public.portal .portal-quick-body {
  display: flex; flex-direction: column;
  gap: 2px;
  flex: 1; min-width: 0;
}
.inbodas-public.portal .portal-quick-title-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbodas-public.portal .portal-quick-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--inksoft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbodas-public.portal .portal-quick-arrow {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 10px;
  background: rgba(15, 12, 8, 0.04);
  color: var(--inksoft);
  flex-shrink: 0;
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.inbodas-public.portal .portal-quick-arrow svg { width: 14px; height: 14px; }
.inbodas-public.portal .portal-quick-card:hover .portal-quick-arrow {
  background: rgba(15, 12, 8, 0.08);
  color: var(--ink);
  transform: translateX(2px);
}

/* ============================================================
 *  KPI cards — dashboard pro
 * ============================================================ */
.inbodas-public.portal .portal-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 0 40px;
}
/* Mobile: carrusel horizontal con scroll-snap. El scroll ocurre
 * DENTRO del canvas — sin margins negativos para no desbordar la
 * tarjeta del portal-canvas. Cada card tiene un width amplio (~85%
 * del wrapper) para insinuar la siguiente. */
@media (max-width: 719px) {
  .inbodas-public.portal .portal-kpis {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* `overflow-x: auto` también recorta el eje Y en la mayoría de
     * browsers (overflow-y:visible se promueve a auto). Padding
     * generoso arriba y abajo para que las sombras de las cards
     * (~22px de spread hacia abajo) no queden cortadas. */
    padding-top: 8px;
    padding-bottom: 28px;
    margin-bottom: 12px;
    scrollbar-width: none;
  }
  .inbodas-public.portal .portal-kpis::-webkit-scrollbar { display: none; }
  .inbodas-public.portal .portal-kpi {
    flex: 0 0 85%;
    min-width: 240px;
    scroll-snap-align: start;
  }
}
.inbodas-public.portal .portal-kpi {
  position: relative;
  padding: 22px 24px;
  /* Liquid glass: translúcido fuerte + blur grande */
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 4px 10px -2px rgba(15, 12, 8, 0.04),
    0 16px 32px -10px rgba(15, 12, 8, 0.10);
}
/* Sin hover en KPI — no son clickables, son métricas estáticas. */
.inbodas-public.portal .portal-kpi-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.inbodas-public.portal .portal-kpi-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--inkmute);
}
.inbodas-public.portal .portal-kpi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: var(--olive-deep);
  background: rgba(239, 68, 77, 0.08);
}
.inbodas-public.portal .portal-kpi-icon svg { width: 15px; height: 15px; }
.inbodas-public.portal .portal-kpi-num {
  font-family: 'Inter', sans-serif;
  font-size: 36px; font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.04;
  color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.inbodas-public.portal .portal-kpi-cur {
  font-size: 16px;
  color: var(--olive-deep);
  font-style: italic;
}
.inbodas-public.portal .portal-kpi-foot {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.inbodas-public.portal .portal-kpi-foot-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--inksoft);
}
.inbodas-public.portal .portal-kpi-foot-lbl strong {
  color: var(--ink);
  font-weight: 500;
}
.inbodas-public.portal .portal-kpi-foot-sep {
  margin: 0 4px;
  opacity: 0.5;
}
.inbodas-public.portal .portal-kpi-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.inbodas-public.portal .portal-kpi-delta.is-up {
  background: rgba(34, 139, 75, 0.10);
  color: #196E3A;
}
.inbodas-public.portal .portal-kpi-delta.is-down {
  background: rgba(239, 68, 77, 0.10);
  color: var(--olive-deep);
}
.inbodas-public.portal .portal-kpi-delta.is-neutral {
  background: rgba(15, 12, 8, 0.05);
  color: var(--inkmute);
}

/* Sparkline al fondo de la card. Respeta el padding del padre para no
 * tocar los bordes — antes usaba margin negativo (-24px lateral, -22px
 * inferior) y quedaba clavado al borde de la card. */
.inbodas-public.portal .portal-kpi-spark {
  margin: 18px 0 4px;
  height: 44px;
  display: block;
  position: relative;
  overflow: hidden;
}
.inbodas-public.portal .portal-kpi-spark .sparkline {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ============================================================
 *  Responsive mobile (≤720px) — overrides compactos para que
 *  todo respire sin desbordar dentro del wrapper canvas.
 * ============================================================ */
@media (max-width: 720px) {
  /* Hero más compacto sin perder jerarquía */
  .inbodas-public.portal .portal-hero { margin: 12px 0 20px; padding: 8px 0 0; }

  /* KPI cards: padding interior reducido + sparkline ajustado al nuevo padding */
  .inbodas-public.portal .portal-kpi {
    padding: 18px 18px;
    border-radius: 16px;
  }
  .inbodas-public.portal .portal-kpi-num { font-size: 30px; }
  .inbodas-public.portal .portal-kpi-spark {
    margin: 14px 0 2px;
    height: 36px;
  }
  .inbodas-public.portal .portal-kpis { gap: 12px; margin-bottom: 28px; }

  /* Quick actions más compactas */
  .inbodas-public.portal .portal-quick-card { padding: 14px 16px; border-radius: 14px; }
  .inbodas-public.portal .portal-quick { margin-bottom: 24px; }
  .inbodas-public.portal .portal-quick-icon { width: 34px; height: 34px; }
  .inbodas-public.portal .portal-quick-icon svg { width: 16px; height: 16px; }

  /* Toggle vista grid/list oculto: en mobile siempre LIST por defecto. */
  .inbodas-public.portal .portal-view-toggle { display: none !important; }

  /* (El switch a "botón Filtros + modal" se aplica en su propio media
   * query a 820px, ver más abajo, porque a partir de ese ancho los
   * selects inline ya no caben cómodos en el toolbar.) */

  /* Código de boda: stack vertical centrado en mobile (código encima
   * y botón "Copiar código" debajo, ambos alineados al centro). */
  .inbodas-public.portal .portal-codigo-card-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 20px 18px;
  }
  .inbodas-public.portal .portal-codigo {
    font-size: 18px;
    letter-spacing: 0.08em;
    word-break: break-all;
  }
  .inbodas-public.portal .portal-codigo-copy {
    align-self: center;
  }

  /* Hero detalle: solo ajustamos el margen — el `font-size` viene del
   * `clamp(...)` global, sin override aquí (antes 34px pisaba al clamp
   * y dejaba el título demasiado grande en mobile). */
  .inbodas-public.portal .portal-hero--detalle .portal-hero-greeting {
    margin-bottom: 8px;
  }

  /* Sección "Cheques recibidos · N — Total X€": claramente menor que h1. */
  .inbodas-public.portal .portal-toolbar-title { font-size: 16px; }
  .inbodas-public.portal .portal-toolbar-count { font-size: 14px; }

  /* Total: en mobile NO ocupa fila propia. Se renderiza inline al lado
   * derecho del título "Cheques recibidos · N", como pill discreta. */
  .inbodas-public.portal .portal-toolbar-head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .inbodas-public.portal .portal-cheques-total .serif-italic { display: none; }
  .inbodas-public.portal .portal-cheques-total {
    flex-shrink: 0;
  }
  .inbodas-public.portal .portal-cheques-total strong { font-size: 16px; }
  .inbodas-public.portal .portal-cheques-total strong .cur { font-size: 11px; }
}

/* ============================================================
 *  Toolbar (título + export / total)
 * ============================================================ */
.inbodas-public.portal .portal-toolbar {
  position: relative;
  z-index: 10;
  margin: 56px 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(201, 191, 168, 0.5);
  /* Espacio cuando se llega por anchor (#listado-eventos desde el paginador).
   * Generoso para que el header fijo de la página no tape el title del listado. */
  scroll-margin-top: 140px;
}
/* Al volver desde el detalle aterrizamos en #exp-N (el card concreto). */
.inbodas-public.portal .portal-card { scroll-margin-top: 140px; }

/* Pre-render guard: ocultamos el portal con visibility (sin transición —
 * animar opacity de un elemento con backdrop-filter causa lag visible
 * porque el GPU recompone el blur en cada frame). */
html.inbodas-restoring-scroll .inbodas-public.portal {
  visibility: hidden;
}

/* Mientras esperamos respuesta AJAX, atenuamos suavemente el listado para
 * que se note que está actualizando, sin bloquear la interacción. */
#portal-listado-results.is-loading {
  opacity: 0.55;
  transition: opacity .12s ease-out;
}
#portal-listado-results {
  transition: opacity .16s ease-out;
}

/* Velo overlay para el fade-in suave SIN tocar el backdrop-filter del
 * portal. Es un <div> sólido fixed que cubre todo el viewport con el
 * mismo color del fondo de la página, y solo le animamos a él la
 * opacidad — no toca el blur, así que sale fluido. */
#ib-portal-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(180deg, #efe6f0 0%, #d8dde8 100%);
  pointer-events: none;
  opacity: 1;
  transition: opacity .14s ease-out;
  will-change: opacity;
}
#ib-portal-veil.is-fading { opacity: 0; }

/* Highlight del último card visitado al volver del detalle.
 * Anillo coral persistente durante 1.5s, transición suave de salida. Sin
 * keyframes (que estaban dando problemas de prioridad/no se veían). */
.inbodas-public.portal .portal-card.is-last-viewed {
  position: relative;
  z-index: 5;
  border-color: var(--olive) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 0 0 1.5px var(--olive),
    0 14px 28px -10px rgba(239, 68, 77, 0.22) !important;
  transition: border-color .35s ease-out, box-shadow .35s ease-out;
}
/* Quita el outline azul del navegador al aterrizar / hacer click. */
.inbodas-public.portal .portal-card:focus { outline: none; }
/* Sólo dejamos focus visible al navegar con teclado (accesibilidad). */
.inbodas-public.portal .portal-card:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}
/* Highlight sutil del card target — animación corta para guiar el ojo. */
.inbodas-public.portal .portal-card:target {
  animation: ib-card-pulse 1.6s ease-out;
}
@keyframes ib-card-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184, 149, 106, 0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(184, 149, 106, 0.08); }
  100% { box-shadow: 0 0 0 0 rgba(184, 149, 106, 0); }
}
@media (max-width: 720px) {
  .inbodas-public.portal .portal-toolbar,
  .inbodas-public.portal .portal-card { scroll-margin-top: 96px; }
}
/* Scroll suave global cuando navegamos a un anchor en la página. */
html { scroll-behavior: smooth; }
.inbodas-public.portal .portal-toolbar-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 14px 18px;
}
/* Wrapper que agrupa "Total Xe" + botón "Descargar Excel" en la vista
 * detalle del expediente — los alinea a la derecha del toolbar-head sin
 * que el flex space-between los separe. */
.inbodas-public.portal .portal-toolbar-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
/* Variante compacta del CTA export para colocarlo junto al total. */
.inbodas-public.portal .portal-export--detail {
  padding: 9px 18px;
  font-size: 10px;
}
.inbodas-public.portal .portal-toolbar-title {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.012em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.inbodas-public.portal .portal-toolbar-count {
  color: var(--olive-deep);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0;
}

/* ============================================================
 *  Toolbar de tools — fila unificada altura 40px, estética liviana.
 *  Search ocupa lo que sobre, selects compactos prefix+valor inline,
 *  view toggle minimal. Todo coral en hover/focus/active.
 * ============================================================ */
.inbodas-public.portal .portal-toolbar-tools {
  --tool-h: 40px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
  column-gap: 8px;
  align-items: center;
  margin-top: 18px;
}
/* Trigger del modal de filtros — efecto liquid glass idéntico al
 * .portal-view-toggle (mismo blur, mismo fondo translúcido). Vive en
 * .portal-toolbar-head-actions junto al botón "Descargar Excel" y solo
 * se muestra a ≤820px. */
.inbodas-public.portal .portal-mobile-filters-trigger {
  display: none;
  align-items: center;
  gap: 8px;
  height: var(--tool-h, 40px);
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  position: relative;
  box-sizing: border-box;
}
.inbodas-public.portal .portal-mobile-filters-trigger:hover {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--paper);
}
.inbodas-public.portal .portal-mobile-filters-trigger:hover svg { color: var(--paper); }
.inbodas-public.portal .portal-mobile-filters-trigger svg {
  width: 16px; height: 16px; color: var(--olive-deep);
  flex-shrink: 0;
}
.inbodas-public.portal .portal-mobile-filters-label {
  /* tipografía heredada del botón */
}
.inbodas-public.portal .portal-mobile-filters-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  background: var(--olive);
  color: var(--paper);
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  margin-left: 2px;
}
/* Filtros del toolbar:
 *   · Estado + Comercial → SIEMPRE dentro del modal de "+ Filtros".
 *   · Tipo + Finca       → visibles en el toolbar a >1080px, y se mueven
 *                          al modal a ≤1080px para que la fila respire.
 * El botón "+ Filtros" está siempre visible (lo que cambia es qué filtros
 * contiene). */
.inbodas-public.portal .portal-toolbar-tools .portal-filters {
  display: none !important;
}
/* Hay dos instancias del botón "+ Filtros":
 *   --in-toolbar : visible a partir de 721px, en el .portal-toolbar-tools
 *                  junto al buscador / selects visibles. En 721-1080 está
 *                  al lado del buscador; >1080 además acompaña a Tipo,
 *                  Finca y Orden visibles.
 *   --in-head    : visible solo en mobile (≤720px), arriba en el
 *                  .portal-toolbar-head-actions junto a "Descargar Excel"
 *                  alineado a la derecha.
 * Solo se renderiza UNO a la vez según viewport. Ambos comparten el mismo
 * data-portal-mobile-filters y se enganchan al mismo handler. */
.inbodas-public.portal .portal-mobile-filters-trigger { display: none; }
@media (min-width: 721px) {
  .inbodas-public.portal .portal-mobile-filters-trigger--in-toolbar {
    display: inline-flex !important;
  }
}
@media (max-width: 720px) {
  .inbodas-public.portal .portal-mobile-filters-trigger--in-head {
    display: inline-flex !important;
  }
  /* Excel a la izquierda + "+ Filtros" pegado a la derecha de la pantalla.
   * El head-actions ocupa toda la fila bajo el título y reparte con
   * space-between. (No afecta al detalle .portal-cheques porque su
   * regla específica gana por mayor especificidad.) */
  .inbodas-public.portal .portal-toolbar-head-actions {
    width: 100%;
    justify-content: space-between;
  }
}
@media (max-width: 1080px) {
  .inbodas-public.portal .portal-toolbar-tools .portal-select--primary,
  .inbodas-public.portal .portal-toolbar-tools .portal-select--sort {
    display: none !important;
  }
}
/* En el detalle del expediente: cuando los selects son visibles fuera
 * (>1080), no tiene sentido mostrar también el botón "+ Filtros" porque
 * todos los controles ya están accesibles. */
@media (min-width: 1081px) {
  .inbodas-public.portal .portal-cheques .portal-mobile-filters-trigger--in-toolbar {
    display: none !important;
  }
}

@media (max-width: 820px) {
  /* En el DETALLE (sección .portal-cheques) reorganizamos el head:
   *   Fila 1: Total Xe (solo, alineado a la izquierda)
   *   Fila 2: [Descargar Excel] ............ [Filtros]
   * Sin esto el conjunto se ve apretado, el botón Excel parte el texto
   * a dos líneas y queda en el medio sin jerarquía clara. En el LISTADO
   * principal mantenemos los pills en la misma fila como estaba. */
  .inbodas-public.portal .portal-cheques .portal-toolbar-head-actions {
    width: 100%;
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 12px;
    justify-content: space-between;
  }
  .inbodas-public.portal .portal-cheques .portal-toolbar-head-actions .portal-cheques-total {
    flex-basis: 100%;
  }
  /* Como ahora el Total tiene su propia fila, recuperamos el "Total" en
   * cursiva delante de la cifra (que otra regla genérica de mobile
   * ocultaba asumiendo layout inline) y volvemos al tamaño grande. */
  .inbodas-public.portal .portal-cheques .portal-cheques-total .serif-italic { display: inline; }
  .inbodas-public.portal .portal-cheques .portal-cheques-total strong { font-size: 22px; }
  .inbodas-public.portal .portal-cheques .portal-cheques-total strong .cur { font-size: 14px; }
}
/* Normalización de altura: todos los hijos del toolbar respetan el --tool-h
 * exacto y se alinean por centro vertical real.
 *
 * Bricks aplica `label { margin-bottom: 5px; }` globalmente (vía @layer
 * bricks), lo que empuja los `<label class="portal-select">` 5px hacia
 * arriba respecto a los demás elementos del toolbar — bug visible como
 * inconsistencia de altura/alineación. Reseteamos ese margin aquí. */
.inbodas-public.portal .portal-toolbar-tools .portal-search,
.inbodas-public.portal .portal-toolbar-tools .portal-select,
.inbodas-public.portal .portal-toolbar-tools .portal-view-toggle {
  box-sizing: border-box;
  height: var(--tool-h);
  align-self: center;
  margin: 0;
}
.inbodas-public.portal .portal-toolbar-tools label.portal-select { margin: 0; }
.inbodas-public.portal .portal-toolbar-tools .portal-search-input,
.inbodas-public.portal .portal-toolbar-tools .portal-view-btn {
  box-sizing: border-box;
}

/* Buscador */
.inbodas-public.portal .portal-search {
  position: relative;
  flex: 1 1 280px;
  min-width: 240px;
  display: inline-flex;
  align-items: center;
  height: var(--tool-h);
}
.inbodas-public.portal .portal-search-icon {
  position: absolute;
  left: 14px;
  width: 15px; height: 15px;
  color: var(--inksoft);
  pointer-events: none;
  display: inline-flex;
}
.inbodas-public.portal .portal-search-icon svg { width: 100%; height: 100%; }
.inbodas-public.portal .portal-search-input {
  width: 100%;
  height: var(--tool-h);
  padding: 0 40px 0 38px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  /* Liquid glass coherente con el resto */
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  outline: none;
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.inbodas-public.portal .portal-search-input::placeholder {
  color: var(--inkmute);
  font-weight: 400;
}
.inbodas-public.portal .portal-search-input:hover {
  background: rgba(255, 255, 255, 0.62);
}
.inbodas-public.portal .portal-search-input:focus {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(239, 68, 77, 0.08);
}
.inbodas-public.portal .portal-search-clear {
  position: absolute;
  right: 8px;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--inkmute);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .22s ease, color .22s ease;
}
.inbodas-public.portal .portal-search-clear svg { width: 12px; height: 12px; }
.inbodas-public.portal .portal-search-clear:hover {
  background: rgba(239, 68, 77, 0.08);
  color: var(--olive-deep);
}

/* Filtros — selects compactos con prefijo inline. Mismo aspect que
 * el buscador (pill, hairline border, hover/focus coral). */
.inbodas-public.portal .portal-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.inbodas-public.portal .portal-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--tool-h);
  padding: 0 14px 0 16px;
  /* bg + blur movidos a ::before para no cancelar el backdrop-filter
   * del panel hijo (limitación de browser). */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.inbodas-public.portal .portal-select::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: -1;
  pointer-events: none;
  transition: background .22s ease;
}
.inbodas-public.portal .portal-select > * { position: relative; }
.inbodas-public.portal .portal-select.is-open {
  z-index: 100;
}
.inbodas-public.portal .portal-select:hover::before {
  background: rgba(255, 255, 255, 0.62);
}
.inbodas-public.portal .portal-select:focus-within::before {
  background: rgba(255, 255, 255, 0.55);
}
.inbodas-public.portal .portal-select:focus-within {
  box-shadow: 0 0 0 3px rgba(239, 68, 77, 0.08);
}
.inbodas-public.portal .portal-select-prefix {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--inkmute);
  letter-spacing: 0;
  user-select: none;
  pointer-events: none;
}
.inbodas-public.portal .portal-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0 18px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  /* Chevron coral más sutil — 1 sola línea (▾) */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--olive-deep) 50%),
    linear-gradient(135deg, var(--olive-deep) 50%, transparent 50%);
  background-position:
    calc(100% - 9px) center,
    calc(100% - 5px) center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

/* ============================================================
 *  Custom dropdown — reemplaza al popup nativo del <select> para
 *  soportar liquid glass. JS: assets/js/portal-dropdown.js inicializa
 *  el componente preservando el <select> oculto (a11y + change events).
 * ============================================================ */
.inbodas-public.portal .portal-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0 18px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  /* Chevron coral, igual que el select nativo */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--olive-deep) 50%),
    linear-gradient(135deg, var(--olive-deep) 50%, transparent 50%);
  background-position:
    calc(100% - 9px) center,
    calc(100% - 5px) center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: transform .25s ease;
}
.inbodas-public.portal .portal-select.is-open .portal-select-trigger {
  background-image:
    linear-gradient(45deg, var(--olive-deep) 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, var(--olive-deep) 50%);
}
.inbodas-public.portal .portal-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  min-width: 100%;
  max-width: 280px;
  max-height: 320px;
  overflow-y: auto;
  /* Scrollbar editorial discreta — coral ultra-fina. */
  scrollbar-width: thin;
  scrollbar-color: rgba(239, 68, 77, 0.20) transparent;
  padding: 6px;
  /* Ahora el ::before del label libera el backdrop-filter del padre,
   * así que el blur del panel sí afecta al body bg directamente. */
  background: rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(60px) saturate(200%);
          backdrop-filter: blur(60px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 8px 22px -10px rgba(15, 12, 8, 0.12),
    0 24px 48px -16px rgba(15, 12, 8, 0.22);
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: portalDropdownIn .18s ease-out;
}
.inbodas-public.portal .portal-select-panel[hidden] { display: none; }
/* WebKit (Chrome / Safari / Edge): scrollbar ultra-fina coral. */
.inbodas-public.portal .portal-select-panel::-webkit-scrollbar {
  width: 2px;
}
.inbodas-public.portal .portal-select-panel::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}
.inbodas-public.portal .portal-select-panel::-webkit-scrollbar-thumb {
  background: var(--olive-deep);
  border-radius: 999px;
  transition: background .18s ease;
}
.inbodas-public.portal .portal-select-panel:hover::-webkit-scrollbar-thumb {
  background: var(--olive-deep);
}
.inbodas-public.portal .portal-select-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(239, 68, 77, 0.55);
}
@keyframes portalDropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.inbodas-public.portal .portal-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  transition: background .18s ease, color .18s ease;
}
.inbodas-public.portal .portal-select-option:hover,
.inbodas-public.portal .portal-select-option:focus-visible {
  background: rgba(239, 68, 77, 0.10);
  color: var(--olive-deep);
}
.inbodas-public.portal .portal-select-option.is-selected {
  background: rgba(239, 68, 77, 0.14);
  color: var(--olive-deep);
}
.inbodas-public.portal .portal-select-option.is-selected::after {
  content: "✓";
  font-weight: 600;
  margin-left: 6px;
}

/* Selector de vista (grid / list) — mismo height que el resto.
 * Selectores compartidos por el portal de comerciales y "Mi cuenta", para
 * que el componente sea visualmente idéntico en ambos sitios. */
.inbodas-public.portal .portal-view-toggle,
.inbodas-mi-cuenta .portal-view-toggle {
  display: inline-flex;
  align-items: center;
  height: var(--tool-h, 40px);
  box-sizing: border-box;       /* padding + border dentro del height fijo */
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  padding: 3px;
  gap: 1px;
}
.inbodas-public.portal .portal-view-btn,
.inbodas-mi-cuenta .portal-view-btn { box-sizing: border-box; }
.inbodas-public.portal .portal-view-btn,
.inbodas-mi-cuenta .portal-view-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--inksoft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .22s ease, color .22s ease;
}
.inbodas-public.portal .portal-view-btn svg,
.inbodas-mi-cuenta .portal-view-btn svg { width: 16px; height: 16px; }
.inbodas-public.portal .portal-view-btn:hover,
.inbodas-mi-cuenta .portal-view-btn:hover { color: var(--olive-deep); }
.inbodas-public.portal .portal-view-btn.is-active,
.inbodas-mi-cuenta .portal-view-btn.is-active {
  background: rgba(239, 68, 77, 0.10);
  color: var(--olive-deep);
}

/* Responsive: en mobile la fila wrap y el view-toggle queda alineado a la izquierda */
@media (max-width: 560px) {
  .inbodas-public.portal .portal-search { flex: 1 1 100%; }
  .inbodas-public.portal .portal-filters { flex: 1 1 100%; }
  .inbodas-public.portal .portal-filters .portal-select { flex: 1 1 auto; }
}

/* Paginación */
.inbodas-public.portal .portal-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(15, 12, 8, 0.06);
}
.inbodas-public.portal .portal-pagination-info {
  width: 100%;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--inkmute);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.inbodas-public.portal .portal-page,
.inbodas-public.portal .portal-page-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--inksoft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.inbodas-public.portal .portal-page:hover:not(.is-active):not(:disabled),
.inbodas-public.portal .portal-page-nav:hover:not(:disabled) {
  background: rgba(239, 68, 77, 0.06);
  color: var(--olive-deep);
}
.inbodas-public.portal .portal-page.is-active {
  background: rgba(239, 68, 77, 0.10);
  color: var(--olive-deep);
  font-weight: 600;
  border-color: var(--olive-deep);
}
.inbodas-public.portal .portal-page:disabled,
.inbodas-public.portal .portal-page-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.inbodas-public.portal .portal-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--inkmute);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
}

/* CTA pill coral sólida — estilo global compartido por todos los botones
 * de acción del portal (Descargar Excel, Copiar código, etc.). */
.inbodas-public.portal .portal-export,
.inbodas-public.portal .portal-codigo-copy {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px;
  background: var(--olive);
  color: var(--paper) !important;
  border: 1px solid var(--olive);
  border-radius: 50px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 22px -10px rgba(239, 68, 77, 0.45);
  transition: background .25s ease, transform .25s ease, box-shadow .35s ease;
}
.inbodas-public.portal .portal-export:hover,
.inbodas-public.portal .portal-codigo-copy:hover {
  background: var(--olive-deep);
  border-color: var(--olive-deep);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 16px 32px -12px rgba(239, 68, 77, 0.55);
}
.inbodas-public.portal .portal-export-action,
.inbodas-public.portal .portal-codigo-copy-action,
.inbodas-public.portal .portal-codigo-send-action {
  border: 0; padding: 0;
  font: inherit; color: inherit; letter-spacing: inherit;
}

/* Wrapper de acciones del código (copiar + enviar). En desktop columna a la
 * derecha del código; en mobile fila completa centrada. */
.inbodas-public.portal .portal-codigo-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
@media (max-width: 720px) {
  .inbodas-public.portal .portal-codigo-actions { width: 100%; }
}
/* Igualar ancho: los 3 botones ocupan el ancho del wrapper. */
.inbodas-public.portal .portal-codigo-actions .portal-codigo-copy,
.inbodas-public.portal .portal-codigo-actions .portal-codigo-send,
.inbodas-public.portal .portal-codigo-actions .portal-codigo-clay,
.inbodas-public.portal .portal-codigo-actions .portal-codigo-coral {
  display: flex;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

/* ---------- .portal-codigo-coral — alias visual del sólido coral.
 * Se usa para botones que necesitan el mismo aspecto coral sólido que
 * `.portal-codigo-copy` PERO sin la lógica is-copied/data-copy del JS
 * (ej. el enlace "Enviar por WhatsApp" del panel Mi evento). */
.inbodas-public.portal .portal-codigo-coral {
  align-items: center; gap: 8px;
  padding: 12px 24px;
  background: var(--olive);
  color: var(--paper) !important;
  border: 1px solid var(--olive);
  border-radius: 50px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 22px -10px rgba(239, 68, 77, 0.45);
  transition: background .25s ease, transform .25s ease, box-shadow .35s ease;
}
.inbodas-public.portal .portal-codigo-coral:hover {
  background: var(--olive-deep);
  border-color: var(--olive-deep);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 16px 32px -12px rgba(239, 68, 77, 0.55);
}
.inbodas-public.portal .portal-codigo-coral-action {
  border: 0; padding: 0;
  font: inherit; color: inherit; letter-spacing: inherit;
  display: inline-flex; align-items: center;
}

/* ---------- Segundo botón: .portal-codigo-clay (Enviar por WhatsApp) ----------
 * Sólido en una escala coral más profunda/cálida (#C25450, terracota).
 * Mismo idioma cromático que el primary (#EF444D) pero un escalón más
 * apagado y más tierra — escala armónica, no compite por el ojo.
 *   #EF444D primary  →  #C25450 secondary
 * Hover oscurece a #A8443F. Texto blanco, icono blanco. */
.inbodas-public.portal .portal-codigo-clay {
  align-items: center; gap: 8px;
  padding: 12px 24px;
  background: #C25450;
  color: #fff !important;
  border: 1px solid #C25450;
  border-radius: 50px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 8px 22px -10px rgba(194, 84, 80, 0.5);
  transition: background .22s ease, transform .22s ease, box-shadow .25s ease;
}
.inbodas-public.portal .portal-codigo-clay:hover {
  background: #A8443F;
  border-color: #A8443F;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 14px 30px -12px rgba(194, 84, 80, 0.65);
}
.inbodas-public.portal .portal-codigo-clay-action {
  border: 0; padding: 0;
  font: inherit; color: inherit; letter-spacing: inherit;
  display: inline-flex; align-items: center;
}

/* Botón "Enviar a los novios" — variante ghost del CTA principal. Mismo
 * tamaño y forma que .portal-codigo-copy para que se sientan hermanas. */
.inbodas-public.portal .portal-codigo-send {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 24px;
  background: transparent;
  color: var(--olive) !important;
  border: 1px solid var(--olive);
  border-radius: 50px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .25s ease;
}
.inbodas-public.portal .portal-codigo-send:hover {
  /* Hover sólido coral-deep — coral más oscuro que el primary
   * (#EF444D), borde del mismo tono, texto blanco para legibilidad. */
  background: var(--olive-deep);
  color: var(--paper) !important;
  border-color: var(--olive-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(239, 68, 77, 0.35);
}
.inbodas-public.portal .portal-codigo-send.is-confirming {
  background: rgba(239, 68, 77, 0.10);
}
.inbodas-public.portal .portal-codigo-send.is-loading {
  pointer-events: none;
  opacity: 0.7;
}
.inbodas-public.portal .portal-codigo-send.is-success {
  background: var(--olive);
  color: var(--paper) !important;
}

/* Modal "Enviar código" — el sistema visual vive en .ib-modal-* de
 * inbodas-system.css. */

/* ============================================================
 *  Vistas de la lista de bodas
 *  .portal-bodas--grid → cards en columnas
 *  .portal-bodas--list → cards horizontales (listado denso)
 * ============================================================ */
.inbodas-public.portal .portal-grid,
.inbodas-public.portal .portal-bodas--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .inbodas-public.portal .portal-grid,
  .inbodas-public.portal .portal-bodas--grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (min-width: 1080px) {
  .inbodas-public.portal .portal-grid,
  .inbodas-public.portal .portal-bodas--grid { grid-template-columns: repeat(3, 1fr); }
}

/* Vista LISTADO — fila por boda, densa, dataviz-style.
 * Reorganizamos los hijos de .portal-card en una sola línea horizontal:
 * codigo | novios | meta | cheques | total | arrow. */
.inbodas-public.portal .portal-bodas--list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inbodas-public.portal .portal-bodas--list .portal-card {
  display: grid;
  grid-template-columns:
    minmax(80px, 100px)          /* expediente (id CRM) — PRIMERA columna */
    minmax(140px, 160px)         /* codigo */
    minmax(140px, 1.2fr)         /* novios */
    minmax(105px, 125px)         /* fecha */
    minmax(130px, 1fr)           /* finca */
    minmax(78px, 105px)          /* cheques */
    minmax(105px, 130px)         /* total */
    24px;                        /* arrow */
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-radius: 10px;
}
.inbodas-public.portal .portal-bodas--list .portal-card-top {
  padding: 0;
  border: 0;
  display: contents;            /* sus hijos pasan al grid del padre */
}
.inbodas-public.portal .portal-bodas--list .portal-card-codigo {
  order: 1;
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.inbodas-public.portal .portal-bodas--list .portal-card-cheques {
  order: 5;
  font-size: 12.5px;
  white-space: nowrap;
}
.inbodas-public.portal .portal-bodas--list .portal-card-cheques strong {
  font-size: 18px;
}
/* Expediente (id CRM) — PRIMERA columna del list (antes era la segunda). */
.inbodas-public.portal .portal-bodas--list .portal-card-expediente {
  order: 0;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--inksoft);
  white-space: nowrap;
}
/* Grid view: línea sutil con el id del expediente debajo del top. */
.inbodas-public.portal .portal-bodas--grid .portal-card-expediente {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--inksoft);
  margin-top: -6px;
}
.inbodas-public.portal .portal-bodas--list .portal-card-novios {
  order: 2;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* En list view sustituimos el campo .portal-card-meta (fecha · finca juntos)
 * por dos columnas separadas .portal-card-fecha y .portal-card-finca. */
.inbodas-public.portal .portal-bodas--list .portal-card-meta {
  display: none;
}
.inbodas-public.portal .portal-bodas--list .portal-card-fecha {
  order: 3;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--inksoft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.inbodas-public.portal .portal-bodas--list .portal-card-finca {
  order: 4;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--inksoft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* En grid view ocultamos las columnas separadas (en grid usamos meta junto). */
.inbodas-public.portal .portal-bodas--grid .portal-card-fecha,
.inbodas-public.portal .portal-bodas--grid .portal-card-finca {
  display: none;
}
.inbodas-public.portal .portal-bodas--list .portal-card-bottom {
  order: 6;
  padding: 0;
  border: 0;
  margin: 0;
  display: contents;
}
.inbodas-public.portal .portal-bodas--list .portal-card-amount {
  order: 6;
  font-size: 19px;
  white-space: nowrap;
}
.inbodas-public.portal .portal-bodas--list .portal-card-amount .cur {
  font-size: 12px;
}
.inbodas-public.portal .portal-bodas--list .portal-card-arrow {
  order: 7;
  font-size: 18px;
  text-align: right;
}

/* Tablet / desktop estrecho (769–1100px): se ocultan código y finca,
 * que son las dos columnas menos críticas. El track de novios pasa a 1fr
 * para absorber el espacio liberado. Sin esto, la suma de minimums (~958px)
 * desborda el canvas por la derecha. */
@media (min-width: 769px) and (max-width: 1100px) {
  .inbodas-public.portal .portal-bodas--list .portal-card {
    grid-template-columns:
      minmax(70px, 90px)           /* expediente */
      minmax(140px, 1fr)           /* novios — absorbe espacio */
      minmax(95px, 115px)          /* fecha */
      minmax(70px, 95px)           /* cheques */
      minmax(95px, 120px)          /* total */
      24px;                        /* arrow */
    gap: 14px;
    padding: 14px 18px;
  }
  .inbodas-public.portal .portal-bodas--list .portal-card-codigo,
  .inbodas-public.portal .portal-bodas--list .portal-card-finca {
    display: none;
  }
}

/* En mobile colapsamos LIST y GRID al mismo layout de card vertical:
 *   ┌──────────────────────────────────┐
 *   │ BODA-XXXXXX           5 cheques  │
 *   │ #135635                           │
 *   │ Novios completos                  │
 *   │ 2027-05-29 · Mendoza              │
 *   │ ─── 500€                       →  │
 *   └──────────────────────────────────┘
 * Antes el grid solo declaraba 4 áreas y dejaba `expediente`, `fecha`,
 * `finca` cayendo en slots automáticos → caos visual.
 */
@media (max-width: 768px) {
  .inbodas-public.portal .portal-bodas--list .portal-card,
  .inbodas-public.portal .portal-bodas--grid .portal-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "codigo     cheques"
      "expediente expediente"
      "novios     novios"
      "meta       meta"
      "bottom     bottom";
    column-gap: 12px;
    row-gap: 4px;
    padding: 16px 18px;
  }
  .inbodas-public.portal .portal-bodas--list .portal-card-top,
  .inbodas-public.portal .portal-bodas--grid .portal-card-top {
    display: contents;
  }
  .inbodas-public.portal .portal-bodas--list .portal-card-codigo,
  .inbodas-public.portal .portal-bodas--grid .portal-card-codigo {
    grid-area: codigo;
    order: initial;
  }
  .inbodas-public.portal .portal-bodas--list .portal-card-cheques,
  .inbodas-public.portal .portal-bodas--grid .portal-card-cheques {
    grid-area: cheques;
    justify-self: end;
    align-self: center;
    font-size: 12px;
  }
  /* Reducimos el "N" gigante: en grid son 22px y rompía la jerarquía. */
  .inbodas-public.portal .portal-bodas--list .portal-card-cheques strong,
  .inbodas-public.portal .portal-bodas--grid .portal-card-cheques strong {
    font-size: 15px;
  }
  .inbodas-public.portal .portal-bodas--list .portal-card-expediente,
  .inbodas-public.portal .portal-bodas--grid .portal-card-expediente {
    grid-area: expediente;
    display: block;
    margin: 0;
    padding: 0;
    font-size: 11px;
    color: var(--inkmute);
  }
  .inbodas-public.portal .portal-bodas--list .portal-card-novios,
  .inbodas-public.portal .portal-bodas--grid .portal-card-novios {
    grid-area: novios;
    font-size: 17px;
    line-height: 1.25;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    margin-top: 4px;
  }
  /* En mobile usamos `.portal-card-meta` (fecha · finca juntos). Las
   * variantes separadas se ocultan para evitar duplicados. */
  .inbodas-public.portal .portal-bodas--list .portal-card-meta,
  .inbodas-public.portal .portal-bodas--grid .portal-card-meta {
    display: block;
    grid-area: meta;
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--inksoft);
  }
  .inbodas-public.portal .portal-bodas--list .portal-card-fecha,
  .inbodas-public.portal .portal-bodas--list .portal-card-finca,
  .inbodas-public.portal .portal-bodas--grid .portal-card-fecha,
  .inbodas-public.portal .portal-bodas--grid .portal-card-finca {
    display: none;
  }
  /* Footer: importe + flecha en una sola fila con separador horizontal. */
  .inbodas-public.portal .portal-bodas--list .portal-card-bottom,
  .inbodas-public.portal .portal-bodas--grid .portal-card-bottom {
    grid-area: bottom;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(15, 12, 8, 0.10);
  }
  .inbodas-public.portal .portal-bodas--list .portal-card-amount,
  .inbodas-public.portal .portal-bodas--grid .portal-card-amount {
    grid-area: auto;
    font-size: 22px;
  }
  .inbodas-public.portal .portal-bodas--list .portal-card-arrow,
  .inbodas-public.portal .portal-bodas--grid .portal-card-arrow {
    grid-area: auto;
    align-self: center;
  }
}

/* Sin resultados */
.inbodas-public.portal .portal-noresults {
  margin-top: 24px;
  padding: 28px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  border: 1px dashed rgba(201, 191, 168, 0.7);
  border-radius: 10px;
}

.inbodas-public.portal .portal-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 24px 20px;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 14px;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 4px 10px -2px rgba(15, 12, 8, 0.04),
    0 14px 28px -10px rgba(15, 12, 8, 0.10);
  transition: background .22s ease, transform .22s ease, box-shadow .25s ease;
}
.inbodas-public.portal .portal-card[hidden] { display: none !important; }
.inbodas-public.portal .portal-card:hover {
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 6px 14px -4px rgba(15, 12, 8, 0.06),
    0 28px 50px -18px rgba(15, 12, 8, 0.16);
}
.inbodas-public.portal .portal-card-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(201, 191, 168, 0.45);
}
.inbodas-public.portal .portal-card-codigo {
  font-size: 12.5px; letter-spacing: 0.08em;
  color: var(--inksoft); font-weight: 500;
}
.inbodas-public.portal .portal-card-cheques {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 13px; color: var(--inksoft);
}
.inbodas-public.portal .portal-card-cheques strong {
  font-family: 'Inter', sans-serif;
  font-size: 22px; color: var(--ink); font-weight: 400;
}
.inbodas-public.portal .portal-card-novios {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px; line-height: 1.2;
  letter-spacing: -0.012em; color: var(--ink);
  margin: 0;
}
.inbodas-public.portal .portal-card-meta {
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: var(--inkmute);
  margin: 0;
}
.inbodas-public.portal .portal-card-meta .sep { margin: 0 6px; opacity: 0.65; }

.inbodas-public.portal .portal-card-bottom {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: auto; padding-top: 14px;
  border-top: 1px dashed rgba(201, 191, 168, 0.45);
}
.inbodas-public.portal .portal-card-amount {
  font-size: 20px; letter-spacing: -0.012em;
  color: var(--ink);
}
.inbodas-public.portal .portal-card-amount .cur {
  font-size: 13px; opacity: 0.7;
  margin-left: 2px;
}
.inbodas-public.portal .portal-card-arrow {
  font-family: 'Inter', sans-serif; font-style: italic;
  font-size: 22px; color: var(--olive-deep);
  transition: transform .25s ease;
}
.inbodas-public.portal .portal-card:hover .portal-card-arrow { transform: translateX(4px); }

.inbodas-public.portal .portal-empty {
  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  padding: 64px 28px;
  text-align: center;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 4px 10px -2px rgba(15, 12, 8, 0.04);
}

/* ============================================================
 *  Detalle por boda
 * ============================================================ */
/* Top bar del detalle: sprig izq + botón "Volver" der */
.inbodas-public.portal .portal-detalle-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.inbodas-public.portal .portal-detalle-top .sprig-wrap {
  color: var(--olive);
  display: inline-flex;
}

.inbodas-public.portal .portal-back {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 4px 10px -2px rgba(15, 12, 8, 0.04);
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.inbodas-public.portal .portal-back:hover {
  background: rgba(255, 255, 255, 0.62);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 6px 14px -4px rgba(15, 12, 8, 0.08);
}
.inbodas-public.portal .portal-back-arrow {
  font-size: 14px; line-height: 1;
  transition: transform .25s ease;
}
.inbodas-public.portal .portal-back:hover .portal-back-arrow { transform: translateX(-3px); }

/* Display title del detalle: nombre de novios en italic (igual treatment
 * que las cards del listado, para coherencia visual). */
.inbodas-public.portal.portal-detalle .display-title {
  font-style: italic;
  color: var(--ink);
}

.inbodas-public.portal .portal-codigo-card {
  max-width: 720px; margin: 0 0 32px;
}
.inbodas-public.portal .portal-codigo-card-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 22px 28px;
  /* Liquid glass coherente con el dashboard */
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 4px 10px -2px rgba(15, 12, 8, 0.04),
    0 14px 28px -10px rgba(15, 12, 8, 0.10);
}
.inbodas-public.portal .portal-codigo {
  font-size: 22px; letter-spacing: 0.12em;
  color: var(--ink); font-weight: 500;
  margin: 4px 0 0;
}
.inbodas-public.portal .portal-codigo-copy.is-copied {
  background: var(--olive-deep); border-color: var(--olive-deep);
}
/* Si el botón usa la variante terracota (.portal-codigo-clay aplicado
 * como modifier), el is-copied mantiene la familia terracota oscura
 * en vez de saltar al coral primary. */
.inbodas-public.portal .portal-codigo-copy.portal-codigo-clay.is-copied {
  background: #A8443F; border-color: #A8443F;
}
.inbodas-public.portal .portal-codigo-copy.is-copied::after {
  content: " ✓";
  font-weight: 600;
  margin-left: 6px;
}

/* Cheques recibidos (detalle) */
.inbodas-public.portal .portal-cheques { margin-top: 16px; }
/* Total: misma firma tipográfica que `.portal-toolbar-title` para que la
 * fila "Cheques recibidos · N — Total X€" se lea como un solo bloque.
 * Solo el `<span class="serif-italic">Total</span>` interno mantiene su
 * cursiva como acento; el resto (incluido el `<strong>`) hereda. */
.inbodas-public.portal .portal-cheques-total {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.012em;
  line-height: 1.15;
  color: var(--ink);
  text-transform: none;
}
.inbodas-public.portal .portal-cheques-total strong {
  /* Reset del bold por defecto del <strong>; el resto se hereda. */
  font-weight: 500;
}
/* Punto separador coral entre "Total" y la cifra, idéntico al de
 * `.portal-toolbar-count` (· N) del título "Cheques recibidos · 5". */
.inbodas-public.portal .portal-cheques-total strong::before {
  content: '·';
  margin-right: 5px;
  color: var(--olive-deep);
  font-weight: 500;
}
.inbodas-public.portal .portal-cheques-total strong .cur {
  font-size: 0.7em;
  opacity: 0.9;
  margin-left: 2px;
  color: var(--olive);
}

/* ============================================================
 *  Cheques recibidos — cards coherentes con el panel de bodas
 *  Sin borde lateral coral, sin gradient, sin shadow elevada.
 *  Identidad: mismo color del bg, mismo hover coral del nav,
 *  botones con la paleta accent del sistema.
 * ============================================================ */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 720px) {
  :is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (min-width: 1280px) {
  :is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list {
  display: flex; flex-direction: column;
  gap: 8px;
}

/* CARD GRID — jerarquía vertical clara.
 * Estructura: num+actions arriba | nombre+email | importe grande |
 * meta (fecha · pasarela) | mensaje (si hay). */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 14px;
  /* Padding superior un poco mayor a los laterales para enmarcar bien
   * el header (CHQ + PENDIENTE + ↓) con aire respetable a ambos lados. */
  padding: 22px 24px 18px;
  /* Permite que la card se contraiga por debajo de su min-content cuando
   * el grid track es estrecho (768–1023px). Sin esto, nombres largos como
   * "Sandra Gutierrez Rodriguez" expanden el track y la 2ª columna se
   * sale del wrapper canvas. */
  min-width: 0;
  /* box-sizing explícito: sin este reset, Bricks/WP puede renderizar la card
   * en content-box y el padding lateral se suma al width del track. */
  box-sizing: border-box;
  /* Liquid glass: bg + blur movidos a ::before para que los hijos
   * (billing) puedan aplicar su propio backdrop-filter sin que el
   * del padre los cancele. */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 4px 10px -2px rgba(15, 12, 8, 0.04),
    0 14px 28px -10px rgba(15, 12, 8, 0.10);
  cursor: pointer;
  transition: background .22s ease, transform .22s ease, box-shadow .25s ease;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: -1;
  pointer-events: none;
  transition: background .25s ease;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card > * { position: relative; }
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card[data-portal-toggle]:focus-visible {
  outline: 2px solid var(--olive-deep);
  outline-offset: 3px;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 6px 14px -4px rgba(15, 12, 8, 0.06),
    0 24px 44px -16px rgba(15, 12, 8, 0.16);
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card:hover::before {
  background: rgba(255, 255, 255, 0.62);
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card[hidden] { display: none !important; }

/* Núcleo identificador — mono pequeño arriba */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--inksoft);
  font-weight: 500;
}

/* Nombre + email — protagonista visual de la card */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-name-block {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* En mobile dejamos que el nombre completo respire en 2 líneas: el
 * ellipsis truncado pierde info ("...Ribera Román" → "Antonio ...") y
 * no aporta nada en una card vertical. */
@media (max-width: 720px) {
  :is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 17px;
    line-height: 1.25;
  }
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-email {
  align-self: flex-start;
  max-width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--inksoft);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color .22s ease;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-email:hover { color: var(--olive-deep); }

/* Importe individual — más pequeño que el total para mantener jerarquía */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-amount {
  font-size: 24px;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1;
  display: inline-flex; align-items: baseline; gap: 3px;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-amount .cur {
  font-size: 13px;
  color: var(--olive-deep);
}

/* Meta: fecha · pasarela en una línea horizontal */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--inksoft);
  padding-top: 2px;
  border-top: 1px dashed rgba(201, 191, 168, 0.45);
  padding-top: 12px;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-date {
  font-variant-numeric: tabular-nums;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-pay {
  display: inline-flex; align-items: center; gap: 6px;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-pay-icon {
  display: inline-flex; width: 13px; height: 13px;
  color: var(--olive-deep);
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-pay-icon svg { width: 100%; height: 100%; }

/* Mensaje serif en bloque sutil con cita italic */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-msg {
  margin: 0;
  padding: 12px 14px 12px 16px;
  background: rgba(239, 68, 77, 0.06);
  border-left: 3px solid var(--olive);
  border-radius: 4px 8px 8px 4px;
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ink);
  quotes: "«" "»";
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-msg::before { content: open-quote; color: var(--olive-deep); margin-right: 2px; }
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-msg::after  { content: close-quote; color: var(--olive-deep); margin-left: 2px; }

/* Bloque extra (se expande con chevron) */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-extra {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  padding: 0;
  background: transparent;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-extra[hidden] { display: none; }
/* Línea sutil con el nº de pedido — sin caja de fondo. */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-order {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  color: var(--inksoft);
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-order-lbl {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-deep);
  font-weight: 500;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-order-val {
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink);
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-extra-list .mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
}

/* Head row: número del cheque + pill estado + acciones. Layout flex
 * space-between: el num arranca a la izquierda, las acciones quedan al
 * final, y el pill ocupa el espacio intermedio. El espaciado entre
 * elementos es DINÁMICO — lo calcula el space-between según el ancho
 * real de la card. */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* No shrink — el bloque de acciones mantiene su tamaño. El num y el
   * pill sí pueden contraerse si el track es muy estrecho. */
  flex-shrink: 0;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-num {
  /* Permite contraerse en tracks estrechos sin forzar overflow del último
   * flex item. */
  min-width: 0;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-download,
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-expand,
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(239, 68, 77, 0.05);
  border: 0;
  color: var(--olive-deep);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-download svg,
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-expand svg,
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-btn svg { width: 15px; height: 15px; }
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-download:hover,
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-expand:hover,
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-btn:hover {
  background: rgba(239, 68, 77, 0.10);
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-expand svg {
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card.is-expanded .portal-cheque-card-expand svg {
  transform: rotate(180deg);
}
/* Solo mostramos el chevron en vista LISTA — en grid todo es visible */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--grid .portal-cheque-card-expand { display: none; }

/* ============================================================
 *  Datos de facturación — tratamiento editorial premium
 *  Tarjeta interna con borde sutil, agrupada en bloques semánticos:
 *  identidad (nombre serif italic) · dirección postal (sobre) · contacto.
 * ============================================================ */
/* Glass embebido. La card padre ya aplica backdrop-filter, así que un
 * filter nuevo aquí no surte efecto en la mayoría de browsers — usamos
 * background bien definido + gradient + sombras inset para SIMULAR un
 * panel "hundido" dentro del cristal padre. La diferencia con la card
 * se nota porque (a) el blanco interno es mucho más opaco, (b) el
 * borde superior tiene un highlight blanco, y (c) hay sombra suave
 * exterior que separa el panel del padre. */
/* Panel anidado: solo un tinte oscuro sutil basta. Sin borde ni
 * sombra — el contraste con el bg blanco translúcido de la card
 * padre crea por sí solo la sensación de cavidad. */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing {
  margin: 18px 0 0;
  padding: 22px 24px;
  background: rgba(15, 12, 8, 0.03);
  border: 0;
  border-radius: 12px;
  position: relative;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0));
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--olive-deep);
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-eyebrow::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--olive);
  opacity: 0.7;
}

/* Grid de bloques — siempre 1 columna en cards grid (estrechas).
 * En vista LIST (la card ocupa toda la fila) sí podemos usar 2 cols. */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card.is-expanded .portal-cheque-card-billing-grid {
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card.is-expanded .portal-cheque-card-billing-contact {
  grid-column: 1 / -1;
}

/* Bloque identidad */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-id { min-width: 0; }
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-company {
  margin: 4px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-nif {
  margin: 12px 0 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--ink);
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-nif-lbl {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inkmute);
  font-weight: 500;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-nif .mono {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}

/* Bloque dirección postal — formato de sobre */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-lbl {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-deep);
  font-weight: 500;
  margin-bottom: 8px;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-address address {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* Bloque contacto */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px dashed rgba(15, 12, 8, 0.07);
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-contact-link {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  transition: color .22s ease;
  position: relative;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-contact-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--olive-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-contact-link:hover {
  color: var(--olive-deep);
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-contact-link:hover::after {
  transform: scaleX(1);
}

:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-empty {
  margin: 14px 0 0;
  padding: 14px 16px;
  background: rgba(15, 12, 8, 0.025);
  border-radius: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--inksoft);
  text-align: center;
}

/* (Eliminado el padding-right: 120px del num — era un parche del layout
 * antiguo donde el botón estaba en el flex. Ahora el botón es absoluto
 * y el head ya reserva su propio padding-right.) */

/* =====================  VISTA LISTA  ===================== */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card {
  display: grid;
  grid-template-columns:
    minmax(115px, 130px) /* num */
    minmax(160px, 1.6fr) /* nombre + email */
    minmax(140px, 1fr)   /* meta (fecha · pasarela) */
    minmax(85px, 110px)  /* importe */
    auto;                /* acciones: tantos botones como haya */
  grid-template-areas: "num name meta amount actions";
  align-items: center;
  gap: 18px 22px;        /* más gap horizontal: separa importe de acciones */
  padding: 14px 18px 14px 20px;
  border-radius: 10px;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card:hover {
  transform: none;  /* sin elevación en lista (compacto) */
  box-shadow: none;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card-num {
  grid-area: num;
  padding-right: 0;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card-name-block {
  grid-area: name;
  gap: 1px;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card-email {
  font-size: 11.5px;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card-amount {
  grid-area: amount;
  font-size: 19px;
  justify-self: end;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card-amount .cur {
  font-size: 11px;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card-meta {
  grid-area: meta;
  padding-top: 0;
  border-top: 0;
  font-size: 12.5px;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card-head {
  display: contents;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card-actions {
  grid-area: actions;
  justify-self: end;
}

/* Mensaje y extra ocultos por defecto en lista, visibles al expandir */
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card-msg,
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card-extra {
  grid-column: 1 / -1;
  display: none;
}
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card.is-expanded .portal-cheque-card-msg,
:is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card.is-expanded .portal-cheque-card-extra:not([hidden]) {
  display: block;
}

/* Mobile lista: collapse a stack vertical */
@media (max-width: 720px) {
  :is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "num actions"
      "name name"
      "amount amount"
      "meta meta";
    gap: 8px;
    padding: 16px 18px;
  }
  :is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card-actions {
    grid-area: actions;
    justify-self: end;
  }
  :is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card-amount {
    justify-self: start;
  }
}

/* ============================================================
 *  Login gate + forbidden
 * ============================================================ */
.inbodas-public.portal .portal-gate {
  text-align: center;
  padding: 56px 0;
  max-width: 640px; margin: 0 auto;
}
.inbodas-public.portal .portal-gate .display-title { margin-top: 18px; }
.inbodas-public.portal .portal-gate .lede { margin: 24px auto 0; max-width: 480px; }
.inbodas-public.portal .portal-gate .cta { margin-top: 40px; }
.inbodas-public.portal .cta-arrow {
  font-family: 'Inter', sans-serif; font-style: italic;
  font-size: 17px; letter-spacing: 0; text-transform: none;
}

/* ============================================================
 *  Hero top widgets — reloj + avatar/menú usuario.
 *  El cluster reloj+avatar se posiciona absoluto en la esquina inferior
 *  derecha del hero — alineado al baseline del nombre, no al eyebrow.
 * ============================================================ */
.inbodas-public.portal .portal-hero {
  position: relative;
}
.inbodas-public.portal .portal-hero-aside {
  position: absolute;
  right: 0;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Reloj — pill glass discreta */
.inbodas-public.portal .portal-clock {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Avatar — link directo a Mi cuenta (el menú ya está en el header).
 * Muestra Gravatar si existe (vinculado al email del usuario), si no
 * la inicial del nombre como fallback. */
.inbodas-public.portal .portal-avatar-link-direct {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  overflow: hidden;
  text-decoration: none;
  /* Sombras glass coherentes con cards. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 4px 10px -2px rgba(15, 12, 8, 0.06),
    0 14px 28px -10px rgba(15, 12, 8, 0.14);
  transition: transform .22s ease, border-color .22s ease, box-shadow .25s ease;
}
.inbodas-public.portal .portal-avatar-link-direct::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.40);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: 0;
}
.inbodas-public.portal .portal-avatar-link-direct:hover {
  border-color: var(--olive-deep);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 6px 14px -4px rgba(15, 12, 8, 0.08),
    0 22px 40px -14px rgba(15, 12, 8, 0.20);
}
.inbodas-public.portal .portal-avatar-initial {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--olive-deep);
  letter-spacing: -0.015em;
  line-height: 1;
}
.inbodas-public.portal .portal-avatar-link-direct img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* Mobile: el reloj se oculta y el avatar sale del flujo absoluto, se
 * coloca como bloque arriba del eyebrow para no solapar el h1. */
@media (max-width: 720px) {
  .inbodas-public.portal .portal-clock { display: none; }
  .inbodas-public.portal .portal-hero {
    display: flex;
    flex-direction: column;
  }
  .inbodas-public.portal .portal-hero-aside {
    position: static;
    align-self: flex-start;
    order: -1;
    margin-bottom: 16px;
  }
  /* Mismo tamaño que el avatar de Mi cuenta en mobile (64px) ya que aquí
   * tampoco aparece el reloj — el cluster se reduce solo al avatar. */
  .inbodas-public.portal .portal-avatar-link-direct {
    width: 64px; height: 64px;
  }
  .inbodas-public.portal .portal-avatar-initial {
    font-size: 26px;
  }

  /* Billing grid: en mobile SIEMPRE 1 columna, incluso en list-expanded.
   * En cards estrechas 2 cols rompía "Alfonso Sánchez" y "DIRECCIÓN POSTAL"
   * a 2 líneas, dejando huecos enormes. */
  :is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheques-list--list .portal-cheque-card.is-expanded .portal-cheque-card-billing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Labels billing: sin wrap raro. */
  :is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-lbl {
    white-space: nowrap;
  }
}

/* ============================================================
 *  Mensaje "Expediente no encontrado" / "Sin permisos" — usa el
 *  portal-canvas para coherencia glass y un icono editorial.
 * ============================================================ */
.inbodas-public.portal .portal-message {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.inbodas-public.portal .portal-message-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  max-width: 480px;
  padding: 40px 24px;
}
.inbodas-public.portal .portal-message-icon {
  color: var(--olive-deep);
  opacity: 0.7;
}
.inbodas-public.portal .portal-message-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--inksoft);
  line-height: 1.5;
}
/* En la pantalla de error, el botón "Volver al listado" usa el patrón
 * pill coral sólido del resto del sistema (.portal-export / .cta). */
.inbodas-public.portal .portal-message .portal-back {
  margin-top: 8px;
  background: var(--olive);
  color: var(--paper) !important;
  border-color: var(--olive);
  padding: 12px 24px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 22px -10px rgba(239, 68, 77, 0.45);
}
.inbodas-public.portal .portal-message .portal-back:hover {
  background: var(--olive-deep);
  border-color: var(--olive-deep);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 16px 32px -12px rgba(239, 68, 77, 0.55);
}
.inbodas-public.portal .portal-message .portal-back-arrow {
  color: inherit;
}

/* ============================================================
 *  Paginación server-side del listado de bodas
 * ============================================================ */
.inbodas-public.portal .portal-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding: 14px 22px;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 14px;
  flex-wrap: wrap;
}
.inbodas-public.portal .portal-pagination-info {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--inksoft);
}
.inbodas-public.portal .portal-pagination-info strong {
  color: var(--ink);
  font-weight: 500;
}
.inbodas-public.portal .portal-pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.inbodas-public.portal .portal-pagination-page {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--inksoft);
  font-variant-numeric: tabular-nums;
}
.inbodas-public.portal .portal-pagination-page strong {
  color: var(--ink);
  font-weight: 500;
}
.inbodas-public.portal .portal-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: rgba(255, 255, 255, 0.40);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.inbodas-public.portal .portal-pagination-btn:hover {
  background: var(--olive-deep);
  border-color: var(--olive-deep);
  color: var(--paper);
  transform: translateY(-1px);
}
.inbodas-public.portal .portal-pagination-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Hint del listado — explica que hay más bodas detrás del buscador. */
.inbodas-public.portal .portal-list-hint {
  margin: 18px 0 0;
  padding: 12px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--inksoft);
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 12px;
  text-align: center;
}
.inbodas-public.portal .portal-list-hint strong {
  color: var(--ink);
  font-weight: 500;
}

/* ============================================================
 *  Paginación del listado.
 *  Sin contenedor glass — prev / pages / next inline, hover olive
 *  (mismo tono que el resto de CTAs del portal).
 * ============================================================ */
.inbodas-public.portal .portal-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 6px;
  padding: 0;
  background: transparent;
  border: 0;
}
.inbodas-public.portal .portal-pager-prev,
.inbodas-public.portal .portal-pager-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.18);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .15s ease, box-shadow .25s ease;
}
.inbodas-public.portal .portal-pager-prev:hover,
.inbodas-public.portal .portal-pager-next:hover {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--paper);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(239, 68, 77, 0.35);
}
.inbodas-public.portal .portal-pager-prev.is-disabled,
.inbodas-public.portal .portal-pager-next.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.inbodas-public.portal .portal-pager-pages {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.inbodas-public.portal .portal-pager-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.inbodas-public.portal .portal-pager-page:hover {
  background: rgba(239, 68, 77, 0.10);
  color: var(--olive-deep);
}
.inbodas-public.portal .portal-pager-page.is-current {
  background: rgba(239, 68, 77, 0.10);
  color: var(--olive-deep);
  font-weight: 500;
}
.inbodas-public.portal .portal-pager-gap {
  color: var(--inksoft);
  padding: 0 4px;
  font-size: 14px;
}
@media (max-width: 640px) {
  .inbodas-public.portal .portal-pager {
    flex-wrap: wrap;
  }
  .inbodas-public.portal .portal-pager-pages {
    order: -1;
    width: 100%;
    justify-content: center;
    margin-bottom: 4px;
  }
  .inbodas-public.portal .portal-pager-prev,
  .inbodas-public.portal .portal-pager-next {
    flex: 1;
    justify-content: center;
  }
}

/* Hint "Mostrando X-Y de N" — versión arriba del listado: sin caja, alineado
 * a la izquierda y con baja jerarquía visual para no competir con el title.
 * (La regla genérica `.portal-list-hint` mantiene la caja glass para casos
 *  legacy; esta variante es la del header del listado.) */
.inbodas-public.portal .portal-list-hint--top {
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 12.5px;
  color: var(--inksoft);
  letter-spacing: 0.01em;
}


/* ============================================================
 *  Detalle del expediente — 2 cards lado a lado: código de boda
 *  + ficha de info (nº expediente, fecha, lugar, días).
 * ============================================================ */
.inbodas-public.portal .portal-detalle-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0 0 28px;
}
/* Apilar las cards de detalle a 1 col cuando el ancho disponible no
 * permite que el CTA "ENVIAR A LOS NOVIOS" entre en una sola línea
 * dentro de la mitad del wrapper. Antes era 900px → en 901-1100px la
 * card del código quedaba estrecha y el botón se rompía en 3 líneas. */
@media (max-width: 1100px) {
  .inbodas-public.portal .portal-detalle-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
/* Card de info — mismo glass que la del código de boda. */
.inbodas-public.portal .portal-info-card {
  position: relative;
  padding: 22px 28px;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 4px 10px -2px rgba(15, 12, 8, 0.04),
    0 14px 28px -10px rgba(15, 12, 8, 0.10);
}
.inbodas-public.portal .portal-info-card .eyebrow {
  margin: 0 0 14px;
  display: inline-flex;
  width: fit-content;
}
/* Etiqueta del expediente — mini-card liquid glass dentro de portal-info-card.
 * El padre ya tiene backdrop-filter, por lo que el blur del hijo se cancela.
 * Truco del proyecto: bg + blur en ::before con z-index:-1, así el glass
 * efectivamente se aplica sobre el body, no sobre el contenedor padre. */
.inbodas-public.portal .portal-info-cardlbl {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.32) inset,
    0 6px 16px -10px rgba(239, 68, 77, 0.14);
  isolation: isolate;
}
.inbodas-public.portal .portal-info-cardlbl::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(239, 68, 77, 0.045);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
          backdrop-filter: blur(26px) saturate(190%);
  border-radius: inherit;
}
.inbodas-public.portal .portal-info-cardlbl-key {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inksoft);
  font-weight: 500;
}
.inbodas-public.portal .portal-info-cardlbl-val {
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-left: auto;
}
.inbodas-public.portal .portal-info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.inbodas-public.portal .portal-info-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.45);
}
.inbodas-public.portal .portal-info-row:last-child {
  border-bottom: 0;
}
.inbodas-public.portal .portal-info-row dt {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inkmute);
  margin: 0;
}
.inbodas-public.portal .portal-info-row dd {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.inbodas-public.portal .portal-info-pendiente {
  color: var(--inkmute);
  font-weight: 400;
}
.inbodas-public.portal .portal-info-dias {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--olive-deep);
  letter-spacing: -0.012em;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}

/* La card del código pierde su max-width — ahora vive en grid. */
.inbodas-public.portal .portal-detalle-cards .portal-codigo-card {
  max-width: none;
  margin: 0;
}

/* ============================================================
 *  Responsive audit fixes (2026-06-10)
 *  Bloque consolidado de overrides mobile-first. Mantiene los
 *  estilos originales arriba; aquí solo se reducen padding,
 *  garantizan touch targets ≥44px y normalizan filtros.
 * ============================================================ */
@media (max-width: 720px) {
  /* P0-1: padding interior de .portal-card más respirable en 320–360px */
  .inbodas-public.portal .portal-card {
    padding: 16px 16px 14px;
    border-radius: 12px;
    gap: 10px;
  }
  .inbodas-public.portal .portal-bodas--list .portal-card {
    padding: 14px 16px;
  }
  /* P1-8: touch targets ≥44px en móvil para las acciones del cheque */
  :is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-download,
  :is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-expand,
  :is(.inbodas-public.portal, .inbodas-mi-cuenta) .portal-cheque-card-billing-btn {
    width: 40px; height: 40px;
  }
  /* P1-9: KPI sparkline aún más bajo en móvil para no robar foco al número */
  .inbodas-public.portal .portal-kpi-spark {
    height: 28px;
    margin: 10px 0 0;
  }
}

@media (max-width: 640px) {
  /* P0-2: filtros y selectores ocupan todo el ancho disponible.
   * El media 560 ya marca flex-basis 100% en search/filters,
   * lo extendemos a 640 para tablets pequeñas y forzamos width:100%
   * en los selectores hijos para que no se queden a auto. */
  .inbodas-public.portal .portal-search,
  .inbodas-public.portal .portal-filters { flex: 1 1 100%; }
  .inbodas-public.portal .portal-filters { display: flex; flex-wrap: wrap; gap: 8px; }
  .inbodas-public.portal .portal-filters .portal-select { flex: 1 1 100%; width: 100%; }
  /* Pager: prev/next equilibrados a 50% para no quedar en línea suelta */
  .inbodas-public.portal .portal-pager-prev,
  .inbodas-public.portal .portal-pager-next { flex: 1; }
}

/* =================================================================
 *  PORTAL STATS STRIP — componente reutilizable
 *  ----------------------------------------------------------------
 *  Franja de 3 KPI cards (Total / Cheques / Cheque medio o similar)
 *  con liquid glass sage. Se usa en el detalle de admin
 *  (`PortalComercialesPage::renderDetalle`) y en el panel del
 *  homenajeado (`PanelNoviosPage::render` para /mi-evento/).
 *  Mismo HTML / mismas clases en ambos sitios.
 * ================================================================= */
.inbodas-public .portal-stats-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 22px;
}
@media (min-width: 720px) {
  .inbodas-public .portal-stats-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 28px;
  }
}
.inbodas-public .portal-stats-stat {
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset;
}
.inbodas-public .portal-stats-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--inkmute);
  margin-bottom: 12px;
}
.inbodas-public .portal-stats-stat-value {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.inbodas-public .portal-stats-stat-value .cur {
  color: var(--olive-deep);
  font-size: 16px;
}
@media (max-width: 720px) {
  .inbodas-public .portal-stats-stat-value { font-size: 30px; }
}
.inbodas-public .portal-stats-stat-sub {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--inkmute);
}