:root {
  --ivory: #f0f0e6;
  --linen: #e7e3d4;
  --paper: #fbfaf2;
  --sage: #8b8c70;
  --olive: #4f523d;
  --aem-green: #4e6359;
  --aem-green-soft: #d9e1da;
  --aem-green-deep: #33463d;
  --aem-lime: #e2e735;
  --rose: #c7a696;
  --clay: #a6745c;
  --gold: #e2e735;
  --lime: #4e6359;
  --ink: #24231d;
  --muted: #747164;
  --line: #d8d2bd;
  --danger: #a84f42;
  --ok: #5e7e57;
  /* Paleta y tipografia calcadas del kit global real de algoentremanos.es
     (Elementor global kit: mostaza como acento oficial, verde salvia como
     color de marca/texto) — mismos tonos que src/venue.js y src/charts.js
     usan para los componentes nuevos (dashboard, canvas de mesas). */
  --crema: #f0f0e6;
  --crema-oscura: #e4e2d2;
  --mostaza: #e2e735;
  --tinta: #4e6359;
  --tinta-suave: #7e8c82;
  --verde-hover: #3a4a41;
  --borde-suave: #dcdcc9;
  /* Alias en castellano de la paleta. Las hojas nuevas (presupuesto, agenda,
     contrato, RGPD, rincones, equipo) se escribieron con estos nombres, y al
     no existir el navegador tiraba la declaracion entera: los bordes
     desaparecian y el texto secundario heredaba el color del padre. Se
     definen aqui apuntando a los tonos reales, no se duplica ningun valor. */
  /* ── Escala de espaciado ──────────────────────────────────────────────
     Hasta ahora cada bloque llevaba su padding a ojo —18, 14, 12, 16, 22—
     y algunos ninguno: `.card` no tenía relleno en NINGUNA regla, así que
     los títulos y las cifras salían pegados al borde. El texto pegado al
     borde no es un detalle estético: es lo que hace que una pantalla llena
     de datos se lea como un amasijo en vez de como información.
     Cinco valores, y todo sale de aquí. */
  --e1: 6px;   /* entre cosas que van juntas: icono y su etiqueta */
  --e2: 10px;  /* entre elementos de una misma fila */
  --e3: 14px;  /* aire interior de piezas pequeñas */
  --e4: 18px;  /* relleno de tarjeta y panel */
  --e5: 24px;  /* separación entre bloques grandes */

  --verde: var(--aem-green);
  --rosa: var(--rose);
  --verde-oscuro: var(--aem-green-deep);
  --texto: var(--ink);
  --texto-suave: var(--muted);
  --linea: var(--line);
  --blanco: #fff;
  --crema-suave: var(--paper);
  --mostaza-text: #4a4626;
  --shadow: 0 22px 60px rgba(36, 35, 29, 0.14);
  --button-shadow: 0 12px 24px rgba(36, 35, 29, 0.16);
  --green-shadow: 0 14px 30px rgba(78, 99, 89, 0.2), 0 0 0 1px rgba(78, 99, 89, 0.2);
  --soft-glow: 0 0 0 1px rgba(78, 99, 89, 0.18), 0 22px 70px rgba(78, 99, 89, 0.1);
  color-scheme: light;
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: linear-gradient(135deg, var(--ivory), #faf8ed 45%, #eee8d8);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  min-height: 100vh;
  padding: 24px 18px;
  background:
    linear-gradient(180deg, rgba(251, 250, 242, 0.92), rgba(231, 227, 212, 0.96)),
    url("./assets/rincones/detalles-ceremonia.jpg");
  background-size: cover;
  background-position: center;
  border-right: 1px solid var(--line);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 4px 4px 20px;
  border-bottom: 1px solid var(--line);
}

.brand-logo {
  width: 148px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
}

/* Una sola regla para el logotipo del acceso. Antes estaba declarado dos
   veces con anchos distintos (420px y 220px) y sin `height`, así que el
   navegador tenía que adivinar la proporción del SVG. */
.login-logo,
.login-logo-panel {
  display: block;
  width: min(190px, 52vw);
  height: auto;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  font-family: Georgia, serif;
  letter-spacing: 0;
  box-shadow: var(--button-shadow);
  position: relative;
}

.brand-mark::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--aem-green);
  box-shadow: 0 0 18px rgba(78, 99, 89, 0.38);
}

/* "Planner" ya no repite el mismo estilo serif del logotipo (leía como un
   segundo titular compitiendo con la marca, pegado y en un tono que no
   remitía a ningún color de la app) — ahora es una etiqueta pequeña en
   mayúsculas, en el verde de marca, a modo de apoyo bajo el logo. */
.brand-title {
  display: block;
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--aem-green-deep);
}

.brand p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.01em;
}

.nav {
  display: grid;
  gap: 6px;
}

.nav button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 14px;
  text-align: left;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.nav button.active,
.nav button:hover {
  background: linear-gradient(90deg, rgba(78, 99, 89, 0.16), rgba(255, 253, 248, 0.78));
  box-shadow: 0 10px 30px rgba(36, 35, 29, 0.08), inset 3px 0 0 rgba(78, 99, 89, 0.9);
  transform: translateY(-1px);
}

.nav .ico,
.icon-btn {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(78, 99, 89, 0.13);
  color: var(--aem-green-deep);
  font-weight: 700;
}

.rincon-thumb {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  object-fit: cover;
}

.rincon-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.rincon-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.rincon-card-photo-btn {
  position: relative;
  width: calc(100% + 36px);
  margin: -18px -18px 0;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  display: block;
}

.rincon-card-photo-btn .rincon-card-photo {
  border-radius: 10px 10px 0 0;
}

.rincon-card-photo-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(36, 35, 29, 0.72);
  color: white;
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 160ms ease;
}

.rincon-card-photo-btn:hover .rincon-card-photo-zoom,
.rincon-card-photo-btn:focus-visible .rincon-card-photo-zoom {
  opacity: 1;
}

.rincon-card-nophoto {
  aspect-ratio: 4 / 3;
  width: calc(100% + 36px);
  margin: -18px -18px 0;
  display: grid;
  place-items: center;
  background: var(--aem-green-soft);
  color: var(--muted);
  font-size: 13px;
  border-radius: 10px 10px 0 0;
}

.rincon-card h4 {
  margin: 4px 0 0;
}

.rincon-card p {
  color: var(--muted);
  font-size: 13px;
  flex: 1;
}

.rincon-task-list {
  padding: 10px;
  border: 1px dashed rgba(78, 99, 89, 0.28);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.56);
}

.rincon-task-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

/* .rincon-task-row se define más abajo, en el bloque de «Tareas de rincón con
   detalle y foto». Aquí vivía la versión antigua —una línea simple, sin foto—
   y de ella solo sobrevivían `justify-content: space-between` y el tamaño de
   letra, que la versión nueva no reescribe: la foto se iba a un extremo y el
   texto al otro. */

.rincon-task-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.rincon-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.rincon-card .btn {
  align-self: flex-start;
}

.sidebar-footer {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.main {
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 20px 32px;
  background: rgba(240, 240, 230, 0.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.topbar h1 {
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: 0;
}

.topbar p {
  margin: 5px 0 0;
  color: var(--muted);
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf8, #f3efe3);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(36, 35, 29, 0.06);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  /* Un boton nunca debe encogerse por debajo de su contenido: es la causa
     de que se vieran "cortados" dentro de .actions y .section-title. */
  flex-shrink: 0;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--button-shadow);
  border-color: rgba(78, 99, 89, 0.5);
}

/* Variantes de boton calcadas del sistema de ALGOEN_2 (Button.tsx):
   primary = tinta solida sobre crema · secondary/sage = mostaza (acento
   oficial de marca) · ghost = el .btn base con borde · danger = rojo. */
.btn.primary {
  background: var(--aem-green);
  color: var(--crema);
  border-color: var(--aem-green);
  box-shadow: 0 10px 22px rgba(78, 99, 89, 0.24);
}

.btn.primary:hover {
  background: var(--verde-hover);
  border-color: var(--verde-hover);
  box-shadow: 0 14px 28px rgba(58, 74, 65, 0.3);
}

.btn.sage {
  background: var(--mostaza);
  border-color: var(--mostaza);
  color: var(--aem-green);
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(226, 231, 53, 0.3);
}

.btn.sage:hover {
  background: #d5da2c;
  border-color: #d5da2c;
}

.btn.danger {
  background: transparent;
  border-color: rgba(168, 79, 66, 0.4);
  color: var(--danger);
  box-shadow: none;
}

.btn.danger:hover {
  background: rgba(168, 79, 66, 0.1);
  border-color: var(--danger);
}

/* Botones de estado: el check debe cambiar el boton entero (color + texto),
   no solo un punto pequeño al lado. `.warn` = pendiente/en proceso (ambar
   calido), `.sage.done` = listo/confirmado (verde solido con brillo). */
.btn.warn,
.mini-btn.warn {
  background: linear-gradient(180deg, #f6e2c8, var(--gold));
  border-color: var(--gold);
  color: #4a3a12;
  font-weight: 700;
}

.btn.warn:hover,
.mini-btn.warn:hover {
  box-shadow: 0 12px 24px rgba(170, 162, 99, 0.35);
}

.btn.done,
.btn.sage.done,
.mini-btn.sage.done {
  box-shadow: var(--green-shadow), 0 0 0 3px rgba(78, 99, 89, 0.16);
}

.mini-btn.sage {
  background: linear-gradient(180deg, #61776d, var(--aem-green));
  border-color: var(--aem-green);
  color: var(--paper);
}

.content {
  padding: 28px 32px 52px;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Las tarjetas de boda necesitan espacio real para sus acciones. Una rejilla
   fija de tres columnas las recortaba en portátiles y dejaba bodas ocultas. */
.weddings-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}

.panel,
.card {
  background: rgba(251, 250, 242, 0.9);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.panel {
  padding: 18px;
}

.metric {
  min-height: 118px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.metric::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--aem-green), var(--rose));
}

.metric span {
  color: var(--muted);
  font-size: 13px;
}

.metric strong {
  display: block;
  margin-top: 12px;
  font-family: "Italiana", Georgia, serif;
  font-size: 34px;
  font-weight: 500;
}

/* Tarjetas KPI + gráficos de distribución (paleta/estilo del panel de
   referencia ALGOEN_2: acento mostaza, texto tinta suave). */
.kpi-card {
  background: rgba(251, 250, 242, 0.9);
  border: 1px solid var(--borde-suave);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
}

.kpi-value {
  font-family: "DM Sans", sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--aem-green-deep);
  line-height: 1.15;
}

.kpi-sub {
  font-size: 12px;
  color: var(--tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chart-card .section-title {
  margin: 0 0 10px;
}

.chart-empty {
  color: var(--tinta-suave);
  font-size: 13px;
  margin: 6px 0 0;
}

.distbar-list {
  display: grid;
  gap: 12px;
}

.distbar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  margin-bottom: 5px;
}

.distbar-head span {
  color: var(--tinta-suave);
}

.distbar-track {
  height: 8px;
  width: 100%;
  border-radius: 999px;
  background: var(--crema-oscura);
  overflow: hidden;
}

.distbar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 320ms ease;
}

/* Canvas de mesas (arrastrar y sentar invitados). */
.venue-panel {
  margin-bottom: 18px;
}

.venue-canvas {
  position: relative;
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--borde-suave);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(36, 35, 29, 0.035) 20px),
    repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(36, 35, 29, 0.035) 20px),
    var(--crema-oscura);
  overflow: auto;
  touch-action: none;
}

/* La mesa se define más abajo, en el bloque del plano reescrito: allí el
   tamaño lo pone el JS en línea (cada mesa puede ser pequeña, normal, grande
   o XL) y el arrastre vive en `.venue-table-wrap`. De esta versión antigua
   solo sobrevivían un `font-size` y un `padding` fijos, que peleaban con las
   mesas redimensionables. Las variantes `.full` y `.selected` tampoco se
   emiten ya: ahora son `.state-*` y `.venue-table-wrap.selected`. */

.venue-table-name {
  font-weight: 700;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.venue-table-count {
  color: var(--tinta-suave);
  font-size: 11px;
}

.venue-side-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed var(--borde-suave);
  background: rgba(255, 253, 248, 0.6);
}

/* Insignias de estado por color semantico (mismo criterio que el Badge de
   ALGOEN_2: verde = confirmado, mostaza = pendiente, rojo = declinado). */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge.neutro {
  background: var(--crema-oscura);
  color: var(--tinta-suave);
}

.badge.verde {
  background: rgba(78, 99, 89, 0.16);
  color: var(--aem-green-deep);
}

.badge.mostaza {
  background: rgba(226, 231, 53, 0.4);
  color: #4a4626;
}

.badge.rojo {
  background: rgba(168, 79, 66, 0.14);
  color: var(--danger);
}

/* Tabla de datos reutilizable (invitados con alergias/RSVP y similares). */
.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta-suave);
  border-bottom: 1px solid var(--borde-suave);
  white-space: nowrap;
}

.data-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.data-table tbody tr:hover {
  background: rgba(226, 231, 53, 0.1);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0 14px;
  /* Sin wrap, el bloque de acciones se comprime y recorta los botones
     cuando el titulo es largo. Con wrap baja a una linea nueva entero. */
  flex-wrap: wrap;
}

.section-title > div:first-child {
  min-width: 0;
  flex: 1 1 240px;
}

.section-title.compact {
  align-items: flex-start;
  margin: 0 0 10px;
}

.section-title.compact h4 {
  margin: 0;
  font-size: 15px;
}

.page-actions {
  align-items: flex-end;
}

.print-toolbar {
  margin-top: 0;
}

.section-title h3 {
  margin: 0;
  font-size: 16px;
}

.wedding-card {
  min-width: 0;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.wedding-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 70px rgba(36, 35, 29, 0.18);
}

.wedding-cover {
  min-height: 128px;
  padding: 16px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  position: relative;
  cursor: pointer;
}

.wedding-body-clickable {
  cursor: pointer;
}

.wedding-countdown {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--mostaza);
  color: #4a4626;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(36, 35, 29, 0.28);
}

.wedding-countdown::before {
  content: "⏱";
}

.wedding-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  /* La sombra del texto ya ayuda, pero depender solo de eso significa que
     una foto clara o con su propio texto (un cartel, letreros de boda...)
     puede seguir comiéndose el nombre. Este degradado deja la mitad de
     arriba de la foto casi intacta (se sigue viendo la foto) y para cuando
     llega a la franja donde vive el nombre (abajo del todo) ya es casi
     negro solido — el nombre queda sobre un fondo oscuro real, no sobre
     "lo que sea que haya en la foto ahí". */
  background:
    linear-gradient(180deg, rgba(36, 35, 29, 0) 0%, rgba(36, 35, 29, 0.05) 42%, rgba(36, 35, 29, 0.58) 72%, rgba(20, 19, 16, 0.93) 100%),
    linear-gradient(90deg, rgba(78, 99, 89, 0.2), transparent 55%);
}

.wedding-cover h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: white;
  font-family: "Italiana", Georgia, serif;
  font-size: 26px;
  font-weight: 500;
}

.wedding-body {
  padding: 16px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(217, 225, 218, 0.72), rgba(231, 227, 212, 0.72));
  border: 1px solid rgba(78, 99, 89, 0.18);
  color: var(--aem-green-deep);
  font-size: 12px;
}

.task-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
  padding: 8px 11px;
  border: 1px solid rgba(78, 99, 89, 0.24);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(217, 225, 218, 0.92), rgba(251, 250, 242, 0.92));
  color: var(--aem-green-deep);
}

.task-badge strong {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--aem-green);
  color: var(--paper);
  font-family: "Italiana", Georgia, serif;
  font-size: 18px;
  font-weight: 500;
}

.task-badge.done strong {
  background: var(--ok);
}

.task-badge span {
  font-size: 13px;
  font-weight: 700;
}

.task-summary {
  padding: 13px;
  border: 1px solid rgba(78, 99, 89, 0.2);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(251, 250, 242, 0.98), rgba(217, 225, 218, 0.5));
}

.task-preview {
  display: grid;
  gap: 6px;
  margin: 10px 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.task-preview span {
  padding-left: 10px;
  border-left: 3px solid rgba(78, 99, 89, 0.35);
}

.task-stats article {
  min-height: 88px;
  padding: 14px;
  border: 1px solid rgba(78, 99, 89, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(217, 225, 218, 0.52));
}

.task-stats span {
  color: var(--muted);
  font-size: 13px;
}

.task-stats strong {
  display: block;
  margin-top: 8px;
  font-family: "Italiana", Georgia, serif;
  font-size: 32px;
  font-weight: 500;
}

.subpanel {
  padding: 14px;
  border: 1px dashed rgba(78, 99, 89, 0.28);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.56);
}

.subpanel h4 {
  margin: 0 0 12px;
}

.contract-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 14px;
}

.contract-doc {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  font-size: 13.5px;
  line-height: 1.6;
}

.contract-doc h2 {
  font-family: "Italiana", Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 12px;
}

.contract-doc h3 {
  font-family: "Italiana", Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--aem-green-deep);
  margin: 18px 0 6px;
}

.contract-parties {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.contract-table-wrap {
  overflow-x: auto;
}

.contract-rincon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.contract-rincon-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}

.contract-rincon-card img,
.contract-rincon-noimg {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.contract-rincon-noimg {
  display: grid;
  place-items: center;
  background: var(--aem-green-soft);
  color: var(--muted);
  font-size: 11px;
}

.contract-rincon-card h4 {
  margin: 2px 0 0;
  font-size: 13px;
}

.contract-rincon-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  flex: 1;
}

.contract-rincon-card strong {
  font-size: 12.5px;
  color: var(--aem-green-deep);
}

.contract-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 13px;
}

.contract-table th,
.contract-table td {
  padding: 8px 10px;
  border: 1px solid var(--line);
  text-align: left;
}

.contract-table thead th {
  background: var(--aem-green);
  color: white;
}

.contract-signature {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.contract-signature img {
  max-width: 260px;
  border-bottom: 1px solid var(--ink);
}

.signature-pad-wrap {
  margin-top: 16px;
}

.signature-pad-wrap label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}

#contract-signature-pad {
  width: 100%;
  max-width: 600px;
  height: 180px;
  border: 1px dashed rgba(78, 99, 89, 0.4);
  border-radius: 12px;
  background: white;
  touch-action: none;
  cursor: crosshair;
}

.progress {
  height: 8px;
  overflow: hidden;
  background: var(--linen);
  border-radius: 999px;
}

.progress div {
  height: 100%;
  background: linear-gradient(90deg, var(--aem-green-deep), var(--aem-green), #7f978c);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.tabs button {
  white-space: nowrap;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(36, 35, 29, 0.05);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.tabs button:hover {
  transform: translateY(-2px);
  border-color: rgba(78, 99, 89, 0.5);
  box-shadow: var(--green-shadow);
}

.tabs button.active {
  background: linear-gradient(135deg, var(--ink), #3d3f21);
  color: var(--paper);
  border-color: rgba(78, 99, 89, 0.62);
  box-shadow: 0 12px 26px rgba(36, 35, 29, 0.18), inset 0 -2px 0 rgba(217, 225, 218, 0.74);
}

.list {
  display: grid;
  gap: 10px;
}

.row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.row:hover {
  transform: translateY(-2px);
  border-color: rgba(78, 99, 89, 0.48);
  box-shadow: 0 14px 30px rgba(36, 35, 29, 0.08), 0 0 0 1px rgba(78, 99, 89, 0.12);
}

.row h4,
.panel h3,
.panel h4 {
  margin: 0;
}

.row p,
.panel p {
  margin: 4px 0 0;
  color: var(--muted);
}

.task-row > div:nth-child(2),
.task-board .row > div:nth-child(2) {
  min-width: 0;
}

.task-row h4,
.task-board .row h4 {
  overflow-wrap: anywhere;
}

.time {
  width: 58px;
  color: var(--olive);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rose);
}

.status-dot.done {
  background: var(--aem-green-deep);
  box-shadow: 0 0 0 4px rgba(78, 99, 89, 0.16);
}

.status-dot.pending {
  background: var(--gold);
}

.status-dot.progressing {
  background: var(--aem-green);
}

.status-dot.cancelled {
  background: var(--danger);
}

.form {
  display: grid;
  gap: 12px;
}

.toolbar-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 14px;
  margin-bottom: 18px;
}

.locked-panel {
  border-style: dashed;
  background: linear-gradient(180deg, rgba(251, 250, 242, 0.94), rgba(231, 227, 212, 0.74));
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(78, 99, 89, 0.72);
  box-shadow: 0 0 0 4px rgba(78, 99, 89, 0.14);
  background: #fffef8;
}

.field textarea {
  min-height: 92px;
  resize: vertical;
}

.field small,
.file-hint {
  color: var(--muted);
  font-size: 12px;
}

.field-wide {
  grid-column: 1 / -1;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(36, 35, 29, 0.38);
  backdrop-filter: blur(10px);
}

.modal-card {
  width: min(760px, 100%);
  max-height: min(86vh, 840px);
  overflow: auto;
  border-color: rgba(170, 162, 99, 0.36);
  box-shadow: 0 32px 90px rgba(36, 35, 29, 0.28);
}

.modal-form {
  margin-top: 16px;
}

.detail-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  color: var(--muted);
}

.detail-list p {
  margin: 0;
}

.detail-list strong {
  color: var(--ink);
}

.form-panel {
  margin-bottom: 18px;
}

.wedding-form {
  gap: 16px;
}

.wedding-form .actions {
  padding-top: 4px;
}

.login {
  min-height: 100vh;
  display: grid;
  /* minmax(0, Nfr), no solo "Nfr": sin el 0 explicito, una columna con
     contenido de ancho porcentual (el .login-card de abajo) puede forzar un
     min-width:auto grande y "robarle" casi todo el espacio a la otra columna,
     dejandola reducida a una franja — es justo lo que se veia en el portal. */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  background: var(--ivory);
}

.login-visual {
  position: relative;
  min-width: 0;
  min-height: 300px;
  padding: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(160deg, rgba(36, 35, 29, 0.34), rgba(36, 35, 29, 0.76)),
    linear-gradient(90deg, rgba(78, 99, 89, 0.3), transparent 55%),
    url("./assets/contrato/banda-novios.jpg");
  background-size: cover;
  background-position: center;
  color: white;
}

.login-visual h1 {
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(42px, 6vw, 82px);
  font-weight: 500;
  letter-spacing: 0;
}

.login-visual p {
  max-width: 560px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

.login-panel {
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 34px;
  overflow-y: auto;
}

.login-card {
  display: grid;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.login-card h2 {
  margin: 8px 0 6px;
  font-family: "Italiana", Georgia, serif;
  font-size: 36px;
  font-weight: 500;
}

.portal-pick-list {
  max-height: 50vh;
  overflow-y: auto;
  gap: 8px;
}

.portal-pick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.portal-pick-row:hover,
.portal-pick-row:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(78, 99, 89, 0.48);
  box-shadow: 0 14px 30px rgba(36, 35, 29, 0.08), 0 0 0 1px rgba(78, 99, 89, 0.12);
}

.portal-pick-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.portal-pick-info strong {
  font-size: 15px;
}

.portal-pick-info small {
  color: var(--muted);
  font-size: 12px;
}

.portal-actions {
  justify-content: flex-start;
  margin-bottom: 16px;
}

.portal-shell {
  min-height: 100vh;
  overflow-x: clip;
  background: linear-gradient(135deg, #fbfaf2, color-mix(in srgb, var(--couple-accent, var(--ivory)) 36%, white));
}

.portal-hero {
  min-height: 360px;
  padding: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background-size: cover;
  background-position: center;
  color: white;
  position: relative;
}

.portal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(78, 99, 89, 0.18), rgba(36, 35, 29, 0.68)),
    linear-gradient(90deg, rgba(36, 35, 29, 0.66), transparent 68%);
}

