/* Escenas de Gastos y de Exportar. Calcan src/index.css: el editor en
   lista agrupada (.form-group, .form-row, .form-receipt), el .panel y su
   hoja del móvil (.panel--sheet), .expense-table, la lista por meses, la
   .detail-sheet y el .modal de exportar, con la escala del marco (--t-*).
   Todo va bajo .xp (la ventana o el iPhone de estas escenas). */

.xp { --xp-blue: #6F90D9; --xp-teal: #45BFAE; --xp-orange: #D98A50; }
[data-theme="light"] .xp { --xp-blue: #2563eb; --xp-teal: #0d9488; --xp-orange: #c2410c; }

/* ── El editor: listas agrupadas de iOS (FormRows.jsx) ────────────────── */
/* Cada grupo, una tarjeta; cada dato, una fila con el rótulo a la izquierda
   y el valor a la derecha, sin caja, y entre filas el filete fino que no
   llega a los bordes. En la ventana las filas van algo más bajas que los
   44 px de la app para que el panel quepa entero en la escena. */
.xp { --xp-row-h: 34px; --xp-gap: 10px; --xp-pad: 14px; }
.phone.xp { --xp-row-h: 44px; --xp-gap: 14px; --xp-pad: 16px; }
/* El tipo, un segmentado a todo el ancho (.form-kind) */
.xp .xp-kind { display: flex; width: 100%; margin-bottom: var(--xp-gap); }
.phone .xp-kind { height: 36px; }
.xp .xp-kind button { flex: 1; justify-content: center; padding: 0 8px; white-space: nowrap; }
.xp-group { margin-bottom: var(--xp-gap); padding: 0 var(--xp-pad); border-radius: var(--radius-lg); background: var(--surface); }
.xp-group > * + * { border-top: 0.5px solid var(--border); }
.xp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--xp-row-h); }
.xp-row-label { display: flex; flex-direction: column; gap: 1px; flex: 0 1 auto; max-width: 60%; padding: 6px 0; font-size: var(--t-base); line-height: 1.25; color: var(--text); }
/* La «i» sigue a la última palabra del rótulo, también si baja de línea */
.xp-row-name .info-anchor { margin-left: 6px; vertical-align: -1px; }
.xp-row-control { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 1 1 0; min-width: 0; }
.xp-input {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 100%; min-width: 0; padding: 4px 0; border: none; border-radius: 0; outline: none;
  background: none; color: var(--text);
  font: inherit; font-size: var(--t-base); line-height: 1.4; text-align: right; font-variant-numeric: tabular-nums;
}
.xp-input::placeholder { color: var(--text-subtle); }
/* Como en iOS, el campo de una fila no se rodea al escribir */
.xp .xp-input[data-focus] { box-shadow: none; }
/* La fecha, en su cápsula gris */
.xp-date { padding: 3px 12px; border-radius: var(--radius-pill); background: var(--control-fill-hover); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
/* Lo que entra o sale (ROW_REVEAL): abre o cierra su hueco y se funde */
.xp-slot { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--spring-moderate), opacity var(--spring-moderate), border-color var(--spring-moderate); }
.xp-slot > * { min-height: 0; overflow: hidden; }
.xp-slot--away { grid-template-rows: 0fr; opacity: 0; border-top-color: transparent !important; transition-duration: 120ms; }
.xp-slot > .xp-group { margin-bottom: 0; }
/* La «i» de los años se abre por fuera de su fila */
.xp-row:has(.info-anchor), .xp-slot:has(.info-anchor) > * { overflow: visible; }
.xp-row-name .info-pop { top: calc(100% + 8px); }
.xp-form > .xp-slot { margin-bottom: var(--xp-gap); transition: grid-template-rows var(--spring-moderate), opacity var(--spring-moderate), margin var(--spring-moderate); }
.xp-form > .xp-slot--away { margin-bottom: 0; }

/* El pie, como un recibo (FormReceipt): las partes con el punto de su
   color y, tras un filete, el total grande */