.portal-hero > div {
  position: relative;
  z-index: 1;
}

.portal-hero h1 {
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(38px, 7vw, 72px);
  font-weight: 500;
}

.portal-summary {
  margin-bottom: 18px;
}

.portal-login-visual {
  position: relative;
}

.portal-login-visual::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

.empty {
  padding: 22px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed rgba(78, 99, 89, 0.36);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.55);
}

.empty h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 500;
}

.empty p {
  max-width: 640px;
  margin: 0 auto 16px;
}

.empty-large {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--ink), #3f421f);
  color: white;
  border: 1px solid rgba(78, 99, 89, 0.42);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.aem-hero {
  position: relative;
  min-height: 285px;
  margin-bottom: 18px;
  padding: 28px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: white;
  background:
    linear-gradient(90deg, rgba(36, 35, 29, 0.78), rgba(36, 35, 29, 0.16)),
    linear-gradient(135deg, rgba(78, 99, 89, 0.2), transparent 52%),
    url("./assets/rincones/bienvenida.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.aem-hero::after {
  content: none;
}

.aem-hero h3 {
  margin: 6px 0 8px;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 500;
  max-width: 760px;
  line-height: 1.04;
}

.aem-hero p {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.86);
}

.inline-tools {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mini-btn {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf8, #f4efe2);
  color: var(--ink);
  box-shadow: 0 6px 14px rgba(36, 35, 29, 0.06);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.mini-btn:hover {
  border-color: var(--aem-green);
  box-shadow: 0 8px 18px rgba(111, 112, 53, 0.12);
}

.team-card {
  min-height: 190px;
  display: grid;
  align-content: space-between;
}

.role-chip {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(217, 225, 218, 0.76), rgba(78, 99, 89, 0.12));
  border: 1px solid rgba(78, 99, 89, 0.22);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.mobile-menu {
  display: none;
}

.mobile-nav,
.mobile-more-layer {
  display: none;
}

.eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--aem-green-deep);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.control-hero {
  min-height: 248px;
  margin-bottom: 18px;
  padding: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 28px;
  align-items: center;
  color: white;
  background:
    linear-gradient(90deg, rgba(31, 39, 34, 0.94), rgba(47, 61, 53, 0.7)),
    url("./assets/rincones/bienvenida.jpg");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(78, 99, 89, 0.4);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.control-hero .eyebrow,
.control-hero p {
  color: rgba(255, 255, 255, 0.78);
}

.control-hero h3 {
  margin: 0;
  max-width: 720px;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 500;
  line-height: 1.06;
}

.control-copy > p {
  margin: 10px 0 14px;
}

.control-actions {
  margin-top: 18px;
  justify-content: flex-start;
}

.readiness-orbit {
  min-height: 170px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(251, 250, 242, 0.1);
  backdrop-filter: blur(14px);
}

.readiness-orbit strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 52px;
  font-weight: 500;
}

.readiness-orbit span,
.readiness-orbit small {
  color: rgba(255, 255, 255, 0.78);
}

.readiness-orbit small {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.dashboard-priority-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 16px;
  margin-top: 18px;
}

.priority-panel {
  border-top: 4px solid var(--aem-green);
}

.risk-list {
  display: grid;
  gap: 8px;
}

.risk-item {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf8;
  color: var(--ink);
  text-align: left;
}

.risk-item > span {
  width: 8px;
  height: 26px;
  background: var(--gold);
}

.risk-item.high > span { background: var(--danger); }
.risk-item.ok > span { background: var(--ok); }
.risk-item small { color: var(--muted); }
.risk-item:hover { border-color: var(--aem-green); box-shadow: 0 8px 18px rgba(78, 99, 89, 0.12); }

.activity-strip {
  margin-top: 18px;
}

.palette-editor {
  display: grid;
  grid-template-columns: repeat(3, 96px) minmax(220px, 1fr);
  gap: 12px;
  align-items: end;
}

.field input[type="color"] {
  min-height: 48px;
  padding: 4px;
}

.service-catalog {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.service-catalog-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) 110px minmax(200px, 2fr);
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
}

.service-catalog-row:has(.service-catalog-check input:checked) {
  border-color: var(--aem-green);
  background: var(--aem-green-soft);
}

.service-catalog-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.service-catalog-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--aem-green);
  flex-shrink: 0;
}

.service-catalog-notes {
  min-width: 0;
}

.palette-swatches {
  display: flex;
  gap: 8px;
  align-items: center;
}

.palette-swatches span {
  width: 40px;
  height: 40px;
  display: block;
  background: var(--swatch, #d8d2bd);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(36, 35, 29, 0.16), 0 6px 14px rgba(36, 35, 29, 0.12);
}

.palette-swatches.compact span {
  width: 28px;
  height: 28px;
}

.control-hero .palette-swatches span {
  border-color: rgba(255, 255, 255, 0.72);
}

.palette-block {
  margin-top: 18px;
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border-top: 1px solid var(--line);
}

.palette-block p { margin: 0; }

.palette-metric {
  min-height: 118px;
  padding: 18px;
  border-left: 5px solid var(--couple-primary, var(--aem-green));
}

.palette-metric > span { color: var(--muted); font-size: 13px; }
.palette-metric .palette-swatches { margin: 9px 0; }
.palette-metric p { font-size: 12px; }

.wedding-command {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 230px minmax(160px, 1fr) auto;
  gap: 20px;
  align-items: center;
  border-left: 6px solid var(--aem-green);
}

.wedding-command strong {
  display: block;
  font-family: "Italiana", Georgia, serif;
  font-size: 38px;
  font-weight: 500;
}

.wedding-command p { font-size: 12px; }

.quick-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.quick-tabs button,
.audience-control button {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf8;
  color: var(--ink);
  font-weight: 700;
}

.quick-tabs button:hover,
.audience-control button.active {
  background: var(--aem-green);
  border-color: var(--aem-green);
  color: white;
}

.wedding-summary-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
}

.wedding-identity {
  grid-row: span 2;
}

.attention-card {
  border-top: 4px solid var(--rose);
}

.export-studio {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(420px, 1.2fr);
  gap: 16px;
  align-items: start;
}

.export-intro h3,
.guide-hero h3 {
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.08;
}

.audience-control {
  display: flex;
  gap: 6px;
  margin: 18px 0;
}

.export-preview-card {
  min-height: 220px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(145deg, #fff 0 66%, var(--preview-secondary, #c8aaa2) 66% 100%);
  border-top: 7px solid var(--preview-primary, #526b60);
  box-shadow: 0 18px 38px rgba(36, 35, 29, 0.14);
}

.export-preview-card img { width: 160px; }
.export-preview-card h4 { margin: 5px 0 0; font: 32px Georgia, serif; }
.export-preview-card p { margin-top: 4px; }
.export-main-action { width: 100%; margin-top: 16px; justify-content: center; }

.export-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.export-option {
  min-height: 72px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf8;
  cursor: pointer;
}

.export-option input { width: 20px; height: 20px; accent-color: var(--aem-green); }
.export-option .check-mark { display: none; }
.export-option > span:last-child { min-width: 0; }
.export-option strong, .export-option small { display: block; }
.export-option small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.export-option:has(input:checked) { border-color: var(--aem-green); background: var(--aem-green-soft); }
.export-secondary-actions { margin-top: 16px; justify-content: flex-start; }

.print-options-modal {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-top: 6px solid var(--print-primary, #526b60);
}

.print-options-heading {
  display: flex;
  align-items: center;
  gap: 18px;
}

.print-options-logo {
  width: 126px;
  padding: 8px 10px;
  border-right: 1px solid var(--line);
}

.print-options-audience {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.print-options-audience .audience-control { margin: 0; }
.print-options-actions { justify-content: flex-start; margin-top: 18px; }

.guide-hero {
  min-height: 210px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  border-left: 7px solid var(--aem-green);
}

.guide-hero > div { max-width: 780px; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr); gap: 16px; margin-top: 16px; }
.guide-side { display: grid; gap: 16px; align-content: start; }
.guide-step { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.guide-step > span { font: 24px Georgia, serif; color: var(--aem-green); }
.guide-step h4 { margin: 0; }
.guide-step p { margin: 4px 0 0; color: var(--muted); }
.guide-data { margin-top: 16px; }
.guide-data article { padding: 14px; border-left: 4px solid var(--aem-green); background: rgba(217, 225, 218, 0.34); }
.guide-data h4 { margin: 0; }

@media (max-width: 1100px) {
  .export-studio,
  .guide-layout,
  .dashboard-priority-grid,
  .wedding-summary-grid {
    grid-template-columns: 1fr;
  }
  .wedding-identity { grid-row: auto; }
}

@media print {
  .sidebar,
  .topbar,
  .actions,
  .tabs,
  .tab-nav,
  .tab-btn,
  .sidebar-boda-chip,
  .wedding-card-actions,
  .mesa-card-actions,
  .btn {
    display: none !important;
  }

  .app-shell {
    display: block;
  }

  .content {
    padding: 0;
  }

  .panel,
  .card,
  .row {
    box-shadow: none;
    break-inside: avoid;
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    inset: auto 12px 12px;
    z-index: 8;
    min-height: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
  }

  .brand,
  .sidebar-footer {
    display: none;
  }

  .nav {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav button {
    width: auto;
    min-width: 48px;
    justify-content: center;
  }

  .nav span:not(.ico) {
    display: none;
  }

  .content {
    padding-bottom: 96px;
  }

  .actions {
    justify-content: flex-start;
  }

  .btn {
    min-height: 44px;
  }

  .grid.cols-4,
  .grid.cols-3,
  .grid.cols-2 {
    grid-template-columns: 1fr;
  }

  .login {
    grid-template-columns: 1fr;
  }

  .login-visual {
    min-height: 42vh;
  }

  .control-hero,
  .wedding-command {
    grid-template-columns: 1fr;
  }

  .readiness-orbit {
    min-height: 128px;
  }

  .quick-tabs {
    justify-content: flex-start;
  }

  .palette-editor {
    grid-template-columns: repeat(3, 1fr);
  }

  .palette-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .topbar {
    display: grid;
    padding: 16px;
  }

  .content {
    padding: 18px 16px 92px;
  }

  .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .time {
    width: auto;
  }

  .metric strong {
    font-size: 30px;
  }

  .aem-hero {
    min-height: 320px;
    padding: 22px;
  }

  .inline-tools {
    justify-content: flex-start;
  }

  .control-hero {
    min-height: 0;
    padding: 22px;
  }

  .export-checklist,
  .palette-editor {
    grid-template-columns: 1fr;
  }

  .print-options-audience {
    align-items: flex-start;
    flex-direction: column;
  }

  .print-options-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .print-options-logo {
    width: 112px;
    padding: 0 0 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .print-options-audience .audience-control {
    width: 100%;
    overflow-x: auto;
  }

  .palette-note {
    grid-column: auto;
  }

  .palette-block,
  .guide-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .guide-step {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .guide-step .btn {
    grid-column: 2;
  }

  .btn,
  .mini-btn {
    width: fit-content;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
}

/* ============================================================================
   MEJORAS UX/UI — v2 — Rodrigo · AEM Planner
   Agrupación de tabs, contexto topbar, indicadores de guardado,
   tarjetas de boda, mesas, sidebar activa, microinteracciones.
   ============================================================================ */

.legal-note {
  margin: 12px 0 0 !important;
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(168, 79, 66, 0.07);
  border-left: 3px solid rgba(168, 79, 66, 0.45);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  REDISEÑO DASHBOARD + MESAS (boceto)                                  ║
   ║  El boceto usa violeta; aqui se traduce a la paleta AEM (verde        ║
   ║  salvia + mostaza) para no romper la identidad de marca. El violeta   ║
   ║  se sustituye por el verde de marca en acentos y estados activos.     ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* ── Cabecera del panel ─────────────────────────────────────────────────── */
.dash-sub {
  margin: 6px 0 0;
  color: var(--tinta-suave);
  font-size: 14px;
}

/* ── Tarjetas KPI con chip de icono ─────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

/* Tarjeta KPI centrada: la cifra es el elemento principal, así que se
   alinea al centro con su etiqueta y su icono en un eje único. */
.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding: 20px 16px;
  border: 1px solid var(--borde-suave);
  border-radius: 18px;
  background: rgba(251, 250, 242, 0.92);
  box-shadow: 0 10px 30px rgba(36, 35, 29, 0.06);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(36, 35, 29, 0.12);
}

.stat-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 14px;
  font-size: 19px;
  font-weight: 700;
}

.stat-icon.tone-verde   { background: rgba(78, 99, 89, 0.14);  color: var(--aem-green-deep); }
.stat-icon.tone-mostaza { background: rgba(226, 231, 53, 0.34); color: #4a4626; }
.stat-icon.tone-rosa    { background: rgba(199, 166, 150, 0.32); color: #7a4a35; }
.stat-icon.tone-clay    { background: rgba(166, 116, 92, 0.2);  color: #7a4a35; }

.stat-label {
  font-size: 12.5px;
  color: var(--tinta-suave);
}

/* Las cifras grandes van en DM Sans, la misma que usa algoentremanos.es para
   todo lo que no es titular. Italiana solo existe en peso 400: es una display
   serif de trazo finísimo, perfecta para "Cada boda, bajo control" y sin
   ninguna presencia en un número — un importe de cinco dígitos pesaba menos
   que su propia etiqueta. `tabular-nums` evita que el número baile al
   actualizarse, y `lining-nums` iguala la altura de todos los dígitos. */
.stat-value {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--ink);
}

.stat-sub {
  font-size: 12px;
  color: var(--tinta-suave);
}

.stat-bar {
  width: 100%;
  height: 6px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--crema-oscura);
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.stat-bar-fill.tone-verde   { background: linear-gradient(90deg, var(--aem-green-deep), var(--aem-green)); }
.stat-bar-fill.tone-mostaza { background: linear-gradient(90deg, #c9ce22, var(--mostaza)); }
.stat-bar-fill.tone-rosa    { background: linear-gradient(90deg, #b08d7d, var(--rose)); }
.stat-bar-fill.tone-clay    { background: linear-gradient(90deg, #8d5f4a, var(--clay)); }

.stat-spark {
  width: 100%;
  height: 28px;
  margin-top: 10px;
  display: block;
  opacity: 0.75;
}

/* ── Rejillas del panel ─────────────────────────────────────────────────── */
.dash-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
  align-items: start;
}

.dash-stack {
  display: grid;
  gap: 18px;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-head .card-title { margin: 0; }

/* Enlace de accion discreto ("Ver todas") */
.link-btn {
  flex-shrink: 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--aem-green);
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

.link-btn:hover { border-bottom-color: var(--aem-green); }

/* ── Próximas bodas ─────────────────────────────────────────────────────── */
.wed-list { display: grid; gap: 6px; }

.wed-item {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 14px;
  transition: background 160ms ease;
}

.wed-item:hover { background: var(--crema-oscura); }

.wed-item-open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border: 0;
  background: none;
  text-align: left;
}

.wed-thumb {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-color: var(--aem-green-soft);
}

.wed-body { display: grid; gap: 3px; min-width: 0; }

.wed-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wed-top strong {
  font-size: 14.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wed-meta {
  font-size: 12px;
  color: var(--tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wed-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
}

.wed-pct {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--aem-green);
  font-variant-numeric: tabular-nums;
}

.wed-progress-row .progress { flex: 1; height: 6px; }
.wed-progress-row .progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--aem-green-deep), var(--aem-green));
}

.row-menu-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-right: 6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-suave);
  font-size: 16px;
  transition: background 150ms ease, color 150ms ease;
}

.row-menu-btn:hover { background: rgba(78, 99, 89, 0.12); color: var(--aem-green-deep); }

/* ── Tareas de hoy ──────────────────────────────────────────────────────── */
.today-list { display: grid; gap: 2px; }

.today-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 12px;
  transition: background 160ms ease;
}

.today-item:hover { background: var(--crema-oscura); }

.today-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1.6px solid rgba(78, 99, 89, 0.45);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  font-size: 12px;
  font-weight: 700;
  transition: background 160ms ease, border-color 160ms ease;
}

.today-check:hover { border-color: var(--aem-green); background: rgba(78, 99, 89, 0.1); }

.today-item.done .today-check {
  background: var(--aem-green);
  border-color: var(--aem-green);
  color: #fff;
}

.today-body { display: grid; gap: 1px; min-width: 0; flex: 1; }
.today-body strong { font-size: 13.5px; color: var(--ink); }
.today-body small { font-size: 11.5px; color: var(--tinta-suave); }
.today-item.done .today-body strong { text-decoration: line-through; color: var(--tinta-suave); }

.today-when {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

.today-when.ok { color: var(--aem-green); font-weight: 700; }

.add-inline-btn {
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  border: 1px dashed rgba(78, 99, 89, 0.35);
  border-radius: 12px;
  background: transparent;
  color: var(--aem-green);
  font-size: 13px;
  font-weight: 700;
  transition: background 160ms ease, border-color 160ms ease;
}

.add-inline-btn:hover { background: rgba(78, 99, 89, 0.07); border-color: var(--aem-green); }

/* ── Gráficos ───────────────────────────────────────────────────────────── */
.area-chart { width: 100%; height: auto; display: block; }

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--borde-suave);
}

.summary-strip div { display: grid; gap: 2px; }
.summary-strip strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 21px;
  font-weight: 400;
  color: var(--aem-green-deep);
}
.summary-strip span { font-size: 11px; color: var(--tinta-suave); }

/* Anillo de distribución */
.donut-wrap {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.donut { width: 100%; max-width: 190px; height: auto; }
.donut-arc { transition: stroke-dasharray 420ms cubic-bezier(0.22, 1, 0.36, 1); }

.donut-total {
  font-family: "Italiana", Georgia, serif;
  font-size: 21px;
  fill: var(--ink);
}

.donut-caption {
  font-size: 9px;
  fill: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.donut-legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  font-size: 12.5px;
}

.donut-legend i { width: 10px; height: 10px; border-radius: 3px; }
.donut-legend-label { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend-value { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.donut-legend-pct { min-width: 34px; text-align: right; font-weight: 700; color: var(--aem-green); font-variant-numeric: tabular-nums; }

/* ── Cronograma del día ─────────────────────────────────────────────────── */
.timeline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px 14px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 8px;
  border-radius: 12px;
  transition: background 160ms ease;
}

.timeline-item:hover { background: var(--crema-oscura); }

.timeline-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--aem-green-deep);
  font-variant-numeric: tabular-nums;
}

.timeline-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--aem-green);
  box-shadow: 0 0 0 3px rgba(78, 99, 89, 0.16);
}

/* Línea vertical que une los hitos */
.timeline-item:not(:last-child) .timeline-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 1px;
  height: 26px;
  background: rgba(78, 99, 89, 0.24);
  transform: translateX(-50%);
}

.timeline-body { display: grid; gap: 1px; min-width: 0; }
.timeline-body strong { font-size: 13.5px; color: var(--ink); }
.timeline-body small { font-size: 11.5px; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Cierre de marca ────────────────────────────────────────────────────── */
/* Cierre de marca. Antes iba alineado a la izquierda y en verde claro sobre
   crema — no llegaba al contraste mínimo de WCAG AA. Ahora va centrado y
   sobre fondo verde de marca, con texto crema: contraste 8.4:1. */
.brand-closing {
  margin-top: 6px;
  padding: 34px 30px;
  border: 1px solid var(--aem-green-deep);
  border-radius: 20px;
  background: linear-gradient(140deg, var(--aem-green) 0%, var(--aem-green-deep) 100%);
  text-align: center;
}

.brand-closing > div {
  display: grid;
  gap: 8px;
  justify-items: center;
  max-width: 46ch;
  margin: 0 auto;
}

.brand-closing h3 {
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--crema);
}

.brand-closing p {
  margin: 0 !important;
  color: rgba(240, 240, 230, 0.86);
  font-size: 14px;
  line-height: 1.6;
}

.brand-closing-sign {
  display: inline-block;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(240, 240, 230, 0.3);
  font-family: "Italiana", Georgia, serif;
  font-size: 18px;
  color: var(--mostaza);
  letter-spacing: 0.04em;
}

/* ── Avatares ───────────────────────────────────────────────────────────── */
.avatar {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--avatar-bg, var(--aem-green));
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.avatar-sm { width: 26px; height: 26px; font-size: 10px; }
.avatar-md { width: 34px; height: 34px; font-size: 12px; }
.avatar-lg { width: 44px; height: 44px; font-size: 14px; }

/* ── Control segmentado ─────────────────────────────────────────────────── */
.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--borde-suave);
  border-radius: 999px;
  background: var(--crema-oscura);
}

.segmented-btn {
  padding: 7px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-suave);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.segmented-btn.active {
  background: var(--aem-green);
  color: var(--crema);
  box-shadow: 0 4px 12px rgba(78, 99, 89, 0.28);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .donut-wrap { grid-template-columns: 160px minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .stat-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stat-value { font-size: 27px; }
  .donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline-item { grid-template-columns: 44px 14px minmax(0, 1fr); }
  .timeline-item .pill { grid-column: 3; justify-self: start; }
  .brand-closing { padding: 20px; }
  .wed-thumb { width: 46px; height: 46px; }
}

/* Estado vacío del reparto de presupuesto */
.budget-empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 30px 18px;
  text-align: center;
}

.budget-empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(226, 231, 53, 0.3);
  color: #4a4626;
  font-size: 20px;
  font-weight: 700;
}

.budget-empty strong { font-size: 15px; color: var(--ink); }
.budget-empty p { margin: 0 !important; font-size: 12.5px; color: var(--tinta-suave); max-width: 320px; }

/* ── TIMELINE: una sola columna ─────────────────────────────────────────
   Hora · eje · tarjeta. Se lee de arriba abajo como la escaleta real del
   día; el zigzag anterior obligaba a saltar la vista de lado a lado. */
.tl {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
}

.tl-item {
  display: grid;
  grid-template-columns: 62px 32px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.tl-time {
  padding: 18px 12px 0 0;
  text-align: right;
  font-family: "Italiana", Georgia, serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  color: var(--aem-green-deep);
  font-variant-numeric: tabular-nums;
}

/* Carril continuo: la linea vive aqui, no en un pseudo-elemento global,
   asi crece exactamente lo que mida cada tarjeta. */
.tl-rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.tl-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--borde-suave);
}

.tl-item:first-child .tl-rail::before { top: 20px; }
.tl-item:last-child .tl-rail::before { bottom: calc(100% - 20px); }

.tl-node {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--borde-suave);
  background: var(--paper);
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

.tl-icon { font-size: 12px; line-height: 1; color: var(--aem-green); }

.tl-item.done .tl-node { border-color: var(--aem-green); background: var(--aem-green); }
.tl-item.done .tl-icon { color: var(--crema); }
.tl-item:hover .tl-node { transform: scale(1.12); border-color: var(--aem-green); }

.tl-card {
  margin: 0 0 10px 14px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.tl-item:hover .tl-card {
  transform: translateX(2px);
  border-color: rgba(78, 99, 89, 0.4);
  box-shadow: 0 10px 24px rgba(36, 35, 29, 0.08);
}

.tl-item.done .tl-card { background: rgba(217, 225, 218, 0.34); }

.tl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tl-card-head h4 { margin: 0; font-size: 14.5px; color: var(--ink); }

.tl-card-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Las acciones aparecen al pasar por encima; la insignia siempre visible */
.tl-card-tools .mini-btn { opacity: 0; transition: opacity 160ms ease; }
.tl-item:hover .tl-card-tools .mini-btn,
.tl-item:focus-within .tl-card-tools .mini-btn { opacity: 1; }

.tl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 7px 0 0 !important;
}

.tl-owner,
.tl-cat {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.tl-owner { background: rgba(78, 99, 89, 0.12); color: var(--aem-green-deep); }
.tl-cat { background: var(--crema-oscura); color: var(--tinta-suave); }

.tl-note {
  margin: 8px 0 0 !important;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tinta-suave);
}

@media (max-width: 640px) {
  .tl-item { grid-template-columns: 48px 28px minmax(0, 1fr); }
  .tl-time { font-size: 17px; padding-right: 8px; }
  .tl-card { margin-left: 10px; padding: 12px 13px; }
  .tl-card-tools .mini-btn { opacity: 1; }
}

/* ── MESAS: barra de acciones ───────────────────────────────────────────── */
.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px 18px;
}

/* ── MESAS: plano del salón ─────────────────────────────────────────────── */
.venue-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  margin-bottom: 18px;
  align-items: start;
}

.venue-panel { margin-bottom: 0; }

.venue-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--tinta-suave);
}

.venue-legend span { display: inline-flex; align-items: center; gap: 6px; }
.venue-legend i { width: 9px; height: 9px; border-radius: 50%; }
.dot-completa { background: var(--aem-green); }
.dot-libre    { background: var(--borde-suave); border: 1px solid var(--tinta-suave); }
.dot-pocas    { background: var(--mostaza); }
.dot-sel      { background: var(--clay); }

.venue-scroll {
  overflow: auto;
  border-radius: 16px;
  border: 1px solid var(--borde-suave);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(36, 35, 29, 0.03) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, rgba(36, 35, 29, 0.03) 24px),
    #faf9f2;
}

.venue-canvas {
  position: relative;
  min-height: 320px;
  touch-action: none;
}

/* Contenedor de mesa + sus asientos alrededor.
   El tamaño lo fija venue.js en línea: es la huella completa (círculo +
   anillo de asientos), no solo el círculo — así dos mesas nunca se pisan. */
.venue-table-wrap {
  position: absolute;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.venue-table-wrap:active { cursor: grabbing; }
.venue-table-wrap.selected { z-index: 4; }

.venue-table {
  position: absolute;
  display: grid;
  place-content: center;
  gap: 2px;
  border-radius: 50%;
  border: 2px solid var(--borde-suave);
  background: rgba(251, 250, 242, 0.98);
  box-shadow: 0 8px 22px rgba(36, 35, 29, 0.1);
  text-align: center;
  font-size: 12px;
  padding: 4px;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.venue-table-more {
  font-size: 10px;
  font-weight: 700;
  color: var(--clay);
}

.venue-table.state-completa { border-color: var(--aem-green); background: rgba(217, 225, 218, 0.55); }
.venue-table.state-pocas    { border-color: var(--mostaza); background: rgba(226, 231, 53, 0.12); }
.venue-table.state-libre    { border-color: var(--borde-suave); }

.venue-table-wrap:hover .venue-table {
  transform: scale(1.03);
  box-shadow: 0 14px 34px rgba(36, 35, 29, 0.16);
}

.venue-table-wrap.selected .venue-table {
  border-color: var(--clay);
  box-shadow: 0 0 0 4px rgba(166, 116, 92, 0.22), 0 14px 34px rgba(36, 35, 29, 0.16);
}

.venue-table-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  max-width: 104px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.venue-table-count {
  font-size: 11.5px;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* Asiento del perímetro */
.venue-seat {
  position: absolute;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--borde-suave);
  background: #fff;
  color: var(--tinta-suave);
  font-size: 8.5px;
  font-weight: 700;
  transform: translate(-50%, -50%);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.venue-seat.taken {
  background: var(--aem-green);
  border-color: var(--aem-green);
  color: #fff;
}

.venue-seat:hover { transform: translate(-50%, -50%) scale(1.18); z-index: 3; }

.venue-selected-mark {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--clay);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(166, 116, 92, 0.4);
}

.venue-hint {
  margin: 10px 0 0 !important;
  font-size: 12px;
  color: var(--tinta-suave);
  text-align: center;
}

/* ── MESAS: panel lateral ───────────────────────────────────────────────── */
.venue-side { position: sticky; top: 90px; }

.venue-side-empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 34px 18px;
  text-align: center;
}

.venue-side-empty-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--crema-oscura);
  color: var(--tinta-suave);
  font-size: 22px;
}

.venue-side-empty strong { font-size: 15px; color: var(--ink); }
.venue-side-empty p { margin: 0 !important; font-size: 12.5px; color: var(--tinta-suave); }

.venue-side-stats {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.venue-side-stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.venue-side-stats span { font-size: 12.5px; color: var(--tinta-suave); }
.venue-side-stats strong { font-size: 14px; color: var(--aem-green-deep); font-variant-numeric: tabular-nums; }
.venue-side-stats strong.full { color: var(--mostaza-text, #4a4626); }

.venue-side-title {
  margin: 18px 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
}

.venue-guest-list { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }

.venue-guest {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 10px;
  transition: background 150ms ease;
}

.venue-guest:hover { background: var(--crema-oscura); }
.venue-guest-body { display: grid; gap: 1px; min-width: 0; flex: 1; }
.venue-guest-body strong { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue-guest-body small { font-size: 11px; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.venue-seat-field { margin-top: 14px; }

.venue-allergy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }

.venue-allergy-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(168, 79, 66, 0.07);
  font-size: 12.5px;
}

.venue-allergy-list strong { color: var(--danger); font-variant-numeric: tabular-nums; }

/* ── MESAS: barra de filtros ────────────────────────────────────────────── */
.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borde-suave);
}

.search-wrap { position: relative; flex: 1 1 260px; min-width: 0; }

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-suave);
  font-size: 15px;
  pointer-events: none;
}

.search-wrap .guest-search { width: 100%; padding-left: 36px; min-width: 0; }

.filter-field { display: grid; gap: 4px; }

.filter-field span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta-suave);
}

.filter-field select {
  min-height: 38px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
}

.filter-field select:focus {
  outline: none;
  border-color: var(--aem-green);
  box-shadow: 0 0 0 3px rgba(78, 99, 89, 0.13);
}

.chip-toggle {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--tinta-suave);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.chip-toggle:hover { border-color: rgba(168, 79, 66, 0.5); }

.chip-toggle.active {
  background: rgba(168, 79, 66, 0.12);
  border-color: var(--danger);
  color: var(--danger);
}

/* Celda de invitado con avatar */
.cell-guest { display: flex; align-items: center; gap: 9px; }
.cell-guest-body { display: grid; gap: 1px; min-width: 0; }
.cell-guest-body strong { font-size: 13px; color: var(--ink); }
.cell-guest-body small { font-size: 11px; color: var(--tinta-suave); }

/* ── Responsive Mesas ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .venue-layout { grid-template-columns: minmax(0, 1fr); }
  .venue-side { position: static; }
  .stat-row-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .stat-row-5 { grid-template-columns: minmax(0, 1fr); }
  .toolbar-row { flex-direction: column; align-items: stretch; }
  .toolbar-row .segmented { width: 100%; justify-content: center; }
  .toolbar-row .actions { justify-content: flex-start; }
  .filters-row { gap: 8px; }
  .filter-field { flex: 1 1 calc(50% - 4px); }
  .filter-field select { width: 100%; }
  .venue-guest-list { max-height: none; }
}

/* En pantallas anchas los 5 KPI de Mesas caben en una fila */
.stat-row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ═══ Panel legal / proteccion de datos ═════════════════════════════════ */
.legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.legal-item {
  padding: 14px;
  border: 1px solid var(--borde-suave);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.6);
}

.legal-item h4 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta-suave);
}

.legal-item p {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

.legal-alert {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(168, 79, 66, 0.32);
  border-left: 4px solid var(--danger);
  border-radius: 12px;
  background: rgba(168, 79, 66, 0.06);
}

.legal-alert-icon {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--danger);
}

.legal-alert strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--danger);
}

.legal-alert p {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}

/* ═══ Bloque "elegir de catalogo y acumular" ════════════════════════════ */
.picker-block {
  margin-top: 18px;
  padding: 18px;
  border: 1px dashed rgba(78, 99, 89, 0.3);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.6);
}

.picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.picker-head h3 {
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  color: var(--tinta);
}

.picker-head p {
  margin: 4px 0 0 !important;
  font-size: 12.5px;
  color: var(--tinta-suave);
}

.picker-count {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--aem-green);
  color: var(--crema);
  font-size: 13px;
  font-weight: 700;
}

.picker-select {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.picker-select:hover,
.picker-select:focus {
  outline: none;
  border-color: var(--aem-green);
  box-shadow: 0 0 0 3px rgba(78, 99, 89, 0.13);
}

.picker-rows {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  animation: pickerRowIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pickerRowIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

.picker-row-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.picker-row-main strong {
  font-size: 14px;
  color: var(--ink);
}

.picker-note {
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(251, 250, 242, 0.8);
  color: var(--muted);
  font-size: 12.5px;
}

.picker-note:focus {
  outline: none;
  border-color: var(--aem-green);
  color: var(--ink);
}

.picker-row-price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.picker-row-price input {
  width: 92px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.picker-row-price input:focus {
  outline: none;
  border-color: var(--aem-green);
  box-shadow: 0 0 0 3px rgba(78, 99, 89, 0.13);
}

.picker-row-price span {
  color: var(--tinta-suave);
  font-size: 13px;
  font-weight: 700;
}

.picker-remove {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--danger);
  font-size: 14px;
  font-weight: 700;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.picker-remove:hover {
  background: rgba(168, 79, 66, 0.1);
  border-color: rgba(168, 79, 66, 0.35);
  transform: rotate(90deg);
}

.picker-empty {
  margin: 0;
  padding: 14px;
  border-radius: 10px;
  background: rgba(228, 226, 210, 0.45);
  color: var(--tinta-suave);
  font-size: 13px;
  text-align: center;
}

.picker-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--borde-suave);
}

.picker-total span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
}

.picker-total strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--aem-green-deep);
}

@media (max-width: 640px) {
  .picker-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .picker-row-price {
    grid-column: 1;
  }

  .picker-remove {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ═══ Animaciones y microinteracciones ══════════════════════════════════ */
/* Despliegue del formulario de alta: entra desde arriba con una curva
   suave, no aparece de golpe. */
#wedding-form-anchor {
  animation: formReveal 300ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes formReveal {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

/* Entrada escalonada de las tarjetas de boda: da sensación de orden. */
.wedding-card {
  animation: cardIn 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.grid > .wedding-card:nth-child(1) { animation-delay: 0ms; }
.grid > .wedding-card:nth-child(2) { animation-delay: 60ms; }
.grid > .wedding-card:nth-child(3) { animation-delay: 120ms; }
.grid > .wedding-card:nth-child(4) { animation-delay: 180ms; }
.grid > .wedding-card:nth-child(5) { animation-delay: 240ms; }
.grid > .wedding-card:nth-child(6) { animation-delay: 300ms; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Los KPI suben apenas al pasar el raton: sugiere que son consultables. */
.kpi-card {
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(36, 35, 29, 0.12);
}

/* Las filas del dashboard desplazan su contenido al pasar por encima. */
.dash-row {
  position: relative;
}

.dash-row::after {
  content: "›";
  position: absolute;
  right: 6px;
  opacity: 0;
  color: var(--tinta-suave);
  font-size: 18px;
  transition: opacity 160ms ease, transform 160ms ease;
  transform: translateX(-4px);
}

.dash-row:hover::after {
  opacity: 1;
  transform: none;
}

/* Accesibilidad: quien pide menos movimiento no recibe ninguno. */
@media (prefers-reduced-motion: reduce) {
  .wedding-card,
  .picker-row,
  #wedding-form-anchor {
    animation: none !important;
  }
}

/* ═══ Icono "+" dentro de botones ═══════════════════════════════════════ */
/* En un boton solido el circulo tenue del icono se perdia. Se agranda y se
   pinta en blanco translucido para que el "+" lea como marca de accion. */
.btn .icon-btn {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  border-radius: 50%;
}

.btn.primary .icon-btn {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.btn.sage .icon-btn {
  background: rgba(78, 99, 89, 0.18);
  color: var(--aem-green-deep);
}

/* ═══ MESAS: desglose de cocina y tabla agrupada ════════════════════════ */
.cocina-grid {
  margin-bottom: 18px;
  align-items: start;
}

.cocina-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--borde-suave);
}

.cocina-total span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
}

.cocina-total strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--aem-green-deep);
}

.allergy-panel .data-table {
  font-size: 12.5px;
}

.allergy-table td {
  padding: 7px 10px;
}

.allergy-cell {
  color: var(--ink);
}

.allergy-flag {
  color: var(--danger);
  font-weight: 700;
}

.warn-text {
  color: var(--danger);
  font-style: italic;
}

/* Buscador de invitados dentro de la cabecera de la tabla. */
.guest-search {
  min-height: 40px;
  min-width: 240px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
}

.guest-search:focus {
  outline: none;
  border-color: var(--aem-green);
  box-shadow: 0 0 0 3px rgba(78, 99, 89, 0.14);
}

/* Fila de grupo: hace de cabecera de mesa con su subtotal, como el
   agrupado por campo de una tabla dinamica. */
.guests-table .group-row td {
  padding: 10px 12px 6px;
  background: var(--crema-oscura);
  border-bottom: 1px solid var(--borde-suave);
}

.guests-table .group-row-warn td {
  background: rgba(168, 79, 66, 0.1);
}

.group-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--aem-green-deep);
}

.group-count {
  margin-left: 10px;
  font-size: 11.5px;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

.group-count.over {
  color: var(--danger);
  font-weight: 700;
}

/* Invitado con restriccion: banda lateral para localizarlo al vuelo. */
.guests-table .row-allergy td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}

@media (max-width: 640px) {
  .guest-search {
    min-width: 0;
    width: 100%;
  }
}

/* ═══ PROVEEDORES ═══════════════════════════════════════════════════════ */
.provider-group { margin-top: 20px; }

.provider-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-suave);
}

.provider-group-title span {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--crema-oscura);
  color: var(--aem-green-deep);
  font-size: 11px;
}

/* Logo del proveedor: favicon de su web, con inicial de reserva debajo */
.provider-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  overflow: hidden;
}

.provider-logo img {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  object-fit: contain;
  background: var(--paper);
}

.provider-logo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Italiana", Georgia, serif;
  font-size: 19px;
  color: var(--aem-green);
}

/* Contactos accionables */
.contact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--crema-oscura);
  color: var(--aem-green-deep);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease;
}

.contact-chip:hover {
  background: rgba(78, 99, 89, 0.14);
  border-color: var(--aem-green);
}

.filters-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  align-self: center;
}

/* ═══ RESUMEN DE BODA ═══════════════════════════════════════════════════ */
.resumen-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 24px 28px;
  border: 1px solid var(--borde-suave);
  border-radius: 20px;
  background:
    linear-gradient(100deg, rgba(251, 250, 242, 0.96) 55%, rgba(217, 225, 218, 0.55) 100%),
    var(--crema-oscura);
}

.resumen-hero-main { min-width: 0; flex: 1 1 320px; }

.resumen-hero-main h2 {
  margin: 6px 0 0;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 400;
  color: var(--aem-green-deep);
}

.resumen-hero-main p { margin: 6px 0 0 !important; color: var(--tinta-suave); font-size: 14px; }

.resumen-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

/* Cuenta atrás grande: el dato que más se consulta */
.resumen-hero-count {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  gap: 2px;
  min-width: 118px;
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--aem-green);
  color: var(--crema);
  text-align: center;
}

.resumen-hero-count strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
}

.resumen-hero-count span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.9;
}

.resumen-hero-count.hoy { background: var(--mostaza); color: #4a4626; }
.resumen-hero-count.cerrada { background: var(--crema-oscura); color: var(--tinta-suave); }

.resumen-notes {
  margin: 0 0 14px !important;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* Ficha de datos en dos columnas */
.resumen-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--borde-suave);
  border-bottom: 1px solid var(--borde-suave);
}

.resumen-datos dt {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
}

.resumen-datos dd {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: var(--ink);
}

.resumen-paleta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
}

.resumen-paleta p { margin: 4px 0 0 !important; font-size: 13px; color: var(--muted); }

.resumen-apuntes { margin-top: 4px; }
.resumen-apuntes p { margin: 8px 0 !important; font-size: 13px; }
.resumen-apuntes small { font-size: 11px; color: var(--tinta-suave); }

/* Siguiente hito del timeline */
.resumen-next { border-left: 4px solid var(--aem-green); }

.resumen-next-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 10px 0 14px;
}

.resumen-next-time {
  flex-shrink: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--aem-green-deep);
  font-variant-numeric: tabular-nums;
}

.resumen-next-body h4 { margin: 0; font-size: 14.5px; }
.resumen-next-body p { margin: 3px 0 0 !important; font-size: 12.5px; color: var(--tinta-suave); }

/* Accesos rápidos en rejilla */
.resumen-jumps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.resumen-jumps button {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 12px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.resumen-jumps button:hover {
  transform: translateY(-2px);
  border-color: var(--aem-green);
  box-shadow: 0 8px 18px rgba(78, 99, 89, 0.14);
}

.resumen-jumps span { font-size: 17px; color: var(--aem-green); }
.resumen-jumps small { font-size: 11px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

.view-hint {
  font-size: 12.5px;
  color: var(--tinta-suave);
  font-style: italic;
}

.venue-side-owner {
  margin: -6px 0 12px !important;
  font-size: 12px;
  color: var(--tinta-suave);
}

.venue-side-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borde-suave);
}

/* Cuenta atrás del portal de novios */
.portal-countdown {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 1px;
  min-width: 108px;
  padding: 16px 20px;
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--aem-green-deep);
  text-align: center;
  box-shadow: 0 12px 34px rgba(36, 35, 29, 0.24);
}

.portal-countdown strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
}

.portal-countdown span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.portal-countdown small { font-size: 11px; color: var(--tinta-suave); }
.portal-countdown.hoy { background: var(--mostaza); color: #4a4626; }
.portal-countdown.hoy strong { font-size: 30px; }
.portal-countdown.celebrada strong { font-size: 30px; }

@media (max-width: 640px) {
  .resumen-hero { padding: 20px; }
  .resumen-datos { grid-template-columns: minmax(0, 1fr); }
  .resumen-jumps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumen-hero-count { width: 100%; }
}

/* ═══ PORTAL DE NOVIOS ══════════════════════════════════════════════════ */
.portal-shell .content > * { margin-bottom: 18px; }
.portal-shell .content > *:last-child { margin-bottom: 0; }

.palette-portal .palette-block { margin-top: 0; }

/* Mesas en solo lectura para los novios */
.portal-mesa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.portal-mesa {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}

.portal-mesa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.portal-mesa-head h4 { margin: 0; font-size: 14.5px; }

.portal-mesa-guests {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.portal-mesa-guest {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink);
  min-width: 0;
}

.portal-mesa-guest > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Campos editables por los novios */
.portal-input {
  width: 100%;
  min-width: 108px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
}

.portal-input:focus {
  outline: none;
  border-color: var(--aem-green);
  box-shadow: 0 0 0 3px rgba(78, 99, 89, 0.13);
}

.data-table tr.row-edited td { background: rgba(226, 231, 53, 0.14); }

/* Barra de guardado: se enciende solo cuando hay cambios sin enviar */
.portal-save-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px -18px -18px;
  padding: 14px 18px;
  border-top: 1px solid var(--borde-suave);
  border-radius: 0 0 8px 8px;
  background: rgba(251, 250, 242, 0.96);
  backdrop-filter: blur(10px);
  font-size: 13px;
  color: var(--tinta-suave);
  transition: background 220ms ease, color 220ms ease;
}

.portal-save-bar.active {
  background: rgba(226, 231, 53, 0.22);
  color: #4a4626;
  font-weight: 700;
}

.portal-save-bar .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Estado de una solicitud de rincón, en la tarjeta del portal */
.rincon-req {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.45;
}

.rincon-req strong { font-size: 13px; }
.rincon-req span { color: var(--muted); }

.rincon-req-pending { background: rgba(226, 231, 53, 0.22); border: 1px solid rgba(226, 231, 53, 0.55); }
.rincon-req-pending strong { color: #4a4626; }

.rincon-req-ok { background: rgba(78, 99, 89, 0.14); border: 1px solid rgba(78, 99, 89, 0.34); }
.rincon-req-ok strong { color: var(--aem-green-deep); }

.rincon-req-no { background: rgba(168, 79, 66, 0.09); border: 1px solid rgba(168, 79, 66, 0.3); }
.rincon-req-no strong { color: var(--danger); }

.portal-wa-link {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--tinta-suave);
  text-align: center;
  text-decoration: underline;
}

/* Panel de solicitudes en el lado del equipo */
.requests-panel {
  margin-bottom: 18px;
  border-color: rgba(226, 231, 53, 0.6);
  background: linear-gradient(180deg, rgba(226, 231, 53, 0.1), rgba(251, 250, 242, 0.9));
}

@media (max-width: 640px) {
  .portal-save-bar { flex-direction: column; align-items: stretch; }
  .portal-save-bar .actions { justify-content: stretch; }
  .portal-save-bar .btn { flex: 1; justify-content: center; }
}

/* ═══ PORTAL: barra de previsualizacion del equipo ══════════════════════ */
/* Patron de "impersonation banner": deja siempre visible que se esta viendo
   la vista de otro y ofrece la salida, para no quedarse atrapado dentro. */
.portal-staff-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--aem-green-deep), var(--aem-green));
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--ivory);
  box-shadow: 0 6px 18px rgba(36, 35, 29, 0.14);
  font-size: 13px;
}

.portal-staff-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.portal-staff-eye {
  font-size: 15px;
}

.portal-staff-bar .btn.primary {
  background: var(--ivory);
  color: var(--aem-green-deep);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 12px rgba(20, 32, 27, 0.18);
}

.portal-staff-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.portal-staff-switch {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--aem-green-deep);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .portal-staff-bar {
    padding: 8px 14px;
    font-size: 12px;
  }

  .portal-staff-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* ═══ DASHBOARD estructura ALGOEN_2 ═════════════════════════════════════ */
.dash-header {
  margin-bottom: 24px;
}

.dash-eyebrow {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--tinta-suave);
}

.dash-title {
  margin: 6px 0 0;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--tinta);
}

/* Titulos de tarjeta: serif, como CardTitle de la referencia. */
.card-title {
  margin: 0 0 12px;
  font-family: "Italiana", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--tinta);
}

.card-sub {
  margin: -8px 0 12px !important;
  font-size: 12px;
  color: var(--tinta-suave);
}

.dash-charts {
  margin-top: 20px;
}

.line-chart {
  width: 100%;
  height: auto;
  display: block;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tinta-suave);
}

.chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Rejilla 2/3 + 1/3 igual que el dashboard de referencia. */
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}

.dash-main,
.dash-side {
  display: grid;
  gap: 20px;
  min-width: 0;
}

/* Fila-lista clicable: el patron <Link> de filas de la referencia. */
.dash-rows {
  display: grid;
  gap: 2px;
}