.xp-group.xp-receipt { padding-top: 4px; padding-bottom: 2px; }
.xp-group.xp-receipt > * + * { border-top: none; }
.xp-receipt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: calc(var(--xp-row-h) * 0.66); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.xp-receipt-row[hidden] { display: none; }
.xp-receipt-label { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); }
.xp-receipt-value { color: var(--text); white-space: nowrap; }
.xp-group.xp-receipt > .xp-receipt-row--total { min-height: calc(var(--xp-row-h) * 1.3); margin-top: 4px; padding: 6px 0; border-top: 0.5px solid var(--border); font-size: var(--t-base); color: var(--text); }
.xp-group.xp-receipt--solo { padding-top: 0; }
.xp-group.xp-receipt--solo > .xp-receipt-row--total { margin-top: 0; border-top: none; }
.xp-receipt-total strong { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; }
.xp-tone { flex: none; width: 7px; height: 7px; border-radius: var(--radius-pill); }
.xp-tone--expense, .xp-tone--irpf { background: var(--red); }
.xp-tone--vat { background: var(--yellow); }

/* El desplegable (SelectDropdown): el menú cuelga de su botón */
.xp .a-dd-wrap { position: relative; }
.xp .a-dd.xp-dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
.xp .a-dd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp .a-dd-chev { display: inline-flex; color: var(--text-subtle); transition: transform var(--spring-moderate); }
.xp .a-dd[data-open] .a-dd-chev { transform: rotate(180deg); }
.xp .a-dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 100%;
  padding: 4px; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--float-ring);
  transform-origin: top center; transform: translateY(-4px) scale(0.97); opacity: 0; pointer-events: none;
  transition: transform var(--spring-moderate-exit), opacity var(--spring-moderate-exit);
}
.xp .a-dd-menu.open { transform: none; opacity: 1; pointer-events: auto; transition: transform var(--spring-moderate), opacity var(--spring-moderate); }
.xp .a-dd-menu[data-side="end"] { left: auto; right: 0; transform-origin: top right; }
.xp .a-dd-item { position: relative; z-index: 1; padding: 5px 10px; border-radius: var(--radius-sm); font-size: var(--t-base); color: var(--text); white-space: nowrap; cursor: pointer; }
.xp .a-dd-item.selected { background: var(--surface-hover); font-weight: 600; }
.xp .a-dd-item[data-hover]:not(.selected) { background: color-mix(in srgb, var(--surface-hover) 60%, transparent); }
/* En una fila, el valor en gris con su flecha, sin caja (como en Ajustes) */
.xp .xp-row-control .a-dd.xp-dd {
  -webkit-appearance: none; appearance: none; width: auto; gap: 6px; padding: 4px 0;
  border: none; background: none; box-shadow: none; color: var(--text-muted);
  font: inherit; font-size: var(--t-base); line-height: 1.4; font-variant-numeric: tabular-nums;
  transition: color var(--spring-fast);
}
.xp .xp-row-control .a-dd.xp-dd:is(:hover, [data-hover], [data-open]) { color: var(--text); }
/* Medido contra su panel o su diálogo (popoverSide), el valor de una fila
   cae en el tercio derecho: el menú se alinea por la derecha */
.xp .xp-row-control .a-dd-menu { left: auto; right: 0; min-width: 120px; transform-origin: top right; }
.xp .xp-row-control .a-dd-menu[data-up] { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }
/* En el iPhone, el menú del sistema (useCoarsePointer): filas altas con
   filete y una ✓ en lo elegido, sin el gris */
.phone .xp-row-control .a-dd-menu { min-width: 150px; padding: 0; overflow: hidden; }
.phone .xp-row-control .a-dd-item { display: flex; align-items: center; gap: 6px; padding: 11px 16px 11px 12px; border-radius: 0; background: none; font-weight: 400; }
.phone .xp-row-control .a-dd-item + .a-dd-item { border-top: 0.5px solid var(--border); }
.phone .xp-row-control .a-dd-item::before { content: ""; flex: none; width: 16px; font-weight: 600; }
.phone .xp-row-control .a-dd-item.selected::before { content: "✓"; }
.phone .xp-row-control .fluid-highlight { display: none; }

/* Botones de pie: Cancelar en gris, la acción principal con el verde de
   reposo de la app */