.dash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  transition: background 150ms ease;
}

.dash-row:hover {
  background: var(--crema-oscura);
}

.dash-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dash-row-main strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-row-main small {
  font-size: 12px;
  color: var(--tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dash-row-pct,
.dash-row-days {
  font-size: 12px;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

.dash-row-days {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--crema-oscura);
  font-weight: 700;
  color: var(--tinta);
}

.dash-row-amount {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dash-activity {
  display: grid;
  gap: 12px;
}

.dash-activity-item p {
  margin: 0 !important;
  font-size: 13px;
  color: var(--ink);
}

.dash-activity-item small {
  font-size: 11px;
  color: var(--tinta-suave);
}

.btn-xs {
  min-height: 30px;
  padding: 0 11px;
  font-size: 12px;
}

@media (max-width: 980px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Sidebar: chip de boda activa ──────────────────────────────────────── */
.sidebar-boda-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -8px 0 18px;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(78, 99, 89, 0.18), rgba(217, 225, 218, 0.4));
  border: 1px solid rgba(78, 99, 89, 0.22);
  font-size: 12px;
  font-weight: 700;
  color: var(--aem-green-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-boda-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aem-green);
  box-shadow: 0 0 0 3px rgba(78, 99, 89, 0.22);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(78, 99, 89, 0.22); }
  50% { box-shadow: 0 0 0 6px rgba(78, 99, 89, 0.08); }
}

.muted-text { color: var(--muted); }
.sidebar-logout-btn { font-size: 13px; }

/* ─── Topbar mejorado: readiness ring + save indicator ──────────────────── */
.topbar-left { flex: 1; min-width: 0; }
.topbar-right { flex-shrink: 0; }

.topbar-readiness {
  display: flex;
  align-items: center;
}

.topbar-readiness-ring {
  position: relative;
  width: 36px;
  height: 36px;
}

.topbar-readiness-ring svg {
  display: block;
}

.topbar-readiness-ring span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  color: var(--aem-green-deep);
}

/* Indicador pulsante de guardado en el botón */
.save-indicator {
  display: inline-block;
  color: var(--crema);
  font-size: 15px;
  font-weight: 800;
  animation: save-pulse 2s ease-in-out infinite;
}

@keyframes save-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

#topbar-save-btn.saving .save-indicator {
  color: var(--crema);
  animation: none;
}

#topbar-save-btn.saved .save-indicator {
  color: var(--crema);
  animation: none;
}

/* ─── Tab Nav agrupada ───────────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(251, 250, 242, 0.88);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(36, 35, 29, 0.06);
  backdrop-filter: blur(14px);
}

.tab-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tab-group-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tinta-suave);
  padding: 0 2px;
}

.tab-group-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.tab-btn {
  white-space: nowrap;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(36, 35, 29, 0.04);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}

.tab-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(78, 99, 89, 0.45);
  box-shadow: 0 8px 18px rgba(78, 99, 89, 0.12);
}

.tab-btn.active {
  background: linear-gradient(135deg, var(--aem-green-deep), #3d4a32);
  color: var(--paper);
  border-color: rgba(78, 99, 89, 0.7);
  box-shadow: 0 8px 20px rgba(36, 35, 29, 0.2), inset 0 -1px 0 rgba(217, 225, 218, 0.5);
  font-weight: 700;
}

/* ─── Tarjetas de boda mejoradas ─────────────────────────────────────────── */
.wedding-cover-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.wedding-cover-foot h3 {
  margin: 0;
  color: white;
  font-family: "Italiana", Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  /* Un nombre largo ("Roland & Girlie") partía en dos líneas apretadas
     contra la insignia de preparación, y esa segunda línea caía en la
     franja más clara de la foto — se leía mal. Ahora siempre cabe en una
     línea (con puntos suspensivos si hiciera falta) y lleva su propia
     sombra, así no depende solo de que la foto de fondo sea oscura. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 3px 14px rgba(0, 0, 0, 0.4);
}

.wedding-readiness-badge {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.22);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 11px;
  font-weight: 800;
}

/* Estado de la boda con color semantico — el equipo distingue la fase
   comercial/operativa de un vistazo sin leer el texto. */
.pill[class*="status-pill-"] {
  font-weight: 700;
}

.status-pill-lead {
  background: linear-gradient(135deg, rgba(199, 166, 150, 0.34), rgba(199, 166, 150, 0.18));
  border-color: rgba(166, 116, 92, 0.4);
  color: #7a4a35;
}

.status-pill-primera-reunion,
.status-pill-propuesta-enviada {
  background: linear-gradient(135deg, rgba(226, 231, 53, 0.34), rgba(226, 231, 53, 0.16));
  border-color: rgba(226, 231, 53, 0.55);
  color: #4a4626;
}

.status-pill-contratada,
.status-pill-en-preparacion {
  background: linear-gradient(135deg, rgba(78, 99, 89, 0.24), rgba(217, 225, 218, 0.5));
  border-color: rgba(78, 99, 89, 0.42);
  color: var(--aem-green-deep);
}

.status-pill-semana-de-boda {
  background: linear-gradient(135deg, rgba(168, 79, 66, 0.2), rgba(199, 166, 150, 0.22));
  border-color: rgba(168, 79, 66, 0.45);
  color: #8a3d31;
}

.status-pill-finalizada {
  background: var(--crema-oscura);
  border-color: var(--borde-suave);
  color: var(--tinta-suave);
}

.wedding-venue-name {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 8px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Acciones de tarjeta de boda: 2 niveles */
.wedding-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.wedding-card-primary-actions {
  display: flex;
  gap: 6px;
}

.wedding-card-secondary-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}

.wedding-card-btn {
  font-size: 13px;
  min-height: 36px;
  padding: 0 12px;
}

/* Botón solo-icono peligroso (✕ borrar) */
.mini-btn.danger-text,
button.danger-text {
  background: transparent;
  border: 1px solid transparent;
  color: var(--danger);
  font-size: 14px;
  font-weight: 700;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  transition: background 140ms ease, border-color 140ms ease;
}

.mini-btn.danger-text:hover,
button.danger-text:hover {
  background: rgba(168, 79, 66, 0.1);
  border-color: rgba(168, 79, 66, 0.35);
}

/* ─── Tarjetas de mesas mejoradas ───────────────────────────────────────── */
.mesa-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.mesa-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(36, 35, 29, 0.14);
}

.mesa-card.mesa-full {
  border-color: rgba(226, 231, 53, 0.6);
}

.mesa-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.mesa-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mesa-card-title h4 {
  margin: 0;
  font-size: 15px;
}

.mesa-lock-icon {
  font-size: 12px;
  opacity: 0.7;
}

.mesa-capacity-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--crema-oscura);
  overflow: hidden;
}

.mesa-capacity-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--aem-green), #7fa090);
  transition: width 380ms ease;
}

.mesa-capacity-fill.full {
  background: linear-gradient(90deg, var(--mostaza), #c8be1a);
}

.mesa-owner {
  font-size: 12px;
  color: var(--muted);
  margin: 0 !important;
}

/* Nombres de la mesa en dos columnas fijas en vez de píldoras sueltas de
   ancho irregular: la lista se lee en vertical y deja de parecer un mosaico
   desordenado. Los nombres largos se recortan con puntos suspensivos. */
.mesa-names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  margin-top: 2px;
}

.mesa-names .pill-sm {
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  border-left: 2px solid rgba(78, 99, 89, 0.3);
  border-radius: 0;
  padding: 1px 0 1px 8px;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .mesa-names { grid-template-columns: minmax(0, 1fr); }
}

.pill-sm {
  min-height: 22px;
  font-size: 11px;
  padding: 0 8px;
}

.pill-full {
  background: linear-gradient(135deg, rgba(226, 231, 53, 0.4), rgba(226, 231, 53, 0.2));
  border-color: rgba(226, 231, 53, 0.6);
  color: #4a4626;
}

.mesa-empty-names {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.mesa-notes {
  font-size: 12px;
  color: var(--tinta-suave);
  margin: 0 !important;
  padding: 6px 8px;
  border-left: 3px solid rgba(78, 99, 89, 0.3);
  border-radius: 0 6px 6px 0;
  background: rgba(217, 225, 218, 0.3);
}

.mesa-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.mesa-card-actions .btn {
  font-size: 12px;
  min-height: 32px;
  padding: 0 11px;
}

/* Boton de contorno: accion secundaria reversible (bloquear/desbloquear
   mesa) — menos peso visual que .primary pero mas que .mini-btn. */
.btn.btn-outline {
  background: transparent;
  border: 1px solid rgba(78, 99, 89, 0.45);
  color: var(--aem-green-deep);
  box-shadow: none;
}

.btn.btn-outline:hover {
  background: rgba(78, 99, 89, 0.08);
  border-color: var(--aem-green);
  box-shadow: 0 8px 18px rgba(78, 99, 89, 0.14);
}

/* ─── Responsive para tab-nav ────────────────────────────────────────────── */
@media (max-width: 980px) {
  .tab-nav {
    gap: 8px 10px;
    padding: 10px 12px;
  }

  .tab-group-label {
    font-size: 8px;
  }

  .tab-btn {
    font-size: 12px;
    min-height: 30px;
    padding: 0 9px;
  }

  .wedding-card-primary-actions {
    flex-wrap: wrap;
  }

  .topbar-readiness {
    display: none;
  }
}

@media (max-width: 640px) {
  .tab-nav {
    gap: 6px 8px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .tab-group {
    gap: 4px;
  }

  .save-btn-text {
    display: none; /* en movil el boton se reduce al indicador ● */
  }

  .wedding-card-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .mesa-card-actions {
    gap: 4px;
  }
}



/* ═══ PANTALLA DE ACCESO ════════════════════════════════════════════════ */
.login-visual-inner {
  position: relative;
  z-index: 1;
  max-width: 520px;
}

.login-visual-logo {
  width: 132px;
  height: auto;
  margin-bottom: 34px;
  opacity: 0.95;
}

.login-visual h1 {
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.login-visual p {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}

/* Tres pruebas de lo que hace el producto, no adjetivos */
.login-points {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.login-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.login-points span {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
}

.login-visual-credit {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 40px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Panel derecho: una sola columna centrada y contenida */
.login-panel-inner {
  width: min(370px, 100%);
  display: grid;
  gap: 30px;
}

.login-head h2 {
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--aem-green-deep);
}

.login-head p {
  margin: 7px 0 0 !important;
  font-size: 14px;
  color: var(--tinta-suave);
}

.login-card .field { gap: 7px; }

.login-card label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-suave);
}

.login-card input {
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-size: 15px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.login-card input:focus {
  outline: none;
  border-color: var(--aem-green);
  box-shadow: 0 0 0 3px rgba(78, 99, 89, 0.14);
}

/* Campo con botón dentro (mostrar contraseña) */
.input-with-action { position: relative; }
.input-with-action input { width: 100%; padding-right: 48px; }

.input-action {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 15px;
  line-height: 1;
  transition: background 150ms ease;
}

.input-action:hover { background: var(--crema-oscura); }

.caps-warning {
  font-size: 11.5px;
  font-weight: 700;
  color: #7a5c12;
}

.login-error {
  margin: 0 !important;
  padding: 11px 14px;
  border: 1px solid rgba(168, 79, 66, 0.32);
  border-left: 3px solid var(--danger);
  border-radius: 10px;
  background: rgba(168, 79, 66, 0.07);
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  animation: errorIn 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes errorIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.login-submit {
  width: 100%;
  min-height: 50px;
  justify-content: center;
  font-size: 15px;
  margin-top: 2px;
}

.login-submit.is-busy { opacity: 0.7; cursor: progress; }

.login-forgot {
  justify-self: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-suave);
}

.login-forgot:hover { color: var(--aem-green); border-bottom-color: var(--aem-green); }

.login-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
  font-size: 11.5px;
  color: var(--tinta-suave);
}

.login-foot a { color: var(--tinta-suave); text-decoration: underline; }
.login-foot a:hover { color: var(--aem-green); }

@media (max-width: 980px) {
  .login { grid-template-columns: minmax(0, 1fr); }

  .login-visual {
    min-height: 0;
    padding: 40px 28px;
  }

  .login-points { display: none; }
  .login-visual-credit { display: none; }
  .login-visual-logo { width: 100px; margin-bottom: 22px; }
  .login-visual p { margin-top: 12px; font-size: 14px; }
  .login-panel { padding: 32px 24px 48px; }
}


/* ═══ NAVEGACIÓN EN DOS NIVELES ═════════════════════════════════════════
   Seis áreas arriba, y dentro de cada una sus secciones. Menos decisiones
   simultáneas que dieciocho pestañas en fila. */
.area-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(251, 250, 242, 0.9);
  box-shadow: 0 4px 18px rgba(36, 35, 29, 0.05);
  backdrop-filter: blur(14px);
}

.area-btn {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 12px 8px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--tinta-suave);
  font-size: 12.5px;
  font-weight: 700;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.area-btn:hover { background: var(--crema-oscura); color: var(--aem-green-deep); transform: translateY(-1px); }

.area-btn.active {
  background: var(--aem-green);
  color: var(--crema);
  box-shadow: 0 8px 20px rgba(78, 99, 89, 0.26);
}

.area-ico { font-size: 17px; line-height: 1; }
.area-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.area-count {
  position: absolute;
  top: 7px;
  right: 9px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--crema-oscura);
  color: var(--tinta-suave);
  font-size: 9.5px;
  font-weight: 700;
}

.area-btn.active .area-count { background: rgba(255, 255, 255, 0.24); color: var(--crema); }

/* Segundo nivel */
.subtab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borde-suave);
}

.subtab-btn {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-suave);
  font-size: 13px;
  font-weight: 700;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.subtab-btn:hover { background: var(--crema-oscura); color: var(--aem-green-deep); }

.subtab-btn.active {
  background: var(--crema-oscura);
  border-color: rgba(78, 99, 89, 0.34);
  color: var(--aem-green-deep);
}

/* Entrada suave al cambiar de sección */
.vista-nueva .tab-panel,
.vista-nueva.tab-panel { animation: panelIn 240ms cubic-bezier(0.32, 0.72, 0, 1) both; }

@keyframes panelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .area-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .area-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; }
  .area-btn { padding: 10px 6px; font-size: 11.5px; }
}

/* ═══ IMÁGENES CON CARGA DIFERIDA ═══════════════════════════════════════
   Mientras la portada llega se ve la paleta de la pareja, no un hueco. */
.cover-media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--cover-tint, var(--aem-green-soft));
}

.cover-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: shimmer 1.5s ease-in-out infinite;
}

.cover-media:has(img.is-loaded)::after { display: none; }

@keyframes shimmer {
  to { transform: translateX(100%); }
}

.cover-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 420ms ease;
}

.cover-media img.is-loaded { opacity: 1; }
/* Si la foto no llega —sin cobertura en la finca, o el archivo ya no está—
   se queda escondida y debajo sigue el monograma de la pareja. Nunca un hueco. */
.cover-media img.is-failed { display: none; }

/* El monograma vive DEBAJO de la foto y ocupa toda la portada. Es el suelo
   sobre el que se apoya la imagen, no una alternativa que haya que elegir. */
.cover-media .cover-mono {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.cover-media img { position: relative; z-index: 1; }
/* Mientras la foto viaja se ve el monograma, así que sobra el brillo de carga. */
.cover-con-foto::after { display: none; }

/* La miniatura del dashboard y la portada de tarjeta necesitan contexto */
.wed-thumb { position: relative; overflow: hidden; }
.wedding-cover { position: relative; overflow: hidden; }
.wedding-cover > *:not(.cover-media) { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .cover-media::after { animation: none; display: none; }
  .tab-panel { animation: none; }
}


/* ═══ TIPOGRAFÍA: PESO Y JERARQUÍA ══════════════════════════════════════
   algoentremanos.es usa exactamente dos fuentes: Italiana para titulares y
   DM Sans para el resto. Aquí se respeta ese par.
   Italiana solo tiene un peso (400) y en cifras grandes se veía anémica, así
   que los NÚMEROS van en DM Sans 700 con cifras tabulares —para que una
   columna de euros se pueda sumar con la vista y no baile al actualizarse—
   y los TÍTULOS mantienen Italiana con un ajuste de grosor óptico. */
:root {
  --font-display: "Italiana", Georgia, serif;
  --font-numeric: "DM Sans", system-ui, sans-serif;
}

/* Cifras: peso real, no simulado */
.stat-value,
.kpi-value,
.donut-total,
.cocina-total strong,
.picker-total strong,
.summary-strip strong,
.resumen-hero-count strong,
.portal-countdown strong,
.tl-time,
.resumen-next-time,
.metric strong,
.task-stats strong,
.task-badge strong {
  font-family: var(--font-numeric);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Títulos: Italiana con trazo reforzado ópticamente. `paint-order` evita
   que el contorno se coma los remates finos de la tipografía. */
.dash-title,
.login-visual h1,
.login-head h2,
.resumen-hero-main h2,
.brand-closing h3,
.portal-hero h1,
.wedding-cover-foot h3,
.card-title,
.picker-head h3 {
  font-weight: 400;
  -webkit-text-stroke: 0.4px currentColor;
  paint-order: stroke fill;
}

/* Encabezados de sección y etiquetas: de 400 a 500/700 */
.panel h3,
.panel h4,
.row h4,
.section-title h3 { font-weight: 600; }

.stat-label,
.kpi-label,
.filter-field span,
.venue-side-title,
.provider-group-title,
.login-card label,
.resumen-datos dt,
.eyebrow { font-weight: 700; }

.stat-sub,
.card-sub,
.wed-meta,
.dash-row-main small { font-weight: 500; }

/* Cifras tabulares donde se comparan columnas */
.data-table td,
.donut-legend-value,
.donut-legend-pct { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  /* En pantallas de alta densidad el contorno sobra */
  @media (min-resolution: 2dppx) {
    .dash-title,
    .login-visual h1,
    .resumen-hero-main h2,
    .brand-closing h3,
    .portal-hero h1 { -webkit-text-stroke: 0.25px currentColor; }
  }
}


/* ═══ PORTAL: NAVEGACIÓN Y HERO ═════════════════════════════════════════ */
.portal-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
}

.portal-hero-text { min-width: 0; flex: 1 1 300px; }

.portal-hero-logo {
  display: block;
  width: clamp(122px, 15vw, 178px);
  height: auto;
  margin: 0 0 18px;
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.35));
}

/* La cuenta atrás vive dentro del flujo del hero: ya no puede salirse del
   borde ni recortarse en pantallas estrechas. */
.portal-countdown { flex-shrink: 0; }

/* Barra de secciones: pegajosa al bajar, con scroll horizontal en móvil */
.portal-nav {
  position: sticky;
  top: 0;
  z-index: 15;
  border-bottom: 1px solid var(--borde-suave);
  background: rgba(251, 250, 242, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 14px rgba(36, 35, 29, 0.06);
}

.portal-nav-inner {
  display: flex;
  gap: 4px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.portal-nav-inner::-webkit-scrollbar { display: none; }

.portal-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-suave);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.portal-nav-btn:hover { background: var(--crema-oscura); color: var(--aem-green-deep); }

.portal-nav-btn.active {
  background: var(--aem-green);
  border-color: var(--aem-green);
  color: var(--crema);
}

.portal-nav-ico { font-size: 15px; line-height: 1; }

/* Compensar la barra fija al saltar con anclas */
.portal-shell [id^="p-"] { scroll-margin-top: 76px; }

@media (max-width: 640px) {
  .portal-hero-inner { flex-direction: column; align-items: flex-start; }
  .portal-countdown { align-self: flex-start; min-width: 96px; padding: 12px 16px; }
  .portal-countdown strong { font-size: 32px; }
  .portal-nav-inner { padding: 6px 14px; }
  .portal-nav-btn { padding: 0 12px; font-size: 12.5px; }
  .portal-nav-btn span:not(.portal-nav-ico) { display: none; }
  .portal-nav-btn.active span:not(.portal-nav-ico) { display: inline; }
  .portal-nav-ico { font-size: 17px; }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  ACCESIBILIDAD Y TÁCTIL (WCAG 2.1 AA)                                 ║
   ║  La app se usa sobre todo en móvil y tablet, muchas veces de pie en   ║
   ║  un montaje y con prisa. Todo lo que se pulsa tiene que caber bajo    ║
   ║  un pulgar, y todo lo que se navega con teclado tiene que verse.      ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* ── Foco visible, consistente y nunca recortado ────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--aem-green);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Sobre fondos oscuros el verde no contrasta: se usa mostaza */
:where(.portal-hero, .login-visual, .brand-closing, .area-btn.active, .btn.primary, .sidebar)
  :where(a, button, input, select):focus-visible {
  outline-color: var(--mostaza);
}

/* Nunca quitar el foco sin sustituirlo */
:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* ── Áreas táctiles: 44×44 CSS px en dispositivos táctiles ───────────────
   Solo con `pointer: coarse`, para no inflar la interfaz en escritorio,
   donde el ratón es preciso y la densidad es una ventaja. */
@media (pointer: coarse) {
  .btn,
  .mini-btn,
  .tab-btn,
  .subtab-btn,
  .chip-toggle,
  .btn-xs,
  .wedding-card-btn,
  .mesa-card-actions .btn,
  .portal-nav-btn,
  .segmented-btn,
  .audience-control button,
  .today-check,
  .row-menu-btn,
  .input-action,
  .picker-remove,
  .link-btn,
  button.danger-text {
    min-height: 44px;
    min-width: 44px;
  }

  .field select,
  .filter-field select,
  .guest-search,
  .portal-input,
  .portal-staff-switch,
  .picker-note,
  .picker-row-price input,
  .field input,
  .field textarea {
    min-height: 46px;
    font-size: 16px; /* iOS no hace zoom automático a partir de 16px */
  }

  .nav button { min-height: 48px; }
  .area-btn { min-height: 62px; }

  /* Separación entre objetivos contiguos: evita pulsar el de al lado */
  .inline-tools,
  .data-table-actions,
  .mesa-card-actions,
  .venue-side-actions { gap: 10px; }

  /* Las acciones que aparecían solo al pasar el ratón no existen al tacto */
  .tl-card-tools .mini-btn,
  .tl-actions { opacity: 1 !important; }
}

/* ── Salto al contenido, para teclado y lector de pantalla ──────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  background: var(--aem-green);
  color: var(--crema);
  font-weight: 700;
}

.skip-link:focus {
  left: 0;
  top: 0;
}

/* ── Solo para lectores de pantalla ─────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Contraste: subir los tonos que se quedaban cortos ───────────────────
   --tinta-suave sobre crema daba 3.9:1, por debajo del 4.5:1 que exige
   AA para texto normal. Se oscurece un punto sin perder el carácter. */
:root {
  --tinta-suave: #6b7a70;
  --muted: #5f6e64;
}

/* Texto pequeño con más contraste todavía */
.card-sub,
.stat-sub,
.wed-meta,
.today-when,
.tl-note,
.venue-hint,
.legal-note { color: #5c6b61; }

/* ── Modo de alto contraste del sistema ─────────────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --line: #b9b7a6;
    --borde-suave: #a8a695;
    --tinta-suave: #4a5850;
    --muted: #414f47;
  }

  .btn,
  .mini-btn,
  .panel,
  .card { border-width: 2px; }
}

/* ── Objetivos táctiles en tablas densas ────────────────────────────────── */
@media (pointer: coarse) {
  .data-table td { padding: 12px; }
  .data-table-actions .mini-btn { padding: 0 12px; }
}


/* ═══ RINCONES: GALERÍA Y PROPUESTAS A MEDIDA ═══════════════════════════ */
.rincon-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.rincon-shot {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--crema-oscura);
  aspect-ratio: 1;
}

.rincon-shot-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; }
.rincon-shot-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Una propuesta a medida se distingue del catálogo de un vistazo */
.rincon-shot.propuesta { box-shadow: inset 0 0 0 2px var(--mostaza); }
.rincon-shot.propuesta.aprobada { box-shadow: inset 0 0 0 2px var(--aem-green); }

.rincon-shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 5px;
  background: rgba(36, 35, 29, 0.76);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}

.rincon-shot-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(36, 35, 29, 0.62);
  color: #fff;
  font-size: 11px;
  opacity: 0;
  transition: opacity 160ms ease;
}

.rincon-shot:hover .rincon-shot-del,
.rincon-shot:focus-within .rincon-shot-del { opacity: 1; }

.rincon-shot-add {
  display: grid;
  place-content: center;
  gap: 2px;
  aspect-ratio: 1;
  border: 1px dashed rgba(78, 99, 89, 0.4);
  border-radius: 10px;
  background: transparent;
  color: var(--aem-green);
  transition: background 160ms ease, border-color 160ms ease;
}

.rincon-shot-add span { font-size: 19px; line-height: 1; }
.rincon-shot-add small { font-size: 9.5px; font-weight: 700; }
.rincon-shot-add:hover { background: rgba(78, 99, 89, 0.08); border-color: var(--aem-green); }

.rincon-shot-add.propuesta {
  border-color: rgba(226, 231, 53, 0.7);
  color: #4a4626;
}

.rincon-shot-add.propuesta:hover { background: rgba(226, 231, 53, 0.16); }

/* ── Portal: miniaturas y propuestas ────────────────────────────────────── */
.portal-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 8px 0;
}

.portal-thumbs button {
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--crema-oscura);
}

.portal-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.portal-proposals {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(226, 231, 53, 0.6);
  border-radius: 12px;
  background: rgba(226, 231, 53, 0.1);
}

.portal-proposals-title {
  display: block;
  margin-bottom: 9px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4a4626;
}

.portal-proposal {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.portal-proposal + .portal-proposal { margin-top: 12px; }

.portal-proposal-img {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--crema-oscura);
}

.portal-proposal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portal-proposal-body { flex: 1; min-width: 0; display: grid; gap: 8px; }
.portal-proposal-body p { margin: 0 !important; font-size: 12.5px; color: var(--ink); }


/* ═══ PORTAL EN PESTAÑAS ════════════════════════════════════════════════ */
.portal-content { display: grid; gap: 18px; min-width: 0; }
.portal-content > * { margin: 0 !important; }
.portal-content > *,
.portal-content .table-scroll {
  min-width: 0;
  max-width: 100%;
}

/* Plano gráfico para los novios: solo lectura, a todo el ancho */
.portal-plano {
  padding: 10px;
  border: 1px solid var(--borde-suave);
  border-radius: 16px;
  background: #faf9f2;
  overflow-x: auto;
}

.portal-plano svg { width: 100%; min-width: 480px; height: auto; display: block; }

.portal-plano-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--tinta-suave);
}

.portal-plano-legend span { display: inline-flex; align-items: center; gap: 6px; }
.portal-plano-legend i { width: 10px; height: 10px; border-radius: 50%; display: block; }

/* ── Ayuda contextual, con la voz del equipo ────────────────────────────── */
.portal-help {
  border: 1px solid var(--borde-suave);
  border-radius: 14px;
  background: rgba(251, 250, 242, 0.8);
  overflow: hidden;
  transition: border-color 200ms ease, background 200ms ease;
}

.portal-help.open {
  border-color: rgba(78, 99, 89, 0.35);
  background: rgba(217, 225, 218, 0.34);
}

.portal-help-toggle {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--aem-green-deep);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
}

.portal-help-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--aem-green);
  color: var(--crema);
  font-size: 13px;
  font-weight: 700;
}

.portal-help-chevron { margin-left: auto; color: var(--tinta-suave); font-size: 12px; }

.portal-help-body {
  padding: 4px 16px 18px 51px;
  animation: helpIn 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes helpIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.portal-help-body p {
  margin: 0 0 10px !important;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 68ch;
}

.portal-help-sign {
  margin: 0 !important;
  font-family: "Italiana", Georgia, serif;
  font-size: 14.5px;
  color: var(--aem-green) !important;
}

@media (max-width: 640px) {
  .portal-help-body { padding-left: 16px; }
  .portal-plano svg { min-width: 380px; }
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  RITMO VERTICAL                                                       ║
   ║  Un título pegado a su párrafo se lee como un bloque compacto y       ║
   ║  cuesta separar dónde acaba uno y empieza otro. Se fija una regla     ║
   ║  general: todo título deja aire antes del texto que lo sigue.         ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */
:where(h1, h2, h3, h4, h5) + :where(p, ul, ol, dl, .list, .grid, table, .card-sub) {
  margin-top: 10px;
}

.card-title + p,
.card-title + .card-sub,
.panel h3 + p,
.panel h4 + p,
.section-title + p { margin-top: 10px !important; }

/* El texto de apoyo bajo un título necesita más aire que entre párrafos */
.card-sub { margin-bottom: 14px !important; line-height: 1.6; }

.panel-head { margin-bottom: 16px; }
.panel-head + p,
.panel-head + .card-sub { margin-top: -6px !important; margin-bottom: 14px !important; }

/* Párrafos seguidos: interlineado cómodo y separación clara */
.panel p + p { margin-top: 10px; }
.panel p { line-height: 1.65; }

/* Listas y tablas nunca pegadas al encabezado que las presenta */
.card-sub + .list,
.card-sub + .table-scroll,
.card-sub + .grid,
.card-sub + .rincon-grid,
.card-sub + .portal-plano { margin-top: 4px; }

/* Bloques dentro de un panel: aire entre secciones internas */
.panel > section + section,
.panel > div + section { margin-top: 20px; }


/* ═══ PLANO: ZOOM, LIENZO AMPLIABLE Y PANTALLA COMPLETA ═════════════════ */
.venue-tools { gap: 8px; flex-wrap: wrap; }

.venue-zoom {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}

.venue-zoom button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--aem-green-deep);
  font-size: 15px;
  font-weight: 700;
  transition: background 150ms ease;
}

.venue-zoom button:hover { background: var(--crema-oscura); }

.venue-zoom-value {
  min-width: 42px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* El escenario reserva el tamaño ya escalado; el lienzo se transforma dentro.
   Sin este contenedor, `transform: scale` no cambia el área de scroll y las
   mesas de la derecha quedaban inalcanzables al alejar. */
.venue-stage { position: relative; }

.venue-canvas { position: absolute; top: 0; left: 0; }

.venue-scroll { max-height: min(72vh, 760px); }

/* Pantalla completa: nativa o simulada, el resultado es el mismo */
.venue-panel:fullscreen,
.venue-panel.venue-fake-full {
  position: fixed;
  inset: 0;
  z-index: 60;
  margin: 0;
  border-radius: 0;
  padding: 22px 26px;
  background: var(--ivory);
  overflow: auto;
}

.venue-panel:fullscreen .venue-scroll,
.venue-panel.venue-fake-full .venue-scroll { max-height: calc(100vh - 190px); }

@media (max-width: 640px) {
  .venue-tools { width: 100%; justify-content: space-between; }
  .venue-scroll { max-height: 62vh; }
}


/* ═══ ASISTENTE AEM ═════════════════════════════════════════════════════ */
.onboarding-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(31, 37, 33, 0.55);
  backdrop-filter: blur(7px);
}

.onboarding-card {
  width: min(100%, 480px);
  padding: 30px;
  border: 1px solid rgba(216, 210, 189, 0.9);
  border-top: 5px solid var(--aem-green);
  border-radius: 14px;
  background: rgba(251, 250, 242, 0.99);
  box-shadow: 0 30px 90px rgba(28, 33, 29, 0.34);
}

.onboarding-card > img {
  display: block;
  width: 150px;
  height: auto;
  margin-bottom: 24px;
}

.onboarding-card h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Italiana", Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0;
}

.onboarding-card p {
  margin: 14px 0 0;
  color: var(--tinta-suave);
  font-size: 15px;
  line-height: 1.7;
}

.onboarding-progress {
  display: flex;
  gap: 7px;
  margin-top: 24px;
}

.onboarding-progress i {
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: var(--borde-suave);
}

.onboarding-progress i.active {
  width: 42px;
  background: var(--aem-green);
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
}

.asst { position: fixed; right: 22px; bottom: 22px; z-index: 45; display: grid; justify-items: end; gap: 12px; }

/* Botón flotante con los anillos de la marca */
.asst-fab {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--aem-green) 0%, var(--aem-green-deep) 100%);
  color: var(--crema);
  box-shadow: 0 12px 30px rgba(78, 99, 89, 0.36);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
}

.asst-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 18px 40px rgba(78, 99, 89, 0.44); }
.asst-fab:active { transform: scale(0.96); }
.asst-rings { width: 30px; height: auto; }
.asst-fab-x { font-size: 20px; font-weight: 700; }

/* Los anillos respiran despacio para invitar a pulsarlos, sin distraer */
.asst:not(.open) .asst-fab .asst-rings { animation: ringsBreathe 4.5s ease-in-out infinite; }

@keyframes ringsBreathe {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50%      { transform: scale(1.08); opacity: 1; }
}

.asst-panel {
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 130px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borde-suave);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 26px 70px rgba(36, 35, 29, 0.24);
  overflow: hidden;
  animation: asstIn 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes asstIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.asst-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(140deg, var(--aem-green) 0%, var(--aem-green-deep) 100%);
  color: var(--crema);
}

.asst-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.asst-avatar .asst-rings { width: 24px; }
.asst-head strong { display: block; font-size: 14.5px; }
.asst-head small { font-size: 11.5px; opacity: 0.82; }

.asst-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--crema);
  font-size: 13px;
}

.asst-close:hover { background: rgba(255, 255, 255, 0.26); }

.asst-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; }

.asst-intro { margin: 0 0 14px !important; font-size: 13.5px; color: var(--tinta-suave); line-height: 1.6; }

.asst-chips { display: grid; gap: 7px; }

.asst-chip {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--crema-oscura);
  color: var(--aem-green-deep);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.asst-chip:hover { transform: translateX(3px); border-color: var(--aem-green); background: rgba(78, 99, 89, 0.1); }

.asst-card { animation: asstCardIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.asst-card + .asst-card { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--borde-suave); }

@keyframes asstCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.asst-card h4 {
  margin: 0 0 12px;
  font-family: "Italiana", Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--aem-green-deep);
}

.asst-card ol { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.asst-card li { font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.asst-card li::marker { color: var(--aem-green); font-weight: 700; }
.asst-card b { font-weight: 700; color: var(--aem-green-deep); }

.asst-empty { text-align: center; padding: 22px 8px; }
.asst-empty p { margin: 0 0 8px !important; font-size: 13.5px; color: var(--tinta-suave); line-height: 1.6; }

.asst-search { position: relative; padding: 12px 14px; border-top: 1px solid var(--borde-suave); background: var(--crema-oscura); }

.asst-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 40px 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 14px;
}

.asst-search input:focus { outline: none; border-color: var(--aem-green); box-shadow: 0 0 0 3px rgba(78, 99, 89, 0.14); }

.asst-clear {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--crema-oscura);
  color: var(--tinta-suave);
  font-size: 12px;
}

@media (max-width: 640px) {
  .asst { right: 14px; bottom: 84px; }
  .asst-fab { width: 54px; height: 54px; }
  .asst-panel { max-height: calc(100vh - 190px); }
}

/* ═══ CONTRATO ══════════════════════════════════════════════════════════ */
/* Antes "Datos", "PDF" y "Regenerar" iban en fila, del mismo peso visual, y
   no se distinguía qué preparaba el contrato de qué se hacía con él ya
   generado. Ahora se agrupan: a la izquierda los pasos de preparación
   (Datos → Generar/Regenerar → Anexo), a la derecha, como acción principal,
   "Descargar PDF" — es lo que se pulsa una vez el documento ya existe. */
.contract-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.contract-actions-setup {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.contract-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.contract-steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-suave);
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}

.contract-steps li.done { border-color: var(--aem-green); background: rgba(78, 99, 89, 0.1); color: var(--aem-green-deep); }

.contract-step-n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--crema-oscura);
  font-size: 11.5px;
  font-weight: 700;
}

.contract-steps li.done .contract-step-n { background: var(--aem-green); color: var(--crema); }

.contract-alert {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(226, 231, 53, 0.6);
  border-left: 4px solid var(--mostaza);
  border-radius: 12px;
  background: rgba(226, 231, 53, 0.12);
}

.contract-alert strong { display: block; margin-bottom: 6px; color: #4a4626; font-size: 14px; }
.contract-alert p { margin: 0 0 12px !important; font-size: 13px; color: var(--ink); }

.contract-signed-note {
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(78, 99, 89, 0.34);
  border-radius: 14px;
  background: rgba(217, 225, 218, 0.4);
}

.contract-signed-note strong { display: block; margin-bottom: 6px; color: var(--aem-green-deep); font-size: 15px; }
.contract-signed-note p { margin: 0 !important; font-size: 13px; color: var(--muted); }

.contract-history { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borde-suave); }
.contract-history summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--tinta-suave); }
.contract-history ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 7px; }
.contract-history li { font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* Documento del contrato en pantalla */
.contrato {
  padding: 30px;
  border: 1px solid var(--borde-suave);
  border-radius: 14px;
  background: #fff;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink);
}

.c-cab { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 2px solid var(--aem-green); }
.c-logo { width: 120px; height: auto; }
.c-cab-meta { text-align: right; }
.c-cab-meta span { display: block; font-size: 11.5px; color: var(--tinta-suave); letter-spacing: 0.06em; text-transform: uppercase; }
.c-cab-meta strong { display: block; margin-top: 4px; font-family: "Italiana", Georgia, serif; font-size: 16px; color: var(--aem-green-deep); }

.c-tit {
  margin: 28px 0 14px;
  font-family: "Italiana", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--aem-green-deep);
  letter-spacing: 0.02em;
}

.c-partes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.c-partes h3 { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); }
.c-partes p { margin: 0 0 12px; }

.c-cl { margin-top: 26px; }
.c-cl h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--aem-green-deep); text-transform: uppercase; letter-spacing: 0.05em; }
.c-cl h3 span { padding: 3px 10px; border-radius: 999px; background: var(--aem-green); color: var(--crema); font-size: 10.5px; letter-spacing: 0.08em; }
.c-cl h4 { margin: 16px 0 8px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-suave); }
.c-cl p { margin: 0 0 11px; }
.c-cl ul { margin: 0 0 11px; padding-left: 20px; display: grid; gap: 6px; }

.c-servicios ul { margin: 0 0 8px; padding-left: 20px; }
.c-servicios li { margin-bottom: 5px; }

/* Un hueco sin rellenar se ve: es lo que impide firmar un contrato a medias */
.c-hueco { padding: 1px 7px; border-radius: 4px; background: rgba(226, 231, 53, 0.4); color: #4a4626; font-style: normal; font-weight: 700; font-size: 12.5px; }

.c-anexo { margin-top: 34px; padding-top: 24px; border-top: 2px dashed var(--borde-suave); }
.c-tabla { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12.5px; }
.c-tabla th { padding: 9px 11px; background: var(--aem-green); color: var(--crema); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.c-tabla td { padding: 9px 11px; border-bottom: 1px solid var(--line); }
.c-tabla-total td { font-weight: 700; background: var(--crema-oscura); }

.c-firma { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--borde-suave); }
.c-firma h3 { margin: 0 0 10px; font-family: "Italiana", Georgia, serif; font-size: 19px; font-weight: 400; color: var(--aem-green-deep); }
.c-firmas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-top: 24px; }
.c-firma-box { text-align: center; }

.c-firma-linea {
  display: grid;
  place-items: center;
  height: 72px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}

.c-firma-linea img { max-height: 66px; max-width: 100%; }
.c-firma-sello { max-height: 40px !important; opacity: 0.9; }
.c-firma-box strong { display: block; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aem-green-deep); }
.c-firma-box small { display: block; margin-top: 4px; font-size: 11px; color: var(--tinta-suave); }

.c-pie { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 34px; padding-top: 18px; border-top: 2px solid var(--aem-green); }
.c-pie div { display: grid; gap: 2px; }
.c-pie span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); }
.c-pie strong { font-size: 12.5px; color: var(--aem-green-deep); }

/* Anexo: selección de servicios */
.annex-list { display: grid; gap: 8px; margin: 14px 0; }

.annex-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.annex-item:hover { border-color: rgba(78, 99, 89, 0.4); }
.annex-item.checked { border-color: var(--aem-green); background: rgba(78, 99, 89, 0.08); }
.annex-item input { position: absolute; opacity: 0; pointer-events: none; }

.annex-item .check-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1.6px solid rgba(78, 99, 89, 0.45);
  border-radius: 6px;
  color: transparent;
  font-size: 12px;
  font-weight: 700;
  transition: background 160ms ease, color 160ms ease;
}

.annex-item.checked .check-mark { background: var(--aem-green); border-color: var(--aem-green); color: #fff; }
.annex-body { flex: 1; display: grid; gap: 2px; min-width: 0; }
.annex-body strong { font-size: 13.5px; }
.annex-body small { font-size: 11.5px; color: var(--tinta-suave); }
.annex-price { flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.annex-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--borde-suave); }
.annex-total span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); }
.annex-total strong { font-family: "DM Sans", system-ui, sans-serif; font-size: 26px; font-weight: 700; color: var(--aem-green-deep); }

@media (max-width: 640px) {
  .contrato { padding: 20px 18px; }
  .c-cab { flex-direction: column; align-items: flex-start; gap: 12px; }
  .c-cab-meta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .asst:not(.open) .asst-fab .asst-rings,
  .asst-panel,
  .asst-card { animation: none !important; }
}


/* ═══ AJUSTES DE LA AUDITORÍA FINAL ═════════════════════════════════════ */
/* Los dos formatos de dossier, con la misma jerarquía visual */
.export-formats { justify-content: flex-start; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.export-formats .btn { flex: 1 1 auto; justify-content: center; min-height: 46px; }

/* Panel de recordatorios: el borde llama la atención sin gritar */
.reminders-panel { border-left: 3px solid var(--clay); }

/* Fila de proveedor: alinear el logo con el texto */
.provider-row { align-items: center; }

/* Panel legal y de invitados: respiración interna coherente */
.legal-panel,
.guests-panel,
.portal-contract { padding: 22px; }

/* Guía: pasos numerados con aire */
.guide-steps .guide-step + .guide-step { margin-top: 14px; }

/* Micro-interacción general: nada se mueve de golpe */
.panel { transition: box-shadow 240ms ease; }

/* ── Animaciones de entrada ────────────────────────────────────────────────
   Solo cuando de verdad se entra en algo nuevo.
   La app repinta el #app entero en cada clic, así que si estas reglas colgaran
   de los elementos se dispararían siempre: marcar una tarea hacía que TODA la
   página volviera a entrar desde abajo y las barras de progreso crecieran otra
   vez desde cero. Eso es lo que se veía como un temblor.
   render() añade .vista-nueva al contenedor solo cuando cambia la vista, la
   boda o la pestaña; todo lo demás repinta en silencio.

   Y son deliberadamente cortas y sin desplazamiento lateral: en una interfaz
   que se usa con prisa, el movimiento tiene que confirmar que algo cambió,
   no hacerse notar. Manda la opacidad; el desplazamiento es de 4px, apenas
   perceptible pero suficiente para que la entrada no sea un corte seco. */
.vista-nueva > .panel,
.vista-nueva > .dash-grid-2 > *,
.vista-nueva > .stat-row,
.vista-nueva > .tab-panel { animation: sectionIn 300ms cubic-bezier(0.32, 0.72, 0, 1) both; }

.vista-nueva > *:nth-child(1) { animation-delay: 0ms; }
.vista-nueva > *:nth-child(2) { animation-delay: 40ms; }
.vista-nueva > *:nth-child(3) { animation-delay: 80ms; }
.vista-nueva > *:nth-child(4) { animation-delay: 110ms; }
.vista-nueva > *:nth-child(n + 5) { animation-delay: 130ms; }

@keyframes sectionIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Las filas entran solo con opacidad. El deslizamiento lateral en una lista
   larga se lee como si la tabla se descuadrara. */
.vista-nueva .list > .row { animation: rowIn 240ms ease-out both; }
.vista-nueva .list > .row:nth-child(1) { animation-delay: 0ms; }
.vista-nueva .list > .row:nth-child(2) { animation-delay: 25ms; }
.vista-nueva .list > .row:nth-child(3) { animation-delay: 50ms; }
.vista-nueva .list > .row:nth-child(4) { animation-delay: 70ms; }
.vista-nueva .list > .row:nth-child(n + 5) { animation-delay: 85ms; }

@keyframes rowIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Al confirmar algo, un halo breve en el propio botón: es la única animación
   que sí debe dispararse en cada uso, porque responde a un gesto concreto. */
.btn.sage.done { animation: pulseOk 460ms ease-out; }

@keyframes pulseOk {
  0%   { box-shadow: 0 0 0 0 rgba(78, 99, 89, 0.35); }
  100% { box-shadow: 0 0 0 12px rgba(78, 99, 89, 0); }
}

/* Los KPI aparecen, no rebotan. Sin scale: una cifra que se estira y encoge
   cada vez que se toca algo cansa a los cinco minutos. */
.vista-nueva .stat-value { animation: valueIn 360ms cubic-bezier(0.32, 0.72, 0, 1) both; }

@keyframes valueIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Las barras crecen una vez al entrar. Después, cuando el valor cambia de
   verdad, la transición de width hace el trabajo — que es lo correcto: la
   barra se mueve de donde estaba a donde va, no desde cero. */
.stat-bar-fill,
.mesa-capacity-fill,
.progress div,
.progress span { transition: width 420ms cubic-bezier(0.32, 0.72, 0, 1); }

.vista-nueva .stat-bar-fill,
.vista-nueva .mesa-capacity-fill,
.vista-nueva .progress div,
.vista-nueva .progress span { animation: barGrow 560ms cubic-bezier(0.32, 0.72, 0, 1) both; transform-origin: left center; }

@keyframes barGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .vista-nueva,
  .vista-nueva *,
  .btn.sage.done { animation: none !important; }
  .stat-bar-fill,
  .mesa-capacity-fill,
  .progress div,
  .progress span { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Intercambio del contrato firmado — todo dentro del portal
   Los novios suben el documento aquí y Carolina lo descarga del mismo sitio.
   -------------------------------------------------------------------------- */
.contract-exchange {
  margin-top: 22px;
  padding: 18px 20px 20px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--crema-suave, #faf8f4);
}
.contract-uploads-title {
  font-family: "Italiana", serif;
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--verde);
  margin: 0;
}
.contract-uploads { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.contract-upload {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 12px;
  animation: uploadIn 0.32s ease both;
}
.contract-upload-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(78, 99, 89, 0.1);
  color: var(--verde);
  font-size: 17px;
}
.contract-upload-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contract-upload-body strong { font-size: 14px; overflow-wrap: anywhere; }
.contract-upload-body small { font-size: 12px; color: var(--texto-suave); }
.contract-upload-note { font-style: italic; }
@keyframes uploadIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .contract-upload { animation: none; } }