.xp-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.xp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 16px; border: none; border-radius: var(--radius-pill);
  background: var(--control-fill); color: var(--text-muted);
  font: inherit; font-size: var(--t-sm); font-weight: 500; line-height: 1.4; white-space: nowrap; cursor: pointer;
  transition: color var(--spring-fast), background-color var(--spring-fast);
}
.xp-btn:is(:hover, [data-hover]) { color: var(--text); background: var(--control-fill-hover); }
.xp-btn--primary { padding: 7px 20px; color: var(--brand); font-weight: 600; }
.xp-btn--primary:is(:hover, [data-hover]) { color: var(--brand); }
.xp-close, .xp-mclose { padding: 4px 8px; border: none; background: none; color: var(--text-muted); font: inherit; font-size: var(--t-base); cursor: pointer; transition: color var(--spring-fast); }
.xp-close:is(:hover, [data-hover]), .xp-mclose:is(:hover, [data-hover]) { color: var(--text); }

/* ── El panel de escritorio, sobre un velo ────────────────────────────── */
.xp-scrim {
  position: absolute; inset: 0; z-index: 3;
  /* Con el radio del marco: el desenfoque de detrás no lo recorta el
     overflow redondeado del iPhone y asomaban las esquinas */
  border-radius: inherit;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: opacity var(--spring-slow);
}
.xp-scrim.is-out { opacity: 0; pointer-events: none; transition: opacity var(--spring-slow-exit); }
/* Con el fondo de la página, y las tarjetas de los grupos encima */
.xp-panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 4;
  width: clamp(300px, 62%, 400px); padding: 16px 18px 0;
  background: var(--bg);
  border-radius: 26px 0 0 26px;
  transition: transform 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.xp-panel.is-out { transform: translateX(104%); transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1); }
.xp-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.xp-panel-title { font-size: var(--t-base); font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.xp-head-filler { display: inline-flex; }

/* ── La tabla de gastos ───────────────────────────────────────────────── */
.xp-table { width: calc(100% + 18px); margin: 0 -9px; border-collapse: collapse; font-size: var(--t-base); -webkit-user-select: none; user-select: none; }
.xp-table :is(th, td) { width: 1px; white-space: nowrap; }
.xp-table :is(th, td).sup { width: 100%; max-width: 0; }
.xp-table th { padding: 6px 9px; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); }
.xp-table th.num, .xp-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.xp-table td { padding: 8px 9px; height: 52px; color: var(--text); }
.xp-table td.nr { color: var(--text-muted); }
.xp-table td.more { color: var(--text-subtle); opacity: 0; transition: opacity var(--spring-fast); }
.xp-table td.more svg { display: block; }
.xp-table tbody tr:not(.xp-sep) {
  background-image: linear-gradient(color-mix(in srgb, var(--border) 55%, transparent), color-mix(in srgb, var(--border) 55%, transparent));
  background-size: calc(100% - 18px) 1px; background-position: center bottom; background-repeat: no-repeat;
}
.xp-table tbody tr:last-child { background-image: none; }
.xp-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.xp-name > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.xp-tags { display: flex; gap: 2px; margin-top: 2px; }
/* Una categoría (.tag-chip): píldora gris con su punto de color. De
   colores, dieciocho categorías eran un arcoíris */
.xp-chip { --tag: var(--text-subtle); display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px; border-radius: var(--radius-pill); background: var(--control-fill); color: var(--text-muted); font-size: var(--t-xs); font-weight: 500; line-height: 1.4; white-space: nowrap; }
.xp-chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tag); }
.xp-chip--blue { --tag: var(--xp-blue); }
.xp-chip--teal { --tag: var(--xp-teal); }
.xp-chip--orange { --tag: var(--xp-orange); }
.xp-rate { display: inline-block; margin-right: 5px; padding: 1px 4px; border-radius: var(--radius-xs); font-size: var(--t-xs); font-weight: 600; color: var(--yellow); background: var(--yellow-dim); vertical-align: 1px; }
.xp-sub { margin-top: 1px; font-size: var(--t-xs); color: var(--text-muted); }
.xp-amort-badge { flex: none; padding: 1px 4px; border-radius: var(--radius-sm); background: var(--control-fill-hover); color: var(--text-muted); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.01em; }
.xp-sep td { height: auto; padding: 10px 9px 2px; font-size: var(--t-xs); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); opacity: 0.7; }
.xp-amortized td { opacity: 0.55; }
.xp-filler td { color: transparent; }

/* El año (YearSelector): ‹ 2026 › */
.xp-years { display: inline-flex; align-items: center; gap: 1px; padding: 3px; border-radius: var(--radius); background: var(--control-fill); }
.xp-ystep { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; border: none; border-radius: 7px; background: none; color: var(--text-muted); cursor: pointer; transition: color var(--spring-fast), background-color var(--spring-fast); }
.xp-ystep:is(:hover, [data-hover]):not(:disabled) { color: var(--text); background: var(--surface); }
.xp-ystep:disabled { filter: opacity(0.3); cursor: default; }
.xp-ylabel { padding: 0 8px; font-size: var(--t-base); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }

/* ── El iPhone: lista por meses, hoja del formulario y ficha ──────────── */
/* MobileRecordGroups: el mes como sección gris y sus filas en una tarjeta,
   con el filete fino que empieza en el relleno */
.xp-groups { display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }
.xp-month { display: flex; flex-direction: column; gap: 8px; }
.xp-month-title { padding: 0 16px; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.xp-group-card { border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.xp-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.xp-card + .xp-card::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--border); }
.xp-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.xp-card-title { font-size: var(--t-base); font-weight: 600; line-height: 1.25; color: var(--text); text-wrap: balance; }
.xp-card-sub { font-size: var(--t-xs); color: var(--text-subtle); }
.xp-card-sub > span { white-space: nowrap; }
.xp-card-amount { flex: none; font-size: var(--t-base); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }

/* La hoja (panel--sheet) con su barra (sheet-nav), que se queda arriba al
   desplazarla. El hueco de abajo es el del iPhone que pasa por debajo del
   suelo de la escena. */
.xp-sheet {
  position: absolute; left: 0; right: 0; top: 54px; bottom: 0; z-index: 4;
  padding: 0 16px 80px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  background: var(--bg);
  border-radius: 26px 26px 0 0;
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.xp-sheet::-webkit-scrollbar { display: none; }
.xp-sheet.is-out { transform: translateY(104%); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); }
.xp-grabber { position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: var(--radius-pill); background: var(--border-strong); }
.xp-sheet-nav { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 0 -16px 12px; padding: 20px 16px 10px; background: var(--bg); }
.xp-sheet-title { font-size: var(--t-base); font-weight: 600; text-align: center; white-space: nowrap; color: var(--text); }
.xp-sheet-btn { justify-self: start; padding: 4px 0; border: none; background: none; font: inherit; font-size: var(--t-base); color: var(--text-muted); white-space: nowrap; cursor: pointer; transition: color var(--spring-fast); }
.xp-sheet-btn--primary { justify-self: end; color: var(--brand); font-weight: 600; }

/* La ficha (detail-sheet): sobre el fondo de la página, sus cifras en una
   tarjeta y las acciones agrupadas, con «Eliminar» en la suya */
.xp-detail {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 8px 16px 92px;
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.xp-detail.is-out { transform: translateY(104%); transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); }
.xp-detail ~ .xp-scrim, .xp-scrim:has(~ .xp-detail) { z-index: 5; }
.xp-dhandle { display: block; width: 36px; height: 4px; margin: 4px auto 14px; border-radius: 2px; background: var(--border-strong); }
.xp-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.xp-dtitle { font-size: var(--t-base); font-weight: 600; line-height: 1.25; color: var(--text); }
.xp-dsub { margin-top: 2px; font-size: var(--t-sm); color: var(--text-muted); }
.xp-dclose { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--surface-hover); color: var(--text-muted); font: inherit; font-size: var(--t-sm); cursor: pointer; }
.xp-drows { margin-bottom: 16px; padding: 0 16px; border-radius: var(--radius-lg); background: var(--surface); }
.xp-drow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0; }
.xp-drow + .xp-drow { border-top: 0.5px solid var(--border); }
.xp-drow-label { font-size: var(--t-base); color: var(--text); }
.xp-drow-value { font-size: var(--t-base); color: var(--text); font-variant-numeric: tabular-nums; }
.xp-drow-value.is-bold { font-weight: 700; }
.xp-dtags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.xp-dactions { margin-bottom: 12px; border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.xp-daction { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 16px; border: none; border-radius: 0; background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-base); cursor: pointer; transition: background-color var(--spring-fast); }
.xp-daction + .xp-daction::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; border-top: 0.5px solid var(--border); }
.xp-daction--danger { border-radius: var(--radius-lg); color: var(--red); }