/* --------------------------------------------------------------------------
   Presupuesto A/B
   -------------------------------------------------------------------------- */
.budget-table .num { text-align: right; white-space: nowrap; }
.budget-table tfoot td { border-top: 2px solid var(--verde); padding-top: 10px; font-size: 15px; }
.budget-table tr.row-alert { background: rgba(200, 90, 70, 0.06); }
.budget-table tr.row-alert td:first-child { box-shadow: inset 3px 0 0 #c85a46; }
.budget-soon {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(226, 231, 53, 0.55);
  background: rgba(226, 231, 53, 0.12);
}
.budget-soon strong { display: block; font-size: 14px; }
.budget-soon p { margin-top: 6px; font-size: 13px; color: var(--texto-suave); }
.chart-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  font-size: 13px;
  color: var(--texto-suave);
}
.chart-foot strong { color: var(--verde); }

/* --------------------------------------------------------------------------
   Rejilla de KPIs y tablas anchas
   `.stat-grid` y `.table-wrap` se usaban en el módulo de presupuesto sin tener
   estilo: los KPIs caían apilados y la tabla de 9 columnas desbordaba el panel
   en tablet y móvil, que es justo donde Carolina la abre.
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.table-wrap {
  margin-top: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--linea);
  /* Sombra que aparece solo cuando queda tabla por ver a la derecha: avisa de
     que hay más columnas sin añadir una barra visible permanente. */
  background:
    linear-gradient(90deg, var(--blanco, #fff) 30%, rgba(255, 255, 255, 0)) left / 40px 100% no-repeat,
    linear-gradient(270deg, var(--blanco, #fff) 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(37, 37, 31, 0.14), transparent) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(37, 37, 31, 0.14), transparent) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.table-wrap > table { margin: 0; min-width: 720px; }
.table-wrap:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.signature-unsupported::after {
  content: "Tu navegador no permite firmar en pantalla. Puedes descargar el PDF, firmarlo y subirlo aquí.";
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--texto-suave);
}


/* --------------------------------------------------------------------------
   Cifras dentro de tablas y listas
   Aquí el trabajo es otro: no es lucirse, es que una columna de euros se pueda
   sumar con la vista. Eso pide palo seco, cifras del mismo ancho y alineación
   a la derecha. DM Sans ya está cargada.
   -------------------------------------------------------------------------- */
.data-table .num,
.budget-table .num,
.budget-table tfoot td,
.contract-upload-body small {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.budget-table .num { font-size: 13.5px; letter-spacing: -0.005em; }
.budget-table td .num strong,
.budget-table tfoot td strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   RGPD: aviso de tratamiento y alerta de consentimiento
   -------------------------------------------------------------------------- */
.rgpd-aviso {
  position: sticky;
  bottom: 0;
  z-index: 60;
  margin: 24px auto 0;
  max-width: 720px;
  padding: 0 16px 16px;
  animation: rgpdSube 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.rgpd-aviso-body {
  background: var(--verde);
  color: #f4f1e8;
  border-radius: 16px;
  padding: 20px 22px 18px;
  box-shadow: 0 12px 32px rgba(37, 37, 31, 0.22);
}
.rgpd-aviso-body h2 {
  font-family: "Italiana", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  margin: 0;
  color: #f4f1e8;
}
.rgpd-aviso-body p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: #e7e3d6; }
.rgpd-aviso-body p strong { color: #fff; }
.rgpd-aviso-sub { font-size: 13px !important; color: #cfd3c4 !important; }
.rgpd-aviso-body .actions { margin-top: 16px; }
.rgpd-aviso-body .btn.primary { background: var(--mostaza); color: #25251f; border-color: var(--mostaza); }
.rgpd-aviso-body .btn.btn-outline { color: #f4f1e8; border-color: rgba(244, 241, 232, 0.5); background: transparent; }
@keyframes rgpdSube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rgpd-aviso { animation: none; } }

.rgpd-alerta {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(200, 90, 70, 0.35);
  background: rgba(200, 90, 70, 0.07);
}
.rgpd-alerta-ico { flex: 0 0 auto; font-size: 17px; color: #a8402c; line-height: 1.4; }
.rgpd-alerta strong { font-size: 14px; }
.rgpd-alerta p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--texto-suave); }
.rgpd-alerta-bloqueo { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid rgba(200, 90, 70, 0.2); }
.rgpd-derechos { margin-top: 20px; }
.rgpd-derechos p { font-size: 14px; line-height: 1.65; margin-top: 10px; }

/* --------------------------------------------------------------------------
   Estado de conexión
   Solo se pinta cuando hay algo que decir. En una finca sin cobertura, lo que
   tranquiliza no es un icono verde: es saber que lo apuntado no se pierde.
   -------------------------------------------------------------------------- */
.conexion {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 13px 7px 26px;
  position: relative;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.35;
  border: 1px solid transparent;
}
.conexion-punto {
  position: absolute;
  left: 11px;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.conexion-txt { font-weight: 600; }
.conexion-sub { font-size: 11px; opacity: 0.8; }

.conexion-off {
  background: rgba(168, 64, 44, 0.09);
  border-color: rgba(168, 64, 44, 0.3);
  color: #8a331f;
}
.conexion-off .conexion-punto { background: #a8402c; }

.conexion-pend {
  background: rgba(226, 231, 53, 0.16);
  border-color: rgba(160, 150, 20, 0.4);
  color: #6b6410;
}
.conexion-pend .conexion-punto {
  background: #a09614;
  animation: latido 1.8s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
@media (prefers-reduced-motion: reduce) {
  .conexion-pend .conexion-punto { animation: none; }
}
@media (max-width: 767px) {
  .conexion-sub { display: none; }
  .conexion { padding: 6px 10px 6px 24px; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Aviso con deshacer
   La barra inferior consume el tiempo disponible: sin ella nadie sabe si tiene
   un segundo o diez para arrepentirse.
   -------------------------------------------------------------------------- */
.toast-undo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 8px;
  overflow: hidden;
}
.toast-undo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--mostaza);
  transform-origin: left;
  animation: undoCuenta var(--undo-dur, 9000ms) linear forwards;
}
.toast-undo-btn {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(244, 241, 232, 0.45);
  color: inherit;
  font: inherit;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.toast-undo-btn:hover { background: rgba(244, 241, 232, 0.16); border-color: rgba(244, 241, 232, 0.75); }
.toast-undo-btn:focus-visible { outline: 2px solid var(--mostaza); outline-offset: 2px; }
@media (pointer: coarse) { .toast-undo-btn { min-height: 44px; } }
@keyframes undoCuenta { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .toast-undo::after { animation: none; opacity: 0.4; } }

/* Campo informativo dentro de un formulario: explica una consecuencia, no pide
   nada. Se distingue del resto para que no se confunda con un input. */
.field-nota p {
  margin-top: 6px;
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(78, 99, 89, 0.07);
  border-left: 3px solid var(--verde);
  border-radius: 0 10px 10px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   Alta de boda en pantalla propia
   -------------------------------------------------------------------------- */
.volver-nav { margin-bottom: 14px; }
.volver-nav .link-btn { font-size: 14px; }

/* El botón se señala unos segundos al volver del alta: es una pista de
   "puedes crear otra", no un estado permanente. */
.btn.primary.destacado {
  animation: latidoBoton 1.5s ease-in-out 3;
  box-shadow: 0 0 0 0 rgba(226, 231, 53, 0.85);
}
@keyframes latidoBoton {
  0%   { box-shadow: 0 0 0 0 rgba(226, 231, 53, 0.85); }
  70%  { box-shadow: 0 0 0 14px rgba(226, 231, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 231, 53, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.primary.destacado { animation: none; outline: 2px solid var(--mostaza); outline-offset: 3px; }
}

/* El mensaje de confirmación puede traer saltos de línea (por ejemplo la
   contraseña del portal en su propia línea). */
.modal-message { white-space: pre-line; line-height: 1.65; }

/* --------------------------------------------------------------------------
   Ficha de equipo: contacto directo
   El día de la boda hace falta poder llamar o escribir en dos toques, sin
   salir a buscar el número en la agenda del móvil.
   -------------------------------------------------------------------------- */
.team-phone {
  margin-top: 4px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--verde);
  font-weight: 500;
}
.team-phone-vacio { color: var(--texto-suave); font-weight: 400; font-style: italic; }
.team-contacto { display: flex; gap: 8px; margin-top: 14px; }
.team-contacto .btn { flex: 1; justify-content: center; text-decoration: none; }
.btn-wa {
  background: #25d366;
  border-color: #1eb955;
  color: #08331a;
  font-weight: 600;
}
.btn-wa:hover { background: #1fbe5c; border-color: #17994a; color: #06280f; }
.wa-ico { font-size: 15px; }
@media (pointer: coarse) { .team-contacto .btn { min-height: 44px; } }

/* --------------------------------------------------------------------------
   Tareas de rincón con detalle y foto
   El detalle se lee entero, sin desplegar: "comprar chuches" no le sirve a
   quien va al súper; "4 kg surtido sin gelatina de cerdo, en Casa Perris" sí.
   -------------------------------------------------------------------------- */
.rincon-task-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--linea);
}
.rincon-task-row:first-of-type { border-top: 0; }
.rincon-task-row.hecha .rt-titulo { text-decoration: line-through; color: var(--texto-suave); }
.rincon-task-row.hecha { opacity: 0.7; }

.rt-foto {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 9px;
  overflow: hidden;
  background: none;
  cursor: zoom-in;
}
.rt-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rt-foto:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.rt-cuerpo { flex: 1 1 auto; min-width: 0; }
.rt-titulo { font-size: 14px; font-weight: 600; display: block; }
.rt-detalle {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--texto-suave);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.rt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--texto-suave);
}
.rt-chip {
  background: rgba(78, 99, 89, 0.1);
  color: var(--verde);
  padding: 1px 8px;
  border-radius: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rt-tarde { color: #a8402c; font-weight: 600; }
.rt-acciones { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }

@media (max-width: 767px) {
  .rincon-task-row { flex-wrap: wrap; }
  .rt-acciones { flex: 1 1 100%; justify-content: flex-start; margin-top: 8px; }
}
@media (pointer: coarse) {
  .rt-acciones .mini-btn { min-height: 44px; min-width: 40px; }
}

/* Ficha del asistente: resumen, aviso y atajo a la pantalla que resuelve. */
.asst-resumen { font-size: 13px; color: var(--texto-suave); margin-top: 4px; line-height: 1.55; }
.asst-nota {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(226, 231, 53, 0.14);
  border-left: 3px solid var(--mostaza);
  border-radius: 0 9px 9px 0;
  font-size: 12.5px;
  line-height: 1.55;
}
.asst-ir {
  margin-top: 12px;
  background: var(--verde);
  color: #f4f1e8;
  border: 0;
  border-radius: 9px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.asst-ir:hover { background: var(--verde-oscuro, #3d4f47); }
.asst-ir:focus-visible { outline: 2px solid var(--mostaza); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Guía AEM: manual navegable y buscable
   -------------------------------------------------------------------------- */
.guide-buscador { display: flex; gap: 10px; align-items: center; margin: 20px 0 6px; }
.guide-buscador input {
  flex: 1;
  padding: 13px 16px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 15px;
}
.guide-buscador input:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
.guide-resultado { margin: 14px 0 4px; font-size: 14px; color: var(--texto-suave); }

.guide-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 6px;
}
.guide-area {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--linea);
  border-radius: 22px;
  background: #fff;
  font: inherit;
  font-size: 13.5px;
  color: var(--texto);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.guide-area:hover { border-color: var(--verde); }
.guide-area.activa { background: var(--verde); border-color: var(--verde); color: #f4f1e8; font-weight: 600; }
.guide-area-ico { font-size: 14px; opacity: 0.85; }
.guide-area-titulo {
  font-family: "Italiana", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  margin: 22px 0 0;
  color: var(--verde);
}

.guide-fichas { display: grid; gap: 16px; margin-top: 14px; }
.guide-ficha h4 { font-size: 17px; margin: 0; }
.guide-ficha-resumen { margin-top: 6px; color: var(--texto-suave); font-size: 14px; line-height: 1.6; }
.guide-ficha-pasos { margin-top: 14px; padding-left: 20px; display: grid; gap: 8px; }
.guide-ficha-pasos li { font-size: 14px; line-height: 1.6; }
.guide-ficha-pasos b { color: var(--verde); font-weight: 600; }
.guide-ficha-nota {
  margin-top: 14px;
  padding: 11px 14px;
  background: rgba(226, 231, 53, 0.14);
  border-left: 3px solid var(--mostaza);
  border-radius: 0 10px 10px 0;
  font-size: 13.5px;
  line-height: 1.6;
}
@media (min-width: 1100px) { .guide-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (pointer: coarse) { .guide-area { min-height: 44px; } }

/* --------------------------------------------------------------------------
   Ficha de proveedor: contacto en un toque
   El número no es decorativo. Si hay que llamar al florista desde el coche,
   el gesto debe ser tocar, no seleccionar-copiar-abrir-marcador.
   -------------------------------------------------------------------------- */
.provider-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 5px;
  font-size: 13px;
  color: var(--texto-suave);
}
.zona-chip {
  background: rgba(78, 99, 89, 0.12);
  color: var(--verde);
  padding: 2px 9px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 12px;
}
.tipo-chip {
  background: rgba(226, 231, 53, 0.22);
  color: #6b6410;
  padding: 2px 9px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 12px;
}
.provider-sin-contacto {
  margin-top: 8px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--texto-suave);
}
.contact-chip.chip-wa {
  background: rgba(37, 211, 102, 0.16);
  border-color: rgba(30, 185, 85, 0.5);
  color: #0b5e2c;
  font-weight: 600;
}
.contact-chip.chip-wa:hover { background: rgba(37, 211, 102, 0.28); }
.contact-chip.chip-ig {
  background: rgba(193, 53, 132, 0.1);
  border-color: rgba(193, 53, 132, 0.32);
  color: #8a2560;
  font-weight: 600;
}
.contact-chip.chip-ig:hover { background: rgba(193, 53, 132, 0.18); }
@media (pointer: coarse) { .contact-chip { min-height: 40px; display: inline-flex; align-items: center; } }

/* --------------------------------------------------------------------------
   Importar proveedores y salir a buscarlos
   -------------------------------------------------------------------------- */
.buscar-web {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--linea);
  border-radius: 12px;
  background: rgba(78, 99, 89, 0.04);
}
.buscar-web-txt { font-size: 13.5px; color: var(--texto-suave); margin-right: 4px; }
.buscar-web-btn {
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--linea);
  background: #fff;
  color: var(--verde);
  text-decoration: none;
  white-space: nowrap;
}
.buscar-web-btn:hover { border-color: var(--verde); background: rgba(78, 99, 89, 0.07); }

.import-ayuda {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(78, 99, 89, 0.06);
}
.import-ayuda p { font-size: 13.5px; line-height: 1.6; }
.import-ejemplo {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--linea);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
  color: var(--texto-suave);
}
#import-texto {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
}
.import-previo { margin-top: 20px; }
.import-previo h4 { font-size: 15px; color: var(--verde); }
.fila-repetida { opacity: 0.5; }
.import-fuentes { margin-top: 14px; display: grid; gap: 12px; padding-left: 18px; }
.import-fuentes li { font-size: 14px; line-height: 1.6; }
.import-aviso {
  margin-top: 16px;
  padding: 11px 14px;
  border-left: 3px solid var(--mostaza);
  border-radius: 0 10px 10px 0;
  background: rgba(226, 231, 53, 0.14);
  font-size: 13px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Documentos: orden y reconocimiento de un vistazo
   Con cuarenta archivos entre contratos, permisos y planos, una lista plana
   obliga a bajar leyendo. El icono por tipo y la agrupación por boda son lo
   que hace que se encuentre sin leer.
   -------------------------------------------------------------------------- */
.doc-grupo { margin-top: 22px; }
.doc-grupo-titulo {
  font-family: "Italiana", Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  color: var(--verde);
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linea);
}
.doc-grupo-titulo span {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  background: rgba(78, 99, 89, 0.12);
  color: var(--verde);
  padding: 2px 8px;
  border-radius: 20px;
}

.doc-row { align-items: flex-start; }
.doc-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 17px;
  background: rgba(78, 99, 89, 0.1);
  color: var(--verde);
}
.doc-pdf   { background: rgba(200, 70, 60, 0.12); color: #a8402c; }
.doc-word  { background: rgba(45, 90, 160, 0.12); color: #2d5aa0; }
.doc-excel { background: rgba(40, 130, 80, 0.12); color: #1f7a4c; }
.doc-img   { background: rgba(160, 100, 180, 0.12); color: #7d4a93; }
.doc-ppt   { background: rgba(200, 120, 40, 0.12); color: #a5691f; }

.doc-cuerpo { flex: 1 1 auto; min-width: 0; }
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--texto-suave);
}
.doc-tipo { font-weight: 600; color: var(--verde); }
.doc-general { font-style: italic; }
.doc-visible-novios { color: #7a6a12; font-weight: 600; }
.doc-archivo {
  margin-top: 5px;
  font-size: 12px;
  color: var(--texto-suave);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}
.doc-sin-archivo { margin-top: 5px; font-size: 12px; font-style: italic; color: var(--texto-suave); }

@media (max-width: 767px) {
  .doc-row { flex-wrap: wrap; }
  .doc-row .inline-tools { flex: 1 1 100%; justify-content: flex-start; margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   Portal: los novios reparten sus propias mesas
   La explicación va arriba del todo. La mayoría de parejas no ha hecho un
   seating plan en su vida y lo primero que necesita oír es que no se puede
   romper nada.
   -------------------------------------------------------------------------- */
.mesas-intro { background: linear-gradient(180deg, rgba(78, 99, 89, 0.07), transparent); }
.mesas-intro p { font-size: 14.5px; line-height: 1.7; margin-top: 8px; }
.mesas-pasos { margin-top: 16px; padding-left: 22px; display: grid; gap: 10px; }
.mesas-pasos li { font-size: 14.5px; line-height: 1.65; }
.mesas-pasos b { color: var(--verde); }
.mesas-tranquilo {
  margin-top: 16px;
  padding: 12px 15px;
  border-radius: 12px;
  background: rgba(226, 231, 53, 0.16);
  font-size: 14px !important;
}

.reparto-lista { display: grid; gap: 2px; margin-top: 8px; }
.reparto-fila {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.reparto-fila:nth-child(odd) { background: rgba(78, 99, 89, 0.035); }
.reparto-fila:hover { background: rgba(78, 99, 89, 0.08); }
.reparto-fila.sin-sitio { box-shadow: inset 3px 0 0 var(--mostaza); }
.reparto-nombre { flex: 1 1 auto; font-size: 14.5px; display: flex; flex-direction: column; }
.reparto-nombre small { font-size: 12px; color: var(--texto-suave); margin-top: 1px; }
.reparto-fila select {
  flex: 0 0 auto;
  min-width: 190px;
  padding: 9px 12px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14px;
}
.reparto-fila select:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }

.reparto-mesas { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linea); }
.reparto-mesas h4 { font-size: 15px; margin-bottom: 10px; }
.reparto-mesa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 14px;
}
.reparto-mesa:last-child { border-bottom: 0; }
.pill.mostaza { background: rgba(226, 231, 53, 0.3); color: #6b6410; }

@media (max-width: 767px) {
  .reparto-fila { flex-wrap: wrap; }
  .reparto-fila select { flex: 1 1 100%; min-width: 0; }
}
@media (pointer: coarse) { .reparto-fila select { min-height: 44px; } }

/* --------------------------------------------------------------------------
   Portal: la lista de invitados es suya, y se edita entera
   -------------------------------------------------------------------------- */
.portal-guests-table { min-width: 960px; }
.portal-input-nombre {
  min-width: 150px;
  font-weight: 600;
  border-color: transparent;
  background: transparent;
}
.portal-input-nombre:hover { border-color: var(--linea); background: #fff; }
.portal-input-nombre:focus { border-color: var(--verde); background: #fff; }
.cell-quitar { width: 44px; text-align: center; }
.portal-guests-table td { vertical-align: middle; }
.portal-guests-table .cell-guest { display: flex; align-items: center; gap: 9px; }

/* La barra de guardado se queda pegada abajo: con sesenta invitados, el botón
   de guardar no puede estar a un scroll de distancia. */
.portal-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: 16px;
  background: var(--crema, #f4f1e8);
  border-top: 1px solid var(--linea);
  /* El relleno horizontal era 0 y «Todo guardado» quedaba pegado al borde
     izquierdo de su propia barra. Una barra con fondo propio necesita aire
     por dentro, igual que una tarjeta. */
  padding: var(--e3) var(--e4);
  margin-inline: calc(var(--e4) * -1);
  border-radius: 0 0 8px 8px;
}
.portal-save-bar.active {
  box-shadow: 0 -6px 18px rgba(37, 37, 31, 0.07);
}
@media (max-width: 767px) {
  .portal-save-bar { flex-wrap: wrap; gap: 10px; }
  .portal-save-bar .actions { flex: 1 1 100%; }
  .portal-save-bar .actions .btn { flex: 1; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Plano de mesas del portal: se trabaja sobre el dibujo
   Pulsar una mesa abre su detalle debajo. Es lo que convierte el plano de
   ilustración en herramienta.
   -------------------------------------------------------------------------- */
.plano-mesa { cursor: pointer; }
.plano-mesa .plano-mesa-cuerpo { transition: fill 0.15s ease, stroke-width 0.15s ease; }
.plano-mesa:hover .plano-mesa-cuerpo { fill: #f2f5ef; stroke-width: 3; }
.plano-mesa:focus-visible { outline: none; }
.plano-mesa:focus-visible .plano-mesa-cuerpo { stroke: #c9ce22; stroke-width: 4; }
.plano-mesa.elegida .plano-mesa-cuerpo { fill: #f7f9ee; }

.plano-pista {
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px dashed var(--linea);
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  color: var(--texto-suave);
}

.mesa-detalle {
  margin-top: 16px;
  padding: 18px 20px 20px;
  border: 1px solid var(--verde);
  border-radius: 14px;
  background: rgba(78, 99, 89, 0.05);
  animation: mesaAbre 0.25s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes mesaAbre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mesa-detalle { animation: none; } }

.mesa-detalle-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.mesa-detalle-cab h4 { font-size: 18px; margin: 0; color: var(--verde); }
.mesa-detalle-cab p { margin-top: 3px; font-size: 13.5px; color: var(--texto-suave); }

.mesa-gente { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mesa-persona {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 14px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 22px;
  font-size: 14px;
}
.mesa-persona button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(168, 64, 44, 0.12);
  color: #a8402c;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.mesa-persona button:hover { background: rgba(168, 64, 44, 0.25); }
.mesa-persona button:focus-visible { outline: 2px solid #a8402c; outline-offset: 1px; }

.mesa-vacia, .mesa-todos { margin-top: 14px; font-size: 14px; color: var(--texto-suave); font-style: italic; }
.mesa-anadir { margin-top: 18px; }
.mesa-anadir label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-suave); margin-bottom: 6px; }
.mesa-anadir select {
  width: 100%;
  max-width: 420px;
  padding: 11px 13px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14.5px;
}
.mesa-anadir select:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
@media (pointer: coarse) {
  .mesa-anadir select { min-height: 46px; }
  .mesa-persona { padding: 10px 10px 10px 16px; }
  .mesa-persona button { width: 28px; height: 28px; }
}

/* --------------------------------------------------------------------------
   Tamaño de mesa
   Una presidencial de 14 y una de 6 no pueden dibujarse iguales: si el plano
   no se parece al salón, deja de servir para lo único que sirve.
   -------------------------------------------------------------------------- */
.venue-tamano { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); }
.venue-tamano-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-suave);
  margin-bottom: 8px;
}
.venue-tamano-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.venue-tamano-op {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 8px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  color: var(--texto);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.venue-tamano-op i {
  display: inline-block;
  border-radius: 50%;
  border: 1.5px solid var(--verde);
  flex: 0 0 auto;
}
.venue-tamano-op:hover { border-color: var(--verde); }
.venue-tamano-op.activo { background: var(--verde); border-color: var(--verde); color: #f4f1e8; font-weight: 600; }
.venue-tamano-op.activo i { border-color: #f4f1e8; background: rgba(244, 241, 232, 0.3); }
.venue-tamano-op:focus-visible { outline: 2px solid var(--mostaza); outline-offset: 2px; }
.venue-tamano small { display: block; margin-top: 8px; font-size: 11.5px; color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   El plano dentro del portal
   Es el mismo lienzo que usa el equipo, pero aquí lo abre gente que no lo ha
   visto nunca y muchas veces desde el móvil.
   -------------------------------------------------------------------------- */
.portal-content .venue-layout { margin-top: 18px; }
.portal-content .venue-hint {
  font-size: 13.5px;
  color: var(--texto-suave);
  text-align: center;
  padding: 10px 12px;
  background: rgba(226, 231, 53, 0.14);
  border-radius: 10px;
  margin-top: 12px;
}
/* Sin esto, arrastrar una mesa con el dedo hace scroll de la página. */
.venue-table-wrap { touch-action: none; }
.venue-scroll { -webkit-overflow-scrolling: touch; }

@media (max-width: 1023px) {
  .portal-content .venue-layout { grid-template-columns: minmax(0, 1fr); }
  .portal-content .venue-side { position: static; }
}
@media (pointer: coarse) {
  .venue-tamano-op { min-height: 46px; }
  .venue-zoom button { min-width: 40px; min-height: 40px; }
  .venue-tools .mini-btn, .venue-tools .btn { min-height: 42px; }
}


/* --------------------------------------------------------------------------
   Ficha de equipo: los botones dejan de chocar
   WhatsApp/Llamar y Editar/Borrar competían por la misma fila y en pantallas
   estrechas se pisaban. Ahora la tarjeta es una columna con el bloque de
   contacto y el de administración separados por una línea.
   -------------------------------------------------------------------------- */
.team-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.team-card > div:first-child { flex: 1 1 auto; }
.team-contacto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.team-contacto .btn { width: 100%; justify-content: center; }
.team-card .actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  display: flex;
  gap: 8px;
}
.team-card .actions .btn { flex: 1; justify-content: center; }
@media (max-width: 520px) {
  .team-contacto { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   Presupuesto: partidas y sus tres pagos
   Una partida es una tarjeta y sus tres pagos van dentro, en columnas en
   escritorio y apilados en móvil. Cada pago se lee entero sin desplegar nada:
   lo que importa es ver de un golpe qué falta por pagar.
   -------------------------------------------------------------------------- */
.pendiente-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.pendiente-card {
  padding: 16px 18px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: #fff;
}
.pendiente-card h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--verde);
  margin: 0;
}
.pendiente-sub { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.pendiente-cifras { display: flex; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.pendiente-cifras div { display: flex; flex-direction: column; }
.pendiente-cifras span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-suave); }
.pendiente-cifras strong {
  font-family: var(--font-numeric);
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.pendiente-cifras .pend strong { color: #8a6a10; }
.pendiente-card small { display: block; margin-top: 10px; font-size: 11.5px; color: var(--texto-suave); }

.partidas { display: grid; gap: 16px; margin-top: 20px; }
.partida {
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.partida-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: rgba(78, 99, 89, 0.045);
  border-bottom: 1px solid var(--linea);
}
.partida-cab h4 { font-size: 16px; margin: 0; }
.partida-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 13px; color: var(--texto-suave); }
.partida-sin-prov { font-style: italic; }
.partida-notas { margin-top: 6px; font-size: 12.5px; color: var(--texto-suave); }
.partida-total { text-align: right; flex: 0 0 auto; }
.partida-total strong {
  display: block;
  font-family: var(--font-numeric);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.partida-total small { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.partida-total .inline-tools { justify-content: flex-end; margin-top: 8px; }

.plazos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plazo {
  padding: 14px 16px 12px;
  border-right: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plazo:last-child { border-right: 0; }
.plazo.vacio { background: rgba(37, 37, 31, 0.02); }
.plazo.pagado { background: rgba(78, 99, 89, 0.05); }
.plazo.tarde { background: rgba(168, 64, 44, 0.05); box-shadow: inset 0 3px 0 #a8402c; }
.plazo.anulado { opacity: 0.5; }
.plazo-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plazo-nombre { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--verde); }
.plazo-vacio { font-size: 11.5px; color: var(--texto-suave); font-style: italic; }
.plazo-nada { font-size: 13px; color: var(--texto-suave); font-style: italic; }

.plazo-cifras { display: grid; gap: 7px; }
.plazo-cifras > div { display: flex; flex-direction: column; }
.plazo-cifras span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-suave); }
.plazo-cifras strong { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 700; }
.plazo-cifras small { font-size: 10.5px; color: var(--texto-suave); }
.plazo-total { padding-top: 7px; border-top: 1px solid var(--linea); }
.plazo-total strong { font-size: 17px; color: var(--verde); }
.plazo-vence { font-size: 12px; color: var(--texto-suave); }

.plazo-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.plazo-sin-just { font-size: 11.5px; color: var(--texto-suave); font-style: italic; }
.plazo-traza {
  font-size: 11px;
  color: var(--texto-suave);
  padding-top: 7px;
  border-top: 1px dashed var(--linea);
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .plazos { grid-template-columns: 1fr; }
  .plazo { border-right: 0; border-bottom: 1px solid var(--linea); }
  .plazo:last-child { border-bottom: 0; }
  .pendiente-grid { grid-template-columns: 1fr; }
  .partida-cab { flex-direction: column; }
  .partida-total { text-align: left; }
  .partida-total .inline-tools { justify-content: flex-start; }
}
@media (pointer: coarse) {
  .plazo-pie .mini-btn { min-height: 42px; }
}


/* Validación de un proveedor por parte de la pareja. */
.val-ok  { color: #2c6b45; font-weight: 600; }
.val-no  { color: #a8402c; font-weight: 600; }
.val-esp { color: #8a6a10; font-weight: 600; }
.val-pres {
  background: rgba(78, 99, 89, 0.1);
  color: var(--verde);
  padding: 1px 8px;
  border-radius: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   Portal: proveedores a validar y plan
   Las dos respuestas pesan igual — descartar tiene el mismo tamaño de botón
   que aceptar, porque un "este no" a tiempo vale tanto como un sí.
   -------------------------------------------------------------------------- */
.prov-grupo {
  font-family: "Italiana", Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--verde);
  margin: 22px 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--linea);
}
.prov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.prov-card {
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 16px 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prov-card.ok { border-color: rgba(78, 99, 89, 0.5); background: rgba(78, 99, 89, 0.04); }
.prov-card.no { opacity: 0.62; }
.prov-card-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.prov-card h4 { font-size: 16px; margin: 0; }
.prov-card-cab p { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }
.prov-incluye { font-size: 13px; line-height: 1.55; color: var(--texto-suave); }
.prov-decision { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 6px; }
.prov-decision .btn { justify-content: center; }

.plan-lista { display: grid; gap: 2px; margin-top: 6px; }
.plan-tarea {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px;
  border-radius: 10px;
}
.plan-tarea:nth-child(odd) { background: rgba(78, 99, 89, 0.035); }
.plan-tarea.hecha { opacity: 0.6; }
.plan-tarea.hecha strong { text-decoration: line-through; }
.plan-check { font-size: 16px; color: var(--verde); flex: 0 0 auto; }
.plan-tarea > div { flex: 1 1 auto; min-width: 0; }
.plan-tarea strong { display: block; font-size: 14.5px; }
.plan-tarea small { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 2px; }

.plan-timeline { margin-top: 8px; }
.plan-hito {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linea);
}
.plan-hito:last-child { border-bottom: 0; }
.plan-hora {
  flex: 0 0 62px;
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 15px;
  color: var(--verde);
}
.plan-hito strong { display: block; font-size: 14.5px; }
.plan-hito small { display: block; font-size: 12.5px; color: var(--texto-suave); margin-top: 3px; line-height: 1.5; }

@media (max-width: 520px) {
  .prov-decision { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  .prov-decision .btn { min-height: 46px; }
}


/* --------------------------------------------------------------------------
   Agenda de reuniones
   La fecha va a la izquierda en bloque, como en un calendario de papel: se
   localiza el día sin leer nada.
   -------------------------------------------------------------------------- */
.agenda-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--linea);
}
.agenda-summary-item { padding: 14px 16px; background: rgba(255, 255, 255, 0.76); }
.agenda-summary-item strong { display: block; color: var(--verde); font-family: var(--font-numeric); font-size: 22px; }
.agenda-summary-item span { display: block; margin-top: 2px; color: var(--texto-suave); font-size: 12px; }
.agenda-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.agenda-toolbar .filters-row { margin: 0; }
.agenda-view-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--linea); border-radius: 10px; background: rgba(78, 99, 89, 0.06); }
.agenda-view-switch button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--texto-suave); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.agenda-view-switch button.active { background: #fff; color: var(--verde); box-shadow: 0 2px 8px rgba(36, 35, 29, 0.09); }
.agenda-calendar { padding: 18px; border: 1px solid var(--linea); border-radius: 14px; background: rgba(255, 255, 255, 0.68); }
.agenda-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.agenda-calendar-kicker { display: block; margin-bottom: 3px; color: var(--texto-suave); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.agenda-calendar-head h4 { margin: 0; color: var(--verde); font-family: "Italiana", Georgia, serif; font-size: 23px; font-weight: 400; letter-spacing: 0; }
.agenda-calendar-nav { display: flex; align-items: center; gap: 6px; }
.agenda-calendar-nav .icon-only { width: 38px; padding: 0; font-size: 24px; }
.agenda-weekdays, .agenda-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.agenda-weekdays { padding-bottom: 6px; }
.agenda-weekdays span { padding: 4px 7px; color: var(--texto-suave); font-size: 10px; font-weight: 700; text-align: right; text-transform: uppercase; }
.agenda-days { gap: 4px; }
.agenda-day { position: relative; min-width: 0; min-height: 72px; padding: 8px; border: 1px solid transparent; border-radius: 8px; background: rgba(248, 247, 241, 0.7); color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.agenda-day:hover { border-color: rgba(78, 99, 89, 0.38); background: #fff; }
.agenda-day.outside { opacity: 0.42; }
.agenda-day.today { border-color: var(--rosa); }
.agenda-day.selected { border-color: var(--verde); background: rgba(78, 99, 89, 0.1); box-shadow: inset 0 0 0 1px var(--verde); }
.agenda-day-number { display: block; font-family: var(--font-numeric); font-size: 13px; font-weight: 700; text-align: right; }
.agenda-day-events { display: flex; gap: 4px; margin-top: 18px; }
.agenda-day-events i, .agenda-calendar-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rosa); }
.agenda-day-events i.confirmada, .agenda-calendar-legend i.confirmada { background: var(--verde); }
.agenda-day-events i.propuesta, .agenda-calendar-legend i.propuesta { background: var(--mostaza); }
/* Celebrada iba del mismo color que el punto por defecto, así que en la
   leyenda había dos puntos idénticos con etiquetas distintas. Lo pasado se
   apaga: gris, que ya no reclama atención. */
.agenda-day-events i.celebrada, .agenda-calendar-legend i.celebrada { background: var(--texto-suave); }
.agenda-day-events i.cancelada { background: #a56d67; }
.agenda-day-count { position: absolute; left: 8px; bottom: 7px; color: var(--texto-suave); font-size: 10px; }
.agenda-calendar-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; color: var(--texto-suave); font-size: 11px; }
.agenda-calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.agenda-selection-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0 0; padding: 12px 14px; border-left: 3px solid var(--verde); background: rgba(78, 99, 89, 0.06); }
.agenda-selection-head span { display: block; color: var(--texto-suave); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.agenda-selection-head strong { display: block; margin-top: 2px; font-size: 14px; }
.agenda-empty-day { margin-top: 16px; }
.agenda-mes { margin-top: 24px; }
.agenda-mes-titulo {
  font-family: "Italiana", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--verde);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linea);
}
.reuniones { display: grid; gap: 10px; margin-top: 14px; }
.reunion {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: #fff;
}
.reunion.hoy { border-color: var(--mostaza); box-shadow: inset 4px 0 0 var(--mostaza); }
.reunion.pasada { background: rgba(78, 99, 89, 0.04); }
.reunion.cancelada { opacity: 0.55; }

.reunion-fecha {
  flex: 0 0 58px;
  text-align: center;
  padding: 8px 4px;
  border-radius: 11px;
  background: rgba(78, 99, 89, 0.09);
}
.reunion-dia {
  display: block;
  font-family: var(--font-numeric);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}
.reunion-mes { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-suave); margin-top: 3px; }
.reunion-hora {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--verde);
}

.reunion-cuerpo { flex: 1 1 auto; min-width: 0; }
.reunion-cuerpo h4 { font-size: 15.5px; margin: 0; }
.reunion-hoy {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--mostaza);
  color: #3f3d08;
  padding: 2px 7px;
  border-radius: 20px;
  vertical-align: middle;
}
.reunion-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 12.5px; color: var(--texto-suave); }
.reunion-boda { color: var(--verde); font-weight: 600; }
.reunion-connovios { color: #8a6a10; font-weight: 600; }
.reunion-temas { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--texto-suave); white-space: pre-line; }
.reunion-acuerdos {
  margin-top: 10px;
  padding: 10px 13px;
  border-radius: 0 10px 10px 0;
  border-left: 3px solid var(--verde);
  background: rgba(78, 99, 89, 0.07);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
}
.reunion-lado { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.reunion-lado .inline-tools { flex-wrap: wrap; justify-content: flex-end; }
.reunion-lado .mini-btn { text-decoration: none; }
.agenda-action { gap: 5px; border-color: transparent; background: rgba(78, 99, 89, 0.06); box-shadow: none; }
.agenda-action:hover { border-color: var(--linea); background: #fff; }
.agenda-action-emphasis { color: var(--verde); background: rgba(78, 99, 89, 0.12); }
.agenda-action-delete { width: 38px; padding: 0; color: #8d4d46; background: rgba(141, 77, 70, 0.06); }

.proxima-reunion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(226, 231, 53, 0.16);
  border: 1px solid rgba(160, 150, 20, 0.35);
}
.proxima-eti { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #6b6410; font-weight: 700; }
.proxima-reunion strong { font-size: 15px; }
.proxima-reunion span:not(.proxima-eti) { font-size: 13.5px; color: var(--texto-suave); }
.proxima-reunion .btn { margin-left: auto; text-decoration: none; }

@media (max-width: 767px) {
  .agenda-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-toolbar { align-items: stretch; flex-direction: column; }
  .agenda-toolbar .filters-row { width: 100%; }
  .agenda-toolbar .filter-field { flex: 1 1 140px; }
  .agenda-view-switch { align-self: flex-start; }
  .agenda-calendar { margin-inline: -18px; padding: 12px 4px; }
  .agenda-days { gap: 0; }
  .agenda-day { min-height: 52px; padding: 5px; }
  .agenda-day-events { margin-top: 10px; }
  .agenda-day-count { display: none; }
  .agenda-calendar-legend { padding: 0 4px; }
  .agenda-selection-head { align-items: stretch; flex-direction: column; }
  .agenda-selection-head .mini-btn { width: 100%; justify-content: center; }
  .reunion { flex-wrap: wrap; }
  .reunion-lado { flex: 1 1 100%; align-items: flex-start; flex-direction: column; margin-top: 8px; }
  .reunion-lado .inline-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .reunion-lado .agenda-action { justify-content: center; }
  .reunion-lado .agenda-action-delete { width: 100%; }
  .proxima-reunion .btn { margin-left: 0; width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
  .agenda-panel .panel-head { align-items: stretch; flex-direction: column; }
  .agenda-panel .panel-head .btn { width: 100%; justify-content: center; }
  .agenda-toolbar .filters-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .agenda-toolbar .filter-field { width: 100%; min-width: 0; }
  .agenda-calendar-head { align-items: flex-start; flex-direction: column; }
  .agenda-calendar-nav { width: 100%; justify-content: space-between; }
  .agenda-day { min-height: 46px; }
  .agenda-day-events { margin-top: 7px; }
  .agenda-weekdays span { padding-inline: 2px; text-align: center; }
}

/* En dos columnas, las acciones de cada tarea ya no compiten por el mismo
   renglón que un título largo. El texto conserva una medida legible. */
@media (max-width: 1380px) {
  .task-row,
  .task-board .row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .task-row .inline-tools,
  .task-board .row .inline-tools {
    grid-column: 2;
    justify-content: flex-start;
  }
}
@media (pointer: coarse) { .reunion-lado .mini-btn { min-height: 42px; min-width: 42px; } }


/* --------------------------------------------------------------------------
   Servicios contratados
   Solo producto: qué se contrató y cuánto paga la pareja. El trabajo interno
   vive en Tareas, que es su sitio.
   -------------------------------------------------------------------------- */
.servicios-lista { display: grid; gap: 10px; margin-top: 16px; }
.servicio {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
  border: 1px solid var(--linea);
  border-radius: 13px;
  background: #fff;
}
.servicio-cuerpo { flex: 1 1 auto; min-width: 0; }
.servicio-cuerpo h4 { font-size: 15.5px; margin: 0; }
.servicio-cuerpo p { margin-top: 5px; font-size: 13px; line-height: 1.6; color: var(--texto-suave); }
.servicio-pvp { flex: 0 0 auto; text-align: right; }
.servicio-pvp strong {
  display: block;
  font-family: var(--font-numeric);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--verde);
}
.servicio-pvp .inline-tools { justify-content: flex-end; margin-top: 8px; }

.servicios-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 15px 18px;
  border-radius: 13px;
  background: var(--verde);
  color: #f4f1e8;
}
.servicios-total span { font-size: 13px; letter-spacing: 0.03em; }
.servicios-total strong {
  font-family: var(--font-numeric);
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.servicios-nota {
  margin-top: 14px;
  padding: 11px 14px;
  border-left: 3px solid var(--mostaza);
  border-radius: 0 10px 10px 0;
  background: rgba(226, 231, 53, 0.14);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 620px) {
  .servicio { flex-direction: column; gap: 10px; }
  .servicio-pvp { text-align: left; }
  .servicio-pvp .inline-tools { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CUADRO DE MANDO DEL PRESUPUESTO
   Total arriba y, debajo, A y B con lo realizado y lo pendiente de cada uno.
   La jerarquía es deliberada: una sola cifra grande manda, y las dos que la
   componen van al mismo tamaño entre sí para que se lean como una suma y no
   como dos indicadores sueltos que compiten.
   ══════════════════════════════════════════════════════════════════════════ */
.budget-mando {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.kpi-total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
  border: 1px solid var(--verde);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(78, 99, 89, 0.09), rgba(78, 99, 89, 0.03));
}
.kpi-total-eti {
  color: var(--verde);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.kpi-total-cifra {
  display: block;
  margin-top: 4px;
  font-family: var(--font-numeric);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--texto);
}
/* La igualdad escrita: A + B = Total. Es la comprobación a ojo. */
.kpi-total-suma {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--texto-suave);
}
.kpi-total-suma b {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.kpi-total-suma i { font-style: normal; opacity: 0.55; }
.kpi-total-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(78, 99, 89, 0.22);
  font-size: 12px;
  color: var(--texto-suave);
}
.kpi-total-pie b {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--texto);
}

.kpi-ab {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: #fff;
}
.kpi-ab header h4 { margin: 0; font-size: 13px; font-weight: 700; }
.kpi-ab header p { margin: 2px 0 0; font-size: 11.5px; color: var(--texto-suave); }
.kpi-ab-a { box-shadow: inset 3px 0 0 var(--verde); }
.kpi-ab-b { box-shadow: inset 3px 0 0 var(--mostaza); }

.kpi-ab-total { margin-top: 12px; }
.kpi-ab-total span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texto-suave); }
.kpi-ab-total strong {
  display: block;
  font-family: var(--font-numeric);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.kpi-ab-total em { font-style: normal; font-size: 11.5px; color: var(--texto-suave); }

/* Realizado y pendiente, al mismo peso: ninguno de los dos es "el bueno". */
.kpi-ab-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--linea);
}
.kpi-ab-split span { display: block; font-size: 11px; color: var(--texto-suave); }
.kpi-ab-split strong {
  display: block;
  font-family: var(--font-numeric);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
.kpi-ab-hecho strong { color: var(--verde); }
.kpi-ab-falta strong { color: #8a6d1f; }

.kpi-ab-barra {
  height: 5px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--crema-oscura);
  overflow: hidden;
}
.kpi-ab-barra i { display: block; height: 100%; border-radius: 999px; background: var(--verde); }
.kpi-ab-b .kpi-ab-barra i { background: #b3ae2c; }
.kpi-ab > small { margin-top: 10px; font-size: 11px; color: var(--texto-suave); }

.budget-graficos { margin-bottom: 18px; }
.budget-graficos .card-sub { margin-bottom: 10px; }

/* El coste que todavía no ha confirmado nadie: se deduce, no se afirma. */
.coste-derivado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(226, 231, 53, 0.22);
  color: #6a6414;
  font-size: 10.5px;
  font-weight: 700;
}

@media (max-width: 1080px) {
  .budget-mando { grid-template-columns: 1fr; }
  .kpi-total-cifra { font-size: 30px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTONES PEQUEÑOS: CENTRADO
   .btn siempre declaró `display: inline-flex; align-items: center; gap: 8px`,
   pero .mini-btn, .btn-xs y .icon-only no declaraban display en ninguna regla.
   Sin flex, el icono y el texto se pegaban, el `min-height` no centraba nada
   verticalmente, y las seis reglas que les ponen `gap` no hacían absolutamente
   nada. Es la causa de los botones descentrados en Planificación y en el
   Plan → Citas del portal.
   ══════════════════════════════════════════════════════════════════════════ */
.mini-btn,
.btn-xs,
.icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  text-align: center;
}

/* Estos contenedores llevaban `gap` sin ser flex: el hueco no aparecía. */
.wedding-form,
.portal-pick-list,
.login-card .field,
.venue-tools,
.export-formats {
  display: flex;
  flex-wrap: wrap;
}
.wedding-form,
.login-card .field,
.portal-pick-list { flex-direction: column; }
.venue-tools,
.export-formats { align-items: center; }

/* Contratado frente a repartido, dentro de la partida */
.partida-reparto {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--mostaza);
  border-radius: 0 8px 8px 0;
  background: rgba(226, 231, 53, 0.1);
  font-size: 12.5px;
  color: var(--texto-suave);
}
.partida-reparto.sobra {
  border-left-color: #a84f42;
  background: rgba(168, 79, 66, 0.07);
}
.partida-reparto b {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--texto);
}

/* ══════════════════════════════════════════════════════════════════════════
   ACUERDOS
   La memoria del proyecto. Se lee como una línea de tiempo: la fecha manda a
   la izquierda, el texto a la derecha, y lo más reciente arriba.
   ══════════════════════════════════════════════════════════════════════════ */
.acuerdos-buscador { max-width: 420px; margin-bottom: 18px; }

.acuerdos-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.acuerdo-item {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--verde);
  border-radius: 0 12px 12px 0;
  background: #fff;
}

.acuerdo-fecha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 2px;
  text-align: center;
  line-height: 1.15;
}
.acuerdo-fecha strong {
  font-family: var(--font-numeric);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.acuerdo-fecha span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--texto-suave); }
.acuerdo-fecha em { font-style: normal; font-size: 10.5px; color: var(--texto-suave); opacity: 0.75; }

.acuerdo-cuerpo h4 { margin: 0; font-size: 15px; }
.acuerdo-meta { margin: 2px 0 0; font-size: 11.5px; color: var(--texto-suave); }
.acuerdo-texto {
  margin: 9px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(78, 99, 89, 0.06);
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-line;
}
.acuerdo-cuerpo .mini-btn { margin-top: 10px; }

@media (max-width: 640px) {
  .acuerdo-item { grid-template-columns: 1fr; gap: 8px; }
  .acuerdo-fecha { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 6px; }
  .acuerdo-fecha strong { font-size: 17px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DOCUMENTOS · el índice
   Cada fila responde a tres preguntas en este orden: qué es, de dónde sale y
   si lo ven los novios. El origen va con color propio porque es la columna
   que de verdad se busca con la vista.
   ══════════════════════════════════════════════════════════════════════════ */
.docs-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.docs-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc-fila {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: #fff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.doc-fila:hover { border-color: var(--verde); box-shadow: 0 8px 20px rgba(36, 35, 29, 0.07); }

.doc-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--crema);
  font-size: 18px;
  color: var(--verde);
}

.doc-datos h4 { margin: 0; font-size: 14px; word-break: break-word; }
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--texto-suave);
}

.doc-origen {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.doc-origen-presupuesto { background: rgba(78, 99, 89, 0.12); color: var(--verde); }
.doc-origen-proveedor { background: rgba(199, 166, 150, 0.22); color: #8a5e49; }
.doc-origen-contrato { background: rgba(226, 231, 53, 0.22); color: #6a6414; }
.doc-origen-suelto { background: var(--crema-oscura); color: var(--texto-suave); }

.doc-importe {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--texto);
}
.doc-ext {
  padding: 0 6px;
  border: 1px solid var(--linea);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.doc-privado { color: #8a6d1f; font-weight: 700; }

.doc-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.doc-sin-archivo { font-size: 11.5px; font-style: italic; color: var(--texto-suave); }

@media (max-width: 720px) {
  .doc-fila { grid-template-columns: 34px 1fr; }
  .doc-icono { width: 34px; height: 34px; font-size: 16px; }
  .doc-acciones { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Ficha del proveedor en el portal: si van a decidir, tienen que poder mirarlo */
.prov-descripcion { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--texto-suave); }
.prov-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 14px;
  margin: 12px 0 0;
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(78, 99, 89, 0.05);
}
.prov-ficha dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.prov-ficha dd { margin: 2px 0 0; font-size: 13px; word-break: break-word; }
.prov-ficha a { color: var(--verde); text-decoration: underline; text-underline-offset: 2px; }
.chip-propuesta { border-color: var(--verde); color: var(--verde); font-weight: 700; }
.chip-vacio { opacity: 0.65; font-style: italic; cursor: default; }

/* Cierre de la boda: una lista de comprobación, no un formulario */
.cierre-lista { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cierre-punto {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linea);
}
.cierre-punto:last-child { border-bottom: 0; }
.cierre-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--crema-oscura);
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 700;
}
.cierre-punto.ok .cierre-marca { background: rgba(78, 99, 89, 0.16); color: var(--verde); }
.cierre-punto strong { display: block; font-size: 13.5px; }
.cierre-punto span { display: block; font-size: 12px; color: var(--texto-suave); }
.cierre-punto.ok strong { color: var(--texto-suave); font-weight: 500; }
.cierre-acciones { margin-top: 16px; }

/* El presupuesto que se fijó la pareja: va encima del contratado porque es la
   cifra contra la que se lee todo lo demás. Sin ella, «llevas 37.764 €» no
   significa nada. */
.kpi-objetivo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px dashed rgba(78, 99, 89, 0.3);
}
.kpi-objetivo span { font-size: 11px; color: var(--texto-suave); }
.kpi-objetivo strong {
  font-family: var(--font-numeric);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
}

.kpi-desvio {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 700;
}
.kpi-desvio.pasa { color: #8a5a1f; }
.kpi-desvio.cabe { color: var(--verde); }
.kpi-desvio i {
  padding: 1px 7px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}
.kpi-desvio.pasa i { background: rgba(226, 231, 53, 0.3); }
.kpi-desvio.cabe i { background: rgba(78, 99, 89, 0.14); }

/* ══════════════════════════════════════════════════════════════════════════
   BUDGET · VISTA DE TABLA
   Una línea por partida, como su Excel. Densidad para comparar; el detalle
   se abre bajo demanda, así no hay que elegir entre ver todo y ver bien.
   ══════════════════════════════════════════════════════════════════════════ */
.budget-vista-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--crema);
}
.budget-vista-switch button {
  padding: 0 14px;
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--texto-suave);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.budget-vista-switch button.active { background: var(--verde); color: #fff; }

.budget-tabla-wrap { margin-top: 4px; }
.budget-tabla { width: 100%; font-size: 13px; }
.budget-tabla th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px 10px;
  background: var(--crema);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}
.budget-tabla td { padding: 7px 10px; border-top: 1px solid var(--linea); vertical-align: middle; }
.budget-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }

/* La partida es lo único clicable de la fila: todo lo demás son cifras. */
.fila-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.fila-flecha { width: 12px; color: var(--texto-suave); font-size: 11px; }
.fila-toggle strong { display: block; font-size: 13px; }
.fila-toggle small { display: block; font-size: 11px; color: var(--texto-suave); }
.fila-partida:hover { background: rgba(78, 99, 89, 0.035); }
.fila-partida.abierta { background: rgba(78, 99, 89, 0.07); }
.fila-partida.abierta td { border-top-color: var(--verde); }
.fila-partida.descuadra .fila-toggle small { color: #8a6d1f; font-weight: 700; }

.col-prov { color: var(--texto-suave); font-size: 12px; }
.col-total strong { font-weight: 700; }
.col-pagado { color: var(--verde); }
.col-falta { color: #8a6d1f; }
.col-tools { white-space: nowrap; }
.col-tools .mini-btn { min-height: 26px; padding: 0 7px; }

/* El estado de cada plazo, en una marca que se lee sin pararse a leer */
.budget-tabla .pl i { font-style: normal; font-size: 11px; margin-left: 3px; }
/* Importe arriba, vencimiento debajo: «cuánto» y «cuándo» son la misma
   pregunta, y separarlas obligaba a buscar la fecha en otro sitio. */
.budget-tabla .pl-imp { display: block; }
.budget-tabla .pl-fecha {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}
.budget-tabla .pl-tarde .pl-fecha { color: var(--danger, #a84f42); font-weight: 500; }
.pl-hecha i { color: var(--verde); }
.pl-tarde { color: #a84f42; font-weight: 700; }
.pl-tarde i { color: #a84f42; }
.pl-espera i { color: var(--texto-suave); }
.pl-vacia { color: var(--texto-suave); opacity: 0.55; }
.pl-anulada { text-decoration: line-through; opacity: 0.5; }

.budget-tabla tfoot td {
  padding-top: 11px;
  border-top: 2px solid var(--verde);
  font-weight: 700;
  background: var(--crema);
}
.budget-tabla tfoot .tfoot-nota { font-weight: 500; font-size: 11.5px; color: #8a6d1f; text-align: left; }

/* La fila desplegada reutiliza las tarjetas de plazo tal cual */
.fila-detalle td { padding: 0 10px 14px; background: rgba(78, 99, 89, 0.04); border-top: 0; }
.fila-detalle .plazos { margin-top: 0; }

.tabla-leyenda { margin: 10px 2px 0; font-size: 11.5px; color: var(--texto-suave); }
.tabla-leyenda b { color: var(--texto); }

/* ──────────────────────────────────────────────────────────────────────────
   La tabla en móvil deja de ser tabla
   Recortar columnas no bastaba: con seis seguía midiendo 640 px dentro de un
   hueco de 306, así que había que arrastrar el dedo a los lados para leer una
   cifra. Una tabla ancha en un móvil no es una tabla, es un problema.
   Debajo de 760 px cada partida pasa a ser una ficha y cada celda una línea
   «etiqueta → valor», con el nombre de la columna sacado de `data-col`.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .budget-tabla-wrap { overflow: visible; }
  /* `.table-wrap > table` fuerza 720 px para que en escritorio se pueda
     desplazar la tabla a lo ancho. Aquí sobra: si no se anula, la ficha sigue
     midiendo 720 dentro de una pantalla de 375. */
  .table-wrap > .budget-tabla { min-width: 0; }
  .budget-tabla,
  .budget-tabla tbody,
  .budget-tabla tfoot,
  .budget-tabla tr,
  .budget-tabla td { display: block; width: auto; min-width: 0; max-width: 100%; }
  .budget-tabla thead { display: none; }

  .budget-tabla tbody tr.fila-partida {
    margin-bottom: 10px;
    padding: 4px 14px 10px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: #fff;
  }
  .budget-tabla tbody tr.fila-partida.abierta { border-color: var(--verde); }

  .budget-tabla td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-top: 1px solid var(--linea);
    text-align: right;
  }
  /* El nombre de la columna, que ya no está arriba */
  .budget-tabla td[data-col]::before {
    content: attr(data-col);
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--texto-suave);
    text-align: left;
  }
  /* El concepto manda: ocupa toda la línea y no lleva etiqueta */
  .budget-tabla td.col-concepto {
    padding-top: 10px;
    border-top: 0;
    text-align: left;
  }
  .budget-tabla td.col-tools {
    justify-content: flex-end;
    gap: 8px;
    padding-top: 10px;
  }
  .budget-tabla td.col-tools::before { content: none; }

  /* Pie de totales: mismo tratamiento, pero destacado */
  .budget-tabla tfoot tr {
    padding: 10px 14px;
    border: 2px solid var(--verde);
    border-radius: 12px;
    background: var(--crema);
  }
  .budget-tabla tfoot td { border-top: 1px solid rgba(78, 99, 89, 0.25); background: none; }
  .budget-tabla tfoot td:first-child { border-top: 0; }
  .budget-tabla tfoot td[colspan="3"] { display: none; }

  .fila-detalle td { padding: 0; border-top: 0; }
  .fila-detalle::before { content: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AVISOS DEL PRESUPUESTO
   Antes enumeraban en prosa los nueve pagos vencidos con concepto, plazo y
   fecha: cuatro líneas de texto corrido que nadie lee. De un aviso hace falta
   saber cuántos y cuánto; el detalle ya está en la tabla, marcado con «!».
   ══════════════════════════════════════════════════════════════════════════ */
.budget-avisos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.budget-aviso {
  padding: 11px 14px;
  border-left: 3px solid var(--mostaza);
  border-radius: 0 10px 10px 0;
  background: rgba(226, 231, 53, 0.09);
}
.budget-aviso.alerta { border-left-color: #a84f42; background: rgba(168, 79, 66, 0.07); }
.budget-aviso strong { display: block; font-size: 13px; }
.budget-aviso span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--texto-suave);
  /* Dos líneas como mucho: si el detalle es largo, se corta. Lo completo
     está en la tabla. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* La cabecera del presupuesto llevaba cinco acciones y el botón de Partida se
   salía de la fila. Que envuelvan en orden y alineadas a la derecha. */
.panel-head .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Cada tarjeta de gráfico con su altura natural. Estirarlas para igualarlas
   dejaba un hueco de doscientos píxeles dentro de la más corta, que se ve
   mucho peor que el desnivel entre las dos. */
.budget-graficos { align-items: start; }
.budget-graficos .card svg { width: 100%; height: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   PESO DE LOS DATOS
   Una barra que enseña cuánto del estado son datos y cuánto son archivos
   metidos como texto. Existe porque llegamos a 4,2 MB sin que nadie lo
   supiera: un problema invisible no se arregla nunca.
   ══════════════════════════════════════════════════════════════════════════ */
.peso-barra {
  display: flex;
  height: 12px;
  margin-top: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--crema-oscura);
}
.peso-barra i { display: block; height: 100%; }
.peso-datos { background: var(--verde); }
.peso-archivos { background: repeating-linear-gradient(45deg, #c9a227, #c9a227 5px, #dbb63f 5px, #dbb63f 10px); }

.peso-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 9px;
  font-size: 12px;
  color: var(--texto-suave);
}
.peso-punto {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: baseline;
}
.peso-punto.datos { background: var(--verde); }
.peso-punto.archivos { background: #c9a227; }

/* ══════════════════════════════════════════════════════════════════════════
   ESTADOS VACÍOS DE GRÁFICO
   Antes era un «Sin datos todavía.» suelto dentro de una tarjeta alta: un
   párrafo perdido arriba y doscientos píxeles de nada debajo. Y en el de
   líneas ni eso — se dibujaba una línea plana con el eje repitiendo «1 €»
   tres veces, que confunde más que un hueco.
   Un vacío bien resuelto ocupa su sitio, dice por qué está vacío y ofrece
   lo que hay que hacer.
   ══════════════════════════════════════════════════════════════════════════ */
.chart-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 168px;
  padding: 24px 20px;
  border: 1px dashed var(--linea);
  border-radius: 12px;
  background: rgba(78, 99, 89, 0.03);
  text-align: center;
}
.chart-vacio-ico {
  font-size: 26px;
  line-height: 1;
  color: var(--verde);
  opacity: 0.45;
}
.chart-vacio strong {
  margin-top: 4px;
  font-size: 14px;
  color: var(--texto);
}
.chart-vacio p {
  max-width: 34ch;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--texto-suave);
}
.chart-vacio .btn { margin-top: 10px; }

/* Etiqueta de boda de referencia. Va arriba a la izquierda de la portada,
   donde no compite con la cuenta atrás. NO lleva rayado de «esto es falso»,
   porque no lo es: son bodas reales de AEM. Solo separa lo que se está
   gestionando de lo que se tiene abierto para consultar. */
.chip-referencia {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(36, 35, 29, 0.78);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
}
/* Lápiz para cambiar la foto de portada: arriba a la izquierda, igual que la
   etiqueta de «Referencia» — si las dos coexisten, el lápiz baja un poco para
   no pisarla. Detiene la propagación del clic (ver render.js) para no abrir
   la boda de paso al pulsarlo. */
.cover-edit-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(36, 35, 29, 0.55);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  backdrop-filter: blur(2px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
}

.wedding-cover:hover .cover-edit-btn,
.cover-edit-btn:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.cover-edit-btn:hover { background: rgba(36, 35, 29, 0.82); }

.wedding-cover:has(.chip-referencia) .cover-edit-btn { top: 46px; }

@media (hover: none) {
  /* Sin ratón no hay :hover que lo revele — que se vea siempre. */
  .cover-edit-btn { opacity: 1; transform: none; }
}

/* Modal selector de portada: galería en cuadrícula, imagen 4:3 y check en la
   opción activa — mismo lenguaje visual que el resto de galerías (Rincones). */
.cover-picker-modal { max-width: 720px; }

.cover-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 2px;
}

.cover-picker-option {
  position: relative;
  padding: 0;
  border: 2px solid var(--borde-suave);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease;
}

.cover-picker-option:hover { transform: translateY(-2px); border-color: var(--tinta-suave); }
.cover-picker-option.selected { border-color: var(--aem-green); box-shadow: 0 0 0 2px rgba(78, 99, 89, 0.28); }

.cover-picker-option img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.cover-picker-option span:not(.cover-picker-check) {
  display: block;
  padding: 6px 8px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink);
  background: rgba(251, 250, 242, 0.96);
}

.cover-picker-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--aem-green);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* Dentro de un párrafo, la misma etiqueta en versión sobria. */
p .chip-referencia,
.card-sub .chip-referencia {
  position: static;
  background: var(--crema-oscura);
  color: var(--texto-suave);
  backdrop-filter: none;
}

/* Cuántas bodas reales y cuántas de ejemplo, de un vistazo */
.referencia-estado {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.referencia-estado > div {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fff;
}
.referencia-estado > div.hay { border-color: var(--mostaza); background: rgba(226, 231, 53, 0.08); }
.referencia-estado strong {
  display: block;
  font-family: var(--font-numeric);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.referencia-estado span { font-size: 11.5px; color: var(--texto-suave); }

/* ══════════════════════════════════════════════════════════════════════════
   OBJETIVOS TÁCTILES · el bloque que gana a todos los demás
   ----------------------------------------------------------------------------
   El mínimo de 44 px para dedos estaba puesto desde hace tiempo, pero doce
   reglas posteriores lo pisaban sin querer: cualquier selector compuesto
   —`.col-tools .mini-btn`, `.budget-vista-switch button`— tiene más peso que
   `.mini-btn` a secas, así que ganaba el 26 px y en una tablet esos botones
   quedaban imposibles de acertar.
   Este bloque va al final del archivo y usa selectores igual de específicos,
   para que la regla de accesibilidad sea la que mande de verdad. No es una
   preferencia estética: en una finca, el día de la boda, se usa el móvil.
   ══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .nav button,
  .tabs button,
  .quick-tabs button,
  .audience-control button,
  .agenda-view-switch button,
  .budget-vista-switch button,
  .mesa-card-actions .btn,
  .mini-btn.danger-text,
  button.danger-text,
  .col-tools .mini-btn,
  .data-table-actions .mini-btn,
  .rt-acciones .mini-btn,
  .venue-tools .mini-btn,
  .venue-tools .btn,
  .doc-acciones .mini-btn,
  .acuerdo-cuerpo .mini-btn,
  .inline-tools .mini-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* La tabla del presupuesto respira en táctil: filas más altas y la fila
     entera clicable, que en un móvil apuntar a la flecha es una lotería. */
  .budget-tabla td { padding: 12px 10px; }
  .fila-toggle { min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   .tabla-fichas — cualquier tabla que en móvil deje de ser tabla
   ----------------------------------------------------------------------------
   Una tabla ancha en un móvil no es una tabla: es arrastrar el dedo a los
   lados para leer una cifra y perder de vista de qué fila era. Debajo de
   760 px cada fila pasa a ser una ficha y cada celda una línea
   «etiqueta → valor», sacando el nombre de la columna de `data-col`.
   La tabla de invitados del portal es el caso que más importa: los novios la
   rellenan desde el móvil, sentados en el sofá.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .table-wrap > .tabla-fichas { min-width: 0; }
  .tabla-fichas,
  .tabla-fichas tbody,
  .tabla-fichas tr,
  .tabla-fichas td { display: block; width: auto; min-width: 0; max-width: 100%; }
  .tabla-fichas thead { display: none; }

  .tabla-fichas tbody tr {
    margin-bottom: 10px;
    padding: 6px 14px 12px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: #fff;
  }
  .tabla-fichas tbody tr.row-edited { border-color: var(--mostaza); }

  .tabla-fichas td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--linea);
    text-align: right;
  }
  .tabla-fichas td[data-col]::before {
    content: attr(data-col);
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--texto-suave);
    text-align: left;
  }
  /* Los campos rellenables ocupan lo que les queda, que en un móvil es lo
     único que importa: poder escribir cómodamente. */
  .tabla-fichas td .portal-input,
  .tabla-fichas td select,
  .tabla-fichas td input { flex: 1 1 auto; min-width: 0; text-align: left; }

  /* La primera celda es el nombre: manda, va sola y sin etiqueta. */
  .tabla-fichas td:first-child {
    padding-top: 10px;
    border-top: 0;
  }
  .tabla-fichas td:first-child::before { content: none; }
  .tabla-fichas td.cell-guest { gap: 10px; }

  .tabla-fichas td:last-child:not([data-col]) { justify-content: flex-end; }
  .tabla-fichas td:last-child:not([data-col])::before { content: none; }
  .tabla-fichas .data-table-actions { justify-content: flex-end; }
}

/* Cabecera de la lista de partidas: el conmutador Tabla/Fichas vive aquí, no
   arriba. Controla la lista que tiene debajo, no el panel entero — y arriba
   sobraba: con cinco acciones en la misma fila, el botón principal se caía a
   una segunda línea él solo. */
.partidas-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  padding-top: 4px;
}
.partidas-cab h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ══════════════════════════════════════════════════════════════════════════
   AIRE INTERIOR · el arreglo de fondo
   ----------------------------------------------------------------------------
   `.card` definía fondo, borde, esquina y sombra… y NINGÚN padding. En toda
   la aplicación. Medido: el título «Evolución del gasto» estaba a 1 px del
   borde de su tarjeta, y las cifras del reparto por categoría igual.
   Se veía como un fallo porque lo era.
   Este bloque va al final para ganarle a las reglas antiguas, y usa la escala
   de espaciado en vez de números sueltos: así el día que haya que apretar o
   soltar la interfaz entera se toca en un sitio.
   ══════════════════════════════════════════════════════════════════════════ */
.card {
  padding: var(--e4);
}

/* Las tarjetas con imagen a sangre son la excepción: la foto tiene que tocar
   el borde, y el aire va dentro de sus partes. */
.card.wedding-card,
.card.rincon-card,
.card.export-preview-card {
  padding: 0;
}
.rincon-card > :not(.rincon-card-photo-btn):not(img) { padding-inline: var(--e3); }
.rincon-card > :last-child { margin-bottom: var(--e3); }

/* El título de una tarjeta no necesita margen superior: ya lo da el padding.
   Pero sí necesita separarse de lo que viene debajo. */
.card > .card-title { margin-top: 0; }
.card > .card-title + .card-sub { margin-top: 4px; }
.card > .card-sub { margin-bottom: var(--e3); }
.card > :last-child { margin-bottom: 0; }

/* Piezas que también estaban justas de aire */
.distbar-list { gap: var(--e2); }
.chart-legend { margin-top: var(--e2); }

@media (max-width: 640px) {
  /* En móvil el ancho es oro, pero por debajo de 14px el texto vuelve a
     parecer pegado. Se baja un escalón, no se elimina. */
  .card { padding: var(--e3); }
}

/* Tarjeta de descarga del manual, en Guía AEM */
.manual-descarga {
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin-top: var(--e4);
}
.manual-descarga-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(78, 99, 89, 0.1);
  color: var(--verde);
  font-size: 24px;
}
.manual-descarga-txt { flex: 1; min-width: 0; }
.manual-descarga-txt h4 { margin: 0; font-size: 15px; }
.manual-descarga-txt p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--texto-suave); }
@media (max-width: 700px) {
  .manual-descarga { flex-wrap: wrap; }
  .manual-descarga .btn { flex: 1 1 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTADA DE BODA · monograma cuando no hay foto
   Sin foto solo había un degradado de dos colores. Con cuatro bodas en
   pantalla eran cuatro manchas iguales que no distinguían nada y hacían que
   el listado pareciera a medio hacer. El monograma con las iniciales sobre
   la paleta de la pareja se lee de un vistazo y parece intencionado.
   ══════════════════════════════════════════════════════════════════════════ */
.cover-monograma { position: relative; overflow: hidden; }
.cover-monograma svg { width: 100%; height: 100%; display: block; object-fit: cover; }

/* En las filas pequeñas del panel, el monograma se reduce sin deformarse */
.cover-thumb.cover-monograma svg,
.cover-mini.cover-monograma svg { border-radius: inherit; }