/* ── Exportar: el Resumen de fondo y la ventana ───────────────────────── */
.xp-head-tools { display: flex; align-items: center; gap: 8px; }
.xp-period { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--control-fill); }
.xp-period > span { padding: 0 11px; height: 24px; line-height: 24px; border-radius: var(--radius-pill); font-size: var(--t-sm); font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.xp-period > span.is-on { background: var(--surface-hover); color: var(--text); font-weight: 600; }
.xp-export-btn { display: inline-flex; align-items: center; padding: 0 6px; border: none; background: none; color: var(--text-muted); cursor: pointer; transition: color var(--spring-fast); }
.xp-export-btn:is(:hover, [data-hover]) { color: var(--text); }
.xp-mperiod { margin: -4px 0 14px; }
.xp-mperiod .xp-period > span { height: 30px; line-height: 30px; padding: 0 13px; }
.xp-kpis { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
.phone .xp-kpis { grid-template-columns: minmax(0, 1fr); }
.xp-kpi { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); }
.xp-kpi-label { font-size: var(--t-sm); font-weight: 600; color: var(--text-muted); }
/* El rendimiento neto, en verde: cada cifra con su color */
.xp-kpi-fig { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--green); }
.xp-kpi .a-bar { height: 10px; margin-bottom: 6px; }
/* Relleno: el gráfico del año, solo barras */
.xp-kpi--chart { grid-column: 1 / -1; }
.xp-chart { display: flex; align-items: flex-end; gap: 10px; height: 92px; }
.xp-chart > span { flex: 1; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--text) 9%, transparent); }

.xp-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  border-radius: inherit;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity var(--spring-moderate);
}
.xp-overlay.is-out { opacity: 0; pointer-events: none; transition: opacity var(--spring-moderate-exit); }
/* Sobre el fondo de la página, como los editores (.export-modal) */
.xp-modal {
  width: 100%; max-width: 340px; padding: 22px 24px;
  background: var(--bg); border-radius: 26px;
  transition: transform 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.phone .xp-modal { padding: 22px 20px; }
.xp-overlay.is-out .xp-modal { transform: translateY(16px) scale(0.97); transition: transform 0.16s cubic-bezier(0.4, 0, 1, 1); }
.phone .xp-overlay { padding-bottom: 76px; }
.xp-mhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.xp-mtitle { font-size: var(--t-base); font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.xp-mfields { display: flex; flex-direction: column; gap: 12px; }
.xp-mfields > .xp-group { margin-bottom: 0; }
/* El formato, un segmentado a todo el ancho con los tres a partes iguales */
.xp .xp-seg { display: flex; width: 100%; height: 32px; }
.phone .xp-seg { height: 36px; }
.xp .xp-seg button { flex: 1; justify-content: center; padding: 0; font-size: var(--t-sm); }
/* Lo que se dice del formato, al pie del grupo */
.xp .xp-hint { margin: 0; padding: 0 var(--xp-pad); font-size: var(--t-xs); line-height: 1.4; color: var(--text-subtle); }
.xp .xp-hint[hidden] { display: none; }
.xp-overlay .xp-actions { margin-top: 24px; }
/* La ventana baja 40 px por debajo de la escena: el centro, en lo que se ve */
.win .xp-overlay { padding-bottom: 56px; }
.xp-btn svg { flex: none; }

/* El fichero que sale al exportar, sobre el suelo de la escena */
.xp-root { position: absolute; inset: 0; }
.xp-files { position: absolute; left: 20px; bottom: 18px; z-index: 30; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--spring-slow-exit), transform var(--spring-slow-exit); }
.xp-files.is-on { opacity: 1; transform: none; transition: opacity var(--spring-slow), transform var(--spring-slow); }
.xp-file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--sat-shadow); font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
.xp-file-ico { display: inline-flex; color: var(--text-muted); }