/* ─────────────────────────────────────────────────────────────────────
   PLANIFICADOR · hoja única de la superficie de gestión
   Reglas de `DESIGN-RULES.md` respetadas: tokens OKLCH con fallback,
   escala de espacio no lineal, librería de curvas (cero `ease`), radios
   por familia, más de una elevación, grano, luz fuera de centro,
   `prefers-reduced-motion` y foco visible ≥3:1.

   Los tokens van con prefijo `--pl-` a propósito: esta hoja se carga SOLO
   en `planificador.html`, así que no puede pisar los tokens del Studio ni
   de la invitación, pero tampoco depende de ellos.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* Fallback sRGB — el navegador que no entienda OKLCH se queda aquí */
  --pl-bg: #14110f;
  --pl-bg-raised: #1d1a17;
  --pl-bg-sunken: #0f0d0b;
  --pl-surface: #221e1a;
  --pl-line: #3a342e;
  --pl-line-soft: #2a2521;
  --pl-fg: #f1eee9;
  --pl-fg-mute: #a39a90;
  --pl-accent: #d8994d;
  --pl-ok: #7fbf95;
  --pl-warn: #d9b062;
  --pl-danger: #d98b78;
  --pl-info: #8fa8c8;

  /* Espacio — escala no lineal */
  --pl-2xs: 0.25rem;
  --pl-xs: 0.5rem;
  --pl-s: 0.875rem;
  --pl-m: 1.375rem;
  --pl-l: 2.25rem;
  --pl-xl: 3.75rem;
  --pl-2xl: 6.25rem;

  /* Tipo */
  --pl-display: clamp(1.75rem, 3.4vw, 3rem);
  --pl-h2: clamp(1.25rem, 1.7vw, 1.6rem);
  --pl-body: clamp(0.9375rem, 0.95vw, 1rem);
  --pl-micro: 0.75rem;

  /* Curvas — nada de ease/ease-in-out */
  --pl-e-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --pl-e-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --pl-e-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
  --pl-e-mask: cubic-bezier(0.77, 0, 0.175, 1);

  /* Radios por familia */
  --pl-r-control: 6px;
  --pl-r-surface: 14px;
  --pl-r-media: 2px;

  /* Elevación — multicapa, no una sola sombra repetida */
  --pl-shadow-1: 0 1px 2px oklch(0% 0 0 / 0.28), 0 2px 6px oklch(0% 0 0 / 0.18);
  --pl-shadow-2:
    0 2px 4px oklch(0% 0 0 / 0.3), 0 12px 28px oklch(0% 0 0 / 0.34),
    0 1px 0 oklch(100% 0 0 / 0.04) inset;

  --pl-font:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pl-font-mono:
    ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, monospace;
}

@supports (color: oklch(50% 0.1 90)) {
  :root {
    --pl-bg: oklch(18% 0.006 44);
    --pl-bg-raised: oklch(22.5% 0.008 48);
    --pl-bg-sunken: oklch(14.5% 0.006 42);
    --pl-surface: oklch(24% 0.009 50);
    --pl-line: oklch(35% 0.012 52);
    --pl-line-soft: oklch(28% 0.01 50);
    --pl-fg: oklch(95% 0.008 82);
    --pl-fg-mute: oklch(72% 0.016 68);
    --pl-accent: oklch(76% 0.115 70);
    --pl-ok: oklch(76% 0.085 155);
    --pl-warn: oklch(82% 0.105 85);
    --pl-danger: oklch(74% 0.115 28);
    --pl-info: oklch(78% 0.055 245);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--pl-bg);
  color: var(--pl-fg);
  font-family: var(--pl-font);
  font-size: var(--pl-body);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  /* Luz fuera de centro: arriba-izquierda, nunca radial centrada */
  background-image:
    radial-gradient(
      120% 90% at 12% -10%,
      oklch(58% 0.05 70 / 0.1),
      transparent 60%
    ),
    radial-gradient(
      90% 70% at 92% 6%,
      oklch(55% 0.04 250 / 0.06),
      transparent 58%
    );
  background-attachment: fixed;
}

/* Grano medible — se superpone sin bloquear el puntero */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible {
  outline: 2px solid var(--pl-accent);
  outline-offset: 2px;
  border-radius: var(--pl-r-control);
}

.pl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Estructura ───────────────────────────────────────────────────── */

.pl-app {
  display: grid;
  grid-template-columns: [rail] 15.5rem [body] minmax(0, 1fr);
  grid-template-rows: [top] auto [main] minmax(0, 1fr);
  min-height: 100dvh;
}

.pl-topbar {
  /* `1 / -1` y no `rail / body`: en la plantilla estrecha la línea `body` no
     existe, la declaración se descarta y el elemento cae donde le toque. */
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: [brand] minmax(12rem, 1fr) [switch] minmax(
      14rem,
      1.4fr
    ) [plan] auto;
  gap: var(--pl-s) var(--pl-l);
  align-items: center;
  padding: var(--pl-m) max(var(--pl-l), env(safe-area-inset-left));
  border-bottom: 1px solid var(--pl-line-soft);
  background: linear-gradient(180deg, var(--pl-bg-raised), var(--pl-bg) 92%);
}

.pl-brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pl-brand__name {
  font-size: var(--pl-h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 620;
}
.pl-brand__sub {
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 560;
}

.pl-eventpick {
  display: flex;
  flex-direction: column;
  gap: var(--pl-2xs);
  min-width: 0;
}
/* Envuelve por defecto: en la franja de 46–62 rem, la columna mide ~250 px y el
   contenido ~520 px. Sin envolver, ese contenido desbordaba la PÁGINA (medido:
   66 px de desborde horizontal en 768 px). Envolver sube la cabecera; desbordar
   rompe el ancho de toda la aplicación. */
.pl-eventpick__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-xs);
  align-items: center;
}
.pl-eventpick__label {
  font-size: var(--pl-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-fg-mute);
  font-weight: 560;
}

.pl-planbadge {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-end;
  text-align: right;
}
.pl-planbadge__plan {
  font-size: var(--pl-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pl-accent);
  font-weight: 620;
}
.pl-planbadge__quota {
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
}

/* Cinta de avisos: MISMA corrección de rejilla. Sin ella, en la plantilla
   estrecha perdía la columna y se iba al fondo de la página —medido a 4 770 px
   del principio—, o sea invisible para quien la necesitaba. */
.pl-banner {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-xs) var(--pl-s);
  align-items: baseline;
  padding: var(--pl-s) max(var(--pl-l), env(safe-area-inset-left));
  font-size: var(--pl-micro);
  border-bottom: 1px solid var(--pl-line-soft);
  background: oklch(30% 0.04 85 / 0.25);
  color: var(--pl-fg);
}
.pl-banner[data-nivel="urgente"] {
  background: oklch(32% 0.07 30 / 0.32);
}
.pl-banner[hidden] {
  display: none;
}
.pl-banner__title {
  font-weight: 620;
}
.pl-banner__msg {
  color: var(--pl-fg-mute);
}

/* ── Raíl de secciones ────────────────────────────────────────────── */

.pl-rail {
  grid-column: rail;
  grid-row: main;
  display: flex;
  flex-direction: column;
  gap: var(--pl-2xs);
  padding: var(--pl-m) var(--pl-s);
  border-right: 1px solid var(--pl-line-soft);
  background: var(--pl-bg-sunken);
}

.pl-rail__group {
  margin: var(--pl-m) 0 var(--pl-2xs);
  padding: 0 var(--pl-xs);
  font-size: var(--pl-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pl-fg-mute);
  font-weight: 600;
}
.pl-rail__group:first-child {
  margin-top: 0;
}

.pl-tab {
  appearance: none;
  display: grid;
  grid-template-columns: [icon] 1.1rem [text] minmax(0, 1fr) [count] auto;
  gap: var(--pl-xs);
  align-items: center;
  width: 100%;
  padding: 0.6rem var(--pl-xs);
  border: 1px solid transparent;
  border-radius: var(--pl-r-control);
  background: transparent;
  color: var(--pl-fg-mute);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition:
    color 140ms var(--pl-e-out-quint),
    background-color 140ms var(--pl-e-out-quint),
    border-color 140ms var(--pl-e-out-quint),
    transform 200ms var(--pl-e-out-expo);
}
.pl-tab:hover {
  color: var(--pl-fg);
  background: oklch(28% 0.008 50 / 0.6);
}
.pl-tab[aria-selected="true"] {
  color: var(--pl-fg);
  background: var(--pl-surface);
  border-color: var(--pl-line);
  box-shadow: var(--pl-shadow-1);
  transform: translateX(2px);
}
.pl-tab__count {
  font-size: var(--pl-micro);
  font-variant-numeric: tabular-nums;
  color: var(--pl-fg-mute);
}
.pl-tab__icon {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}
.pl-tab__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Cuerpo ───────────────────────────────────────────────────────── */

.pl-main {
  grid-column: body;
  grid-row: main;
  min-width: 0;
  padding: var(--pl-l) var(--pl-l) var(--pl-2xl);
  overflow-x: hidden;
}

.pl-panel[hidden] {
  display: none;
}

.pl-panel__head {
  display: grid;
  grid-template-columns: [title] minmax(0, 1.7fr) [meta] minmax(0, 1fr);
  gap: var(--pl-m);
  align-items: end;
  margin-bottom: var(--pl-m);
  padding-bottom: var(--pl-s);
  border-bottom: 1px solid var(--pl-line-soft);
}
.pl-panel__title {
  margin: 0;
  font-size: var(--pl-display);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 640;
}
.pl-panel__hint {
  margin: 0.35rem 0 0;
  max-width: 56ch;
  color: var(--pl-fg-mute);
}
.pl-panel__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-xs);
  justify-content: flex-end;
}

/* ── Controles ────────────────────────────────────────────────────── */

.pl-btn {
  appearance: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 560;
  padding: 0.45rem 0.75rem;
  border-radius: var(--pl-r-control);
  border: 1px solid var(--pl-line);
  background: var(--pl-surface);
  color: var(--pl-fg);
  cursor: pointer;
  transition:
    background-color 140ms var(--pl-e-out-quint),
    border-color 140ms var(--pl-e-out-quint),
    transform 180ms var(--pl-e-out-expo),
    color 140ms var(--pl-e-out-quint);
}
.pl-btn:hover {
  background: oklch(29% 0.01 52);
  border-color: var(--pl-accent);
}
.pl-btn:active {
  transform: translateY(1px);
}
.pl-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.pl-btn--primary {
  background: var(--pl-accent);
  border-color: var(--pl-accent);
  color: oklch(20% 0.02 60);
  font-weight: 640;
}
.pl-btn--primary:hover {
  background: oklch(80% 0.115 70);
}
.pl-btn--ghost {
  background: transparent;
  border-color: var(--pl-line-soft);
  color: var(--pl-fg-mute);
}
.pl-btn--ghost:hover {
  color: var(--pl-fg);
  background: oklch(26% 0.008 50);
}
.pl-btn--danger {
  border-color: oklch(45% 0.07 28);
  color: var(--pl-danger);
}
.pl-btn--tiny {
  padding: 0.25rem 0.5rem;
  font-size: var(--pl-micro);
}

.pl-input,
.pl-select,
.pl-textarea {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--pl-r-control);
  border: 1px solid var(--pl-line);
  background: var(--pl-bg-sunken);
  color: var(--pl-fg);
  max-width: 100%;
}
.pl-input--num {
  width: 7.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pl-input:focus-visible,
.pl-select:focus-visible,
.pl-textarea:focus-visible {
  border-color: var(--pl-accent);
}
.pl-textarea {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
}

.pl-field {
  display: flex;
  flex-direction: column;
  gap: var(--pl-2xs);
}
.pl-field__label {
  font-size: var(--pl-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-fg-mute);
  font-weight: 560;
}

/* ── Tablero ──────────────────────────────────────────────────────── */

.pl-board {
  display: grid;
  /* Anchos DELIBERADAMENTE desiguales: «En curso» y «Bloqueado» no merecen
     el mismo espacio que Backlog y Hecho. */
  grid-template-columns:
    [col-backlog] minmax(17rem, 1.5fr)
    [col-semana] minmax(14rem, 1.15fr)
    [col-curso] minmax(13rem, 1fr)
    [col-bloqueado] minmax(13rem, 1fr)
    [col-hecho] minmax(12rem, 0.85fr);
  gap: var(--pl-s);
  overflow-x: auto;
  padding-bottom: var(--pl-s);
  scroll-snap-type: x proximity;
}

.pl-col {
  display: flex;
  flex-direction: column;
  gap: var(--pl-xs);
  min-height: 22rem;
  padding: var(--pl-s) var(--pl-s) var(--pl-m);
  border: 1px solid var(--pl-line-soft);
  border-radius: var(--pl-r-surface);
  background: linear-gradient(180deg, var(--pl-bg-raised), var(--pl-bg) 70%);
  scroll-snap-align: start;
}
.pl-col[data-col="bloqueado"] {
  background: linear-gradient(180deg, oklch(24% 0.035 28), var(--pl-bg) 70%);
}
.pl-col[data-col="hecho"] {
  background: linear-gradient(180deg, oklch(23% 0.028 155), var(--pl-bg) 70%);
}

.pl-col__head {
  display: grid;
  grid-template-columns: [name] minmax(0, 1fr) [count] auto;
  gap: var(--pl-xs);
  align-items: baseline;
  padding-bottom: var(--pl-xs);
  border-bottom: 1px solid var(--pl-line-soft);
}
.pl-col__name {
  font-size: var(--pl-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 620;
  color: var(--pl-fg);
}
.pl-col__count {
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
  font-variant-numeric: tabular-nums;
}
.pl-col__list {
  display: flex;
  flex-direction: column;
  gap: var(--pl-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pl-card {
  display: grid;
  gap: 0.4rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--pl-line);
  border-left: 3px solid var(--pl-line);
  border-radius: var(--pl-r-control);
  background: var(--pl-surface);
  box-shadow: var(--pl-shadow-1);
  transition:
    transform 260ms var(--pl-e-out-expo),
    box-shadow 200ms var(--pl-e-out-quint),
    border-color 160ms var(--pl-e-out-quint);
}
.pl-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pl-shadow-2);
}
.pl-card[data-area="finanzas"] {
  border-left-color: var(--pl-warn);
}
.pl-card[data-area="logistica"] {
  border-left-color: var(--pl-info);
}
.pl-card[data-area="invitados"] {
  border-left-color: var(--pl-ok);
}
.pl-card[data-area="proveedores"] {
  border-left-color: var(--pl-accent);
}
.pl-card[data-area="diseno"] {
  border-left-color: oklch(72% 0.08 320);
}
.pl-card[data-area="papeleo"] {
  border-left-color: oklch(70% 0.05 200);
}
.pl-card[data-area="hospitalidad"] {
  border-left-color: oklch(74% 0.06 20);
}

.pl-card.is-vencida {
  border-color: oklch(48% 0.09 28);
}
.pl-card.is-bloqueada {
  border-style: dashed;
}

.pl-card__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 560;
  line-height: 1.35;
}
.pl-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
}
.pl-card__motivo {
  margin: 0;
  font-size: var(--pl-micro);
  color: var(--pl-danger);
}
.pl-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.pl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--pl-line-soft);
  border-radius: 999px;
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
  background: oklch(26% 0.008 50 / 0.7);
}
.pl-chip--accent {
  color: var(--pl-accent);
  border-color: oklch(44% 0.06 70);
}
.pl-chip--danger {
  color: var(--pl-danger);
  border-color: oklch(44% 0.07 28);
}

/* ── Tablas (checklist y presupuesto) ─────────────────────────────── */

.pl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.pl-table caption {
  text-align: left;
  font-size: var(--pl-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pl-fg-mute);
  padding-bottom: var(--pl-xs);
}
.pl-table th,
.pl-table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--pl-line-soft);
  vertical-align: middle;
}
.pl-table thead th {
  font-size: var(--pl-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-fg-mute);
  font-weight: 600;
  border-bottom-color: var(--pl-line);
}
.pl-table td.num,
.pl-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pl-table tbody tr:hover {
  background: oklch(26% 0.008 50 / 0.5);
}
.pl-table tr.is-alerta td {
  background: oklch(30% 0.05 30 / 0.18);
}

.pl-fase {
  display: flex;
  gap: var(--pl-s);
  align-items: baseline;
  margin: var(--pl-m) 0 var(--pl-xs);
}
.pl-fase__name {
  font-size: var(--pl-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pl-fase__when {
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
}

/* ── Resumen / métricas ───────────────────────────────────────────── */

.pl-metrics {
  display: grid;
  grid-template-columns: [a] minmax(9rem, 1.4fr) [b] minmax(
      7rem,
      1fr
    ) [c] minmax(7rem, 1fr) [d] minmax(7rem, 1fr);
  gap: var(--pl-xs);
  margin-bottom: var(--pl-m);
}
.pl-metric {
  padding: var(--pl-s);
  border: 1px solid var(--pl-line-soft);
  border-radius: var(--pl-r-surface);
  background: var(--pl-bg-raised);
}
.pl-metric--wide {
  grid-column: a / span 1;
}
.pl-metric__label {
  font-size: var(--pl-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-fg-mute);
}
.pl-metric__value {
  font-size: 1.5rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.pl-metric__note {
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
}
.pl-metric[data-tone="danger"] .pl-metric__value {
  color: var(--pl-danger);
}
.pl-metric[data-tone="warn"] .pl-metric__value {
  color: var(--pl-warn);
}
.pl-metric[data-tone="ok"] .pl-metric__value {
  color: var(--pl-ok);
}

.pl-bar {
  height: 6px;
  border-radius: 999px;
  background: oklch(26% 0.008 50);
  overflow: hidden;
}
.pl-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pl-accent), oklch(84% 0.1 78));
  transition: width 520ms var(--pl-e-out-expo);
}

.pl-empty {
  padding: var(--pl-l);
  border: 1px dashed var(--pl-line);
  border-radius: var(--pl-r-surface);
  color: var(--pl-fg-mute);
  max-width: 60ch;
}

.pl-avisos {
  list-style: none;
  margin: 0 0 var(--pl-m);
  padding: 0;
  display: grid;
  gap: var(--pl-2xs);
}
.pl-aviso {
  display: grid;
  grid-template-columns: [dot] 0.6rem [text] minmax(0, 1fr);
  gap: var(--pl-s);
  align-items: baseline;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--pl-line-soft);
  border-left-width: 3px;
  border-radius: var(--pl-r-control);
  background: var(--pl-bg-raised);
  font-size: 0.875rem;
}
.pl-aviso::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--pl-info);
  transform: translateY(0.35rem);
}
.pl-aviso[data-sev="alta"] {
  border-left-color: var(--pl-danger);
}
.pl-aviso[data-sev="alta"]::before {
  background: var(--pl-danger);
}
.pl-aviso[data-sev="media"] {
  border-left-color: var(--pl-warn);
}
.pl-aviso[data-sev="media"]::before {
  background: var(--pl-warn);
}
.pl-aviso__detail {
  color: var(--pl-fg-mute);
  font-size: var(--pl-micro);
}

/* ── Diálogos ─────────────────────────────────────────────────────── */

dialog.pl-dialog {
  width: min(34rem, calc(100vw - 2 * var(--pl-m)));
  padding: 0;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-r-surface);
  background: var(--pl-bg-raised);
  color: var(--pl-fg);
  box-shadow: var(--pl-shadow-2);
}
dialog.pl-dialog::backdrop {
  background: oklch(8% 0.01 40 / 0.72);
}
.pl-dialog__form {
  display: grid;
  gap: var(--pl-s);
  padding: var(--pl-m);
}
.pl-dialog__title {
  margin: 0;
  font-size: var(--pl-h2);
  letter-spacing: -0.01em;
}
.pl-dialog__hint {
  margin: 0;
  color: var(--pl-fg-mute);
  font-size: 0.875rem;
}
.pl-dialog__actions {
  display: flex;
  gap: var(--pl-xs);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.pl-dialog__error {
  color: var(--pl-danger);
  font-size: var(--pl-micro);
  min-height: 1.1em;
}

.pl-plans {
  display: grid;
  gap: var(--pl-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pl-plan {
  display: grid;
  grid-template-columns: [name] minmax(0, 1fr) [price] auto;
  gap: var(--pl-xs) var(--pl-s);
  padding: var(--pl-s);
  border: 1px solid var(--pl-line-soft);
  border-radius: var(--pl-r-surface);
  background: var(--pl-bg-raised);
}
.pl-plan[data-actual="true"] {
  border-color: var(--pl-accent);
  box-shadow: var(--pl-shadow-1);
}
.pl-plan__name {
  font-weight: 600;
}
.pl-plan__price {
  font-variant-numeric: tabular-nums;
  color: var(--pl-accent);
  font-weight: 600;
}
.pl-plan__desc {
  grid-column: name / price;
  color: var(--pl-fg-mute);
  font-size: var(--pl-micro);
}

.pl-note {
  padding: var(--pl-s);
  border: 1px solid var(--pl-line-soft);
  border-left: 3px solid var(--pl-info);
  border-radius: var(--pl-r-control);
  background: var(--pl-bg-raised);
  color: var(--pl-fg-mute);
  font-size: var(--pl-micro);
  max-width: 72ch;
}

/* ── Movimiento reducido ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .pl-card:hover {
    transform: none;
  }
  .pl-tab[aria-selected="true"] {
    transform: none;
  }
}

/* ── Sistema adaptable (web app: cualquier dispositivo) ───────────────
   Se rompe por ANCHO y por ALTO. El alto es el que casi nadie mira y el que
   destroza un móvil en horizontal o un portátil con zoom alto: con 428 px de
   alto, una barra de 206 px y un raíl de 136 px dejan 86 px de contenido.
   ─────────────────────────────────────────────────────────────────── */

/* ≥ 62rem (992 px): raíl lateral fijo. Es el diseño base, sin media query. */

/* ───────────────────────────────────────────────────────────────────
   INVARIANTE DE ORDEN — leer antes de tocar un @media de aquí abajo.

   Este archivo NO tiene las reglas base todas arriba: la «capa de ergonomía»
   está escrita DESPUÉS de estos bloques responsivos, al final del archivo. En
   CSS, a igual especificidad gana la última regla del archivo, así que:

     .pl-undoredo .pl-btn { flex: 0 0 auto }   (aquí)  ← PIERDE
     .pl-undoredo .pl-btn { flex: 1 1 6rem }   (abajo) ← GANA

   Por eso cada anulación responsiva que empata en especificidad lleva el
   prefijo .pl-app: sube una clase y deja de depender del orden. Es un parche
   medido, no un capricho: se detectó midiendo (los botones medían 98 px de
   alto donde el diseño decía 36).

   DEUDA DECLARADA: lo correcto es mover la capa de ergonomía por encima de
   los @media y poder quitar los prefijos .pl-app. Mientras no se haga, todo
   override que empate en especificidad necesita el prefijo o el orden manda.
   ─────────────────────────────────────────────────────────────────── */

/* Envoltorio de las pestañas. No existe por diseño sino por accesibilidad: ARIA
   exige que un rol=tab esté contenido en un rol=tablist, y sin él un lector de
   pantalla no anuncia las secciones como pestañas.

   `display: contents` es DELIBERADO y está medido: con el envoltorio como caja
   flex el raíl subía de 93 a 133 px en 320 px (el chrome pasaba del 53 % al 67 %)
   porque el envoltorio absorbía todo el encogimiento y las pestañas ya no
   envolvían junto a deshacer/rehacer. Con `contents` los botones vuelven a ser
   hijos directos del raíl y el dibujo es idéntico al medido antes. Verificado en
   el árbol de accesibilidad: el rol tablist sigue expuesto. */
.pl-tabs {
  display: contents;
}

/* < 62rem: tableta y ventanas estrechas. Raíl horizontal pegajoso. */
@media (max-width: 62rem) {
  .pl-app {
    grid-template-columns: [rail] minmax(0, 1fr);
    grid-template-rows: [top] auto [rail] auto [main] minmax(0, 1fr);
  }
  .pl-topbar {
    grid-template-columns: [brand] minmax(0, 1fr) [switch] minmax(
        11rem,
        1fr
      ) [plan] auto;
    padding: var(--pl-s) var(--pl-m);
    gap: var(--pl-xs) var(--pl-m);
  }
  .pl-brand__name {
    font-size: 1.2rem;
  }

  .pl-rail {
    grid-column: rail;
    grid-row: rail;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pl-2xs);
    padding: var(--pl-xs) var(--pl-s);
    border-right: 0;
    border-bottom: 1px solid var(--pl-line-soft);
    background: var(--pl-bg-sunken);
    /* Pegajoso: en un móvil, cambiar de sección no puede obligar a subir
       toda la página. La barra superior se va; el conmutador se queda. */
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .pl-rail__group {
    display: none;
  }

  /* Pestañas compactas que ENVUELVEN: siete pestañas de 219 px no caben en un
     móvil, y esconderlas tras un desplazamiento horizontal es esconder seis
     secciones de siete. */
  .pl-tab {
    flex: 0 1 auto;
    width: auto;
    min-height: 2.5rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.8125rem;
  }
  .pl-undoredo {
    margin: 0 0 0 auto;
    padding: 0;
    align-self: center;
    flex: 0 0 auto;
  }
  .pl-undoredo .pl-btn {
    flex: 0 0 auto;
  }

  .pl-main {
    grid-column: rail;
    grid-row: main;
    padding: var(--pl-m) var(--pl-s) var(--pl-xl);
  }
  .pl-panel__head {
    grid-template-columns: [title] minmax(0, 1fr);
  }
  .pl-panel__tools {
    justify-content: flex-start;
  }
  .pl-metrics {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  }
  .pl-metric__value {
    font-size: 1.3rem;
  }
  .pl-cartera {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* < 46rem (736 px): móvil y ventanas con zoom. Todo más compacto. */
@media (max-width: 46rem) {
  .pl-topbar {
    grid-template-columns: [brand] minmax(0, 1fr) [plan] auto;
    padding: var(--pl-2xs) var(--pl-s);
    gap: 0 var(--pl-s);
  }
  /* Se oculta la firma, no los días: «Wedding Studio» ya lo dice el título de
     la página, pero «faltan 400 días» es información de trabajo. */
  .pl-brand__sub:first-child {
    display: none;
  }
  .pl-brand__name {
    font-size: 1.05rem;
  }
  .pl-planbadge__quota {
    display: none;
  }
  .pl-planbadge__plan {
    font-size: 0.6875rem;
  }

  .pl-eventpick {
    grid-column: brand / plan;
    gap: 0;
  }
  .pl-eventpick__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pl-eventpick__row {
    flex-wrap: nowrap;
  }
  .pl-eventpick .pl-select {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Etiquetas cortas. Las largas se ocultan a la vista pero siguen siendo el
     nombre accesible: quien usa lector de pantalla no oye abreviaturas.
     El prefijo .pl-app es necesario: ver «INVARIANTE DE ORDEN» arriba. */
  .pl-app .pl-tab__label,
  .pl-app .pl-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pl-app .pl-tab__corto {
    display: inline;
  }

  .pl-rail {
    padding: var(--pl-2xs) var(--pl-s);
    gap: var(--pl-2xs);
  }
  .pl-tab {
    padding: 0.4rem 0.5rem;
    gap: 0.3rem;
    font-size: var(--pl-micro);
    grid-template-columns: [icon] 1rem [text] auto [count] auto;
  }
  /* Al principio de la tira, no al final: al final gastaban una fila entera
     para dos botones, y en un móvil eso es media pantalla de chrome. Y en una
     sola línea (nowrap): al envolverse, la caja medía 98 px de alto porque sus
     dos botones se apilaban, y arrastraba el raíl entero a 151 px. */
  .pl-app .pl-undoredo {
    order: -1;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
  }
  .pl-app .pl-undoredo .pl-btn {
    flex: 0 0 auto;
    padding: 0.4rem 0.5rem;
  }
  /* La campana va con ellos: es una acción global, no de una sección. */
  .pl-app .pl-notif {
    order: -1;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
  }
  .pl-app .pl-notif .pl-btn {
    flex: 0 0 auto;
    padding: 0.4rem 0.5rem;
  }
  .pl-avisos__barra {
    gap: var(--pl-2xs);
  }
  .pl-avisos__lista {
    max-height: min(46vh, 18rem);
  }
  .pl-aviso__cuando {
    margin-left: 0;
  }

  .pl-panel__title {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
  }
  .pl-panel__hint {
    font-size: 0.875rem;
  }

  .pl-toolbar {
    padding: var(--pl-s);
    gap: var(--pl-xs) var(--pl-s);
  }
  .pl-toolbar__count {
    margin-left: 0;
  }
  .pl-toolbar > .pl-field--inline {
    flex: 1 1 8rem;
  }
  .pl-toolbar .pl-input,
  .pl-toolbar .pl-select {
    min-width: 0;
    width: 100%;
  }

  .pl-metrics {
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  }
  .pl-metric {
    padding: var(--pl-s);
  }

  .pl-fila {
    grid-template-columns: [titulo] minmax(0, 1fr);
  }
  .pl-fila__meta {
    white-space: normal;
  }

  .pl-col {
    min-height: 16rem;
  }
  .pl-check {
    min-height: 2.5rem;
  }
  .pl-btn {
    min-height: 2.5rem;
  }
  .pl-btn--tiny {
    min-height: 2.25rem;
  }

  /* Un diálogo más alto que la pantalla tiene que poder desplazarse: si no, en
     un móvil en horizontal los botones quedan fuera y no hay forma de cerrarlo. */
  dialog.pl-dialog {
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
  }
}

/* < 30rem (480 px): teléfono pequeño. Solo iconos, que siete etiquetas no
   caben y esconderlas tras un desplazamiento es esconder seis secciones. */
@media (max-width: 30rem) {
  .pl-app .pl-tab__corto {
    display: none;
  }
  /* El aviso informativo medía 134 px en 320 px de ancho: con letra de 13 px y
     menos relleno baja a 99 px (medido), y sigue siendo legible. Se probó
     también a poner la marca en una fila y SE REVIRTIÓ: en 320 px envolvía
     igual y añadía 3 px de alto. */
  .pl-banner {
    padding: var(--pl-2xs) var(--pl-s);
    font-size: 0.8125rem;
  }
  /* En 320 px los tres botones se comían el ancho y el selector quedaba en un
     acento «v» sin nombre de boda: la medición decía «una fila» y era verdad,
     pero la fila ya no decía nada. Lo vio la captura, no el número. Se le da
     suelo al selector y la fila puede envolver si de verdad no cabe. */
  .pl-eventpick__row {
    flex-wrap: wrap;
  }
  .pl-eventpick .pl-select {
    flex: 1 1 7rem;
    min-width: 0;
  }
  /* «Boda · En curso · 400 días…» envuelve a dos líneas en 320 px; el estado ya
     está en la propia pastilla del evento, así que la segunda línea se ahorra.
     El separador se oculta CON el texto, o queda un «· 400 días» huérfano: el
     punto medio no es un adorno, separa dos cosas y sin la primera no significa
     nada. Lo destapó el árbol de accesibilidad, no una medición de cajas. */
  .pl-brand__sub #plSub,
  .pl-brand__sub .pl-brand__sep {
    display: none;
  }
  .pl-tab {
    min-width: 2.75rem;
    justify-content: center;
    padding: 0.35rem 0.4rem;
    grid-template-columns: [icon] 1rem [count] auto;
  }
  /* Botones de cabecera compactos: así el selector de evento y los tres
     botones caben en UNA fila en 320 px (medido: si no, la cabecera pasaba de
     88 a 144 px por un salto de línea). */
  .pl-eventpick .pl-btn {
    padding: 0.35rem 0.45rem;
    font-size: var(--pl-micro);
  }
  .pl-metrics {
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  }
  .pl-aviso__acciones .pl-btn {
    flex: 1 1 auto;
  }
  .pl-avisos__acciones {
    flex-direction: column;
  }
  .pl-avisos__acciones .pl-btn {
    width: 100%;
  }
  .pl-toolbar > .pl-field--inline {
    flex: 1 1 100%;
  }
  .pl-table {
    font-size: 0.8125rem;
  }
  .pl-table th,
  .pl-table td {
    padding: 0.4rem 0.35rem;
  }
  /* Acciones apiladas y a lo ancho: en 320 px, tres botones en fila son tres
     botones de 40 px que no se acierta a pulsar. */
  .pl-dialog__actions {
    flex-direction: column;
  }
  .pl-dialog__actions .pl-btn {
    width: 100%;
  }
  .pl-card__actions .pl-btn {
    flex: 1 1 auto;
  }
}

/* < 24rem (384 px): teléfonos pequeños de verdad. El selector de evento se lleva
   una línea entera a todo el ancho. Se probó a compartir línea con los botones:
   en 320 px el selector quedaba en un acento «v» (lo vio la captura, no la
   medición, que decía «una fila» y era cierto) y forzando suelo al selector los
   botones saltaban de línea igual. Una línea propia para «qué boda es» y los
   botones debajo: altura predecible y el nombre completo a la vista. */
@media (max-width: 24rem) {
  .pl-eventpick {
    grid-column: 1 / -1;
  }
  .pl-eventpick .pl-select {
    flex: 1 1 100%;
  }
  .pl-eventpick .pl-btn {
    flex: 1 1 auto;
  }
}

/* Pantallas BAJAS (móvil en horizontal, portátil con zoom, ventana apaisada).
   Aquí no sobra ancho: sobra alto, y el chrome se come el contenido. */
@media (max-height: 32rem) {
  .pl-topbar {
    padding: var(--pl-2xs) var(--pl-s);
    gap: 0 var(--pl-s);
  }
  .pl-brand__sub:first-child {
    display: none;
  }
  .pl-banner {
    padding: var(--pl-2xs) var(--pl-s);
  }
  .pl-rail {
    padding: var(--pl-2xs) var(--pl-s);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .pl-tab {
    min-height: 2.25rem;
    padding: 0.3rem 0.5rem;
  }
  .pl-main {
    padding: var(--pl-s) var(--pl-s) var(--pl-l);
  }
  .pl-panel__head {
    margin-bottom: var(--pl-s);
    padding-bottom: var(--pl-2xs);
  }
  .pl-panel__title {
    font-size: 1.5rem;
  }
  dialog.pl-dialog {
    max-height: calc(100dvh - 0.75rem);
    overflow-y: auto;
  }
}

/* Apaisado y bajo: hay ancho de sobra, así que el raíl va en UNA fila que se
   desplaza en lugar de envolver en tres. */
@media (max-height: 32rem) and (orientation: landscape) {
  .pl-rail {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .pl-tab {
    flex: 0 0 auto;
  }
  /* Sólo icono y contador: con las etiquetas cortas el contenido del raíl medía
     ~755 px en 685 px de ancho y la SÉPTIMA pestaña quedaba fuera, escondida
     tras el desplazamiento. Es exactamente el defecto que la clienta describió
     como «al dar clic en cualquier opción de la izquierda no pasa nada».
     Comprobado con y sin la campana: añadirla fue lo que lo destapó. La etiqueta
     larga sigue en el DOM, así que el nombre accesible no cambia. */
  .pl-app .pl-tab__corto {
    display: none;
  }
  .pl-app .pl-tab {
    min-width: 2.75rem;
    justify-content: center;
    padding: 0.35rem 0.4rem;
    grid-template-columns: [icon] 1rem [count] auto;
  }
}

/* Aviso de arranque fallido. Es visible por defecto y el JS lo oculta al
   arrancar: si el JavaScript no llega a ejecutarse, lo que se ve es una
   instrucción, no una página muerta sin explicación. */
.pl-fallo {
  margin: var(--pl-m);
  padding: var(--pl-m);
  max-width: 60ch;
  border: 1px solid oklch(46% 0.08 28);
  border-left-width: 4px;
  border-radius: var(--pl-surface);
  background: oklch(24% 0.03 28);
  color: var(--pl-fg);
  box-shadow: var(--pl-shadow-2);
}
.pl-fallo[hidden] {
  display: none;
}
.pl-fallo__title {
  margin: 0 0 var(--pl-2xs);
  font-size: var(--pl-h2);
  letter-spacing: -0.01em;
}
.pl-fallo__msg {
  margin: 0;
  color: var(--pl-fg-mute);
  font-size: 0.875rem;
}
.pl-fallo__detalle {
  display: block;
  margin-top: var(--pl-2xs);
  font-size: var(--pl-micro);
  color: var(--pl-danger);
}

/* ═══════════════════════════════════════════════════════════════════
   CAPA DE ERGONOMÍA
   Todo lo de aquí abajo existe porque la interfaz obligaba a hacer algo
   incómodo: buscar a ojo, no saber si se guardó, no poder deshacer, no
   poder tocar un botón con el dedo o perder el foco al mover una tarjeta.
   ═══════════════════════════════════════════════════════════════════ */

/* El aviso flotante respeta la zona segura del dispositivo (muesca, barra de
   gestos): un aviso bajo la barra de inicio es un aviso que no se lee. */
.pl-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pl-m) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  gap: var(--pl-s);
  align-items: baseline;
  flex-wrap: wrap;
  max-width: min(46rem, calc(100vw - 2 * var(--pl-m)));
  padding: 0.7rem var(--pl-m);
  border: 1px solid var(--pl-line);
  border-left: 3px solid var(--pl-accent);
  border-radius: var(--pl-r-surface);
  background: var(--pl-surface);
  color: var(--pl-fg);
  font-size: 0.875rem;
  box-shadow: var(--pl-shadow-2);
  animation: pl-toast-in 260ms var(--pl-e-out-expo) both;
}
.pl-toast[hidden] {
  display: none;
}
.pl-toast[data-tono="alerta"] {
  border-left-color: var(--pl-danger);
}
.pl-toast__accion {
  appearance: none;
  font: inherit;
  font-weight: 620;
  font-size: 0.8125rem;
  background: none;
  border: 0;
  padding: 0.15rem 0.2rem;
  color: var(--pl-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@keyframes pl-toast-in {
  from {
    transform: translateX(-50%) translateY(0.6rem);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* Barra de filtros del tablero */
.pl-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-s) var(--pl-m);
  align-items: flex-end;
  margin-bottom: var(--pl-m);
  padding: var(--pl-s) var(--pl-m);
  border: 1px solid var(--pl-line-soft);
  border-radius: var(--pl-r-surface);
  background: var(--pl-bg-raised);
}
.pl-field--inline {
  flex-direction: column;
  gap: var(--pl-2xs);
}
.pl-field--inline .pl-input,
.pl-field--inline .pl-select {
  min-width: 9rem;
}
.pl-check {
  display: inline-flex;
  align-items: center;
  gap: var(--pl-xs);
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
  cursor: pointer;
  min-height: 2rem;
}
.pl-check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--pl-accent);
}
.pl-toolbar__count {
  margin: 0 0 0 auto;
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
  font-variant-numeric: tabular-nums;
}

/* Deshacer / rehacer, al final del raíl */
.pl-undoredo {
  margin-top: 0;
  padding-top: var(--pl-m);
  display: flex;
  gap: var(--pl-2xs);
  flex-wrap: wrap;
}
.pl-undoredo .pl-btn {
  flex: 1 1 6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

/* Icono de botón (deshacer/rehacer). El texto de al lado es el nombre
   accesible; en pantallas estrechas se oculta a la vista, no al lector. */
.pl-btn__icono {
  display: block;
  width: 1rem;
  height: 1rem;
}
.pl-btn__icono svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Etiqueta corta: solo se usa en pantallas estrechas. La larga sigue en el DOM,
   así que quien navega con lector de pantalla oye el nombre completo. */
.pl-tab__corto {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   AVISOS
   La campana y su centro. El motor que decide QUÉ avisar está en
   `planner-notifications.js`; aquí solo se pinta lo que él devuelve.
   ═══════════════════════════════════════════════════════════════════ */

/* La campana vive en el raíl, junto a deshacer y rehacer, porque ahí ya hay
   sitio y ya está siempre a la vista. Ponerla en la cabecera habría subido el
   chrome en móvil, que es justo lo que se midió y se corrigió. */
.pl-notif {
  margin-top: auto;
  padding-top: var(--pl-m);
  display: flex;
  gap: var(--pl-2xs);
  flex-wrap: wrap;
}
.pl-notif .pl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
/* Contador superpuesto: es un adorno absoluto, así que no puede mover nada del
   layout por tener dos o tres cifras. */
.pl-notif__cuenta {
  position: absolute;
  top: -0.3rem;
  right: -0.2rem;
  min-width: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--pl-danger);
  color: oklch(98% 0.01 20);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--pl-shadow-1);
}
.pl-notif__cuenta[hidden] {
  display: none;
}
.pl-notif .pl-btn[data-hay="true"] {
  color: var(--pl-fg);
}

/* ── El diálogo ─────────────────────────────────────────────────── */
dialog.pl-dialog--avisos {
  max-width: min(46rem, calc(100vw - 1.5rem));
}
.pl-avisos__barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-xs) var(--pl-s);
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--pl-2xs);
  border-bottom: 1px solid var(--pl-line-soft);
}
.pl-avisos__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-2xs);
}
.pl-chipbtn {
  appearance: none;
  font: inherit;
  font-size: var(--pl-micro);
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--pl-line);
  border-radius: 999px;
  background: var(--pl-bg-raised);
  color: var(--pl-fg-mute);
  cursor: pointer;
}
.pl-chipbtn[aria-pressed="true"] {
  border-color: var(--pl-accent);
  background: var(--pl-accent);
  color: var(--pl-bg);
}
.pl-chipbtn:focus-visible {
  outline: 2px solid var(--pl-accent);
  outline-offset: 2px;
}
.pl-avisos__cuenta {
  margin: 0;
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
  font-variant-numeric: tabular-nums;
}

/* Columnas EXPLÍCITAS de ancho completo. Con `display: grid` y sin plantilla, la
   columna automática se dimensiona por el contenido mínimo: la tarjeta salía con
   el texto apilado en una tira de dos palabras y los botones encima. Medido no
   salía —todas las cajas estaban dentro— y se vio en la captura. */
.pl-avisos__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pl-xs);
  max-height: min(52vh, 30rem);
  overflow-y: auto;
  padding: 0.2rem;
  margin: 0;
}
.pl-avisos__vacio {
  margin: 0;
  padding: var(--pl-m);
  border: 1px dashed var(--pl-line);
  border-radius: var(--pl-r-surface);
  color: var(--pl-fg-mute);
  font-size: 0.875rem;
}

/* Cada aviso: la gravedad se ve en el filete Y se lee en el chip. Nunca solo por
   color: quien no distingue el rojo del ámbar tiene que poder entenderlo. */
.pl-aviso {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pl-2xs);
  padding: var(--pl-s) var(--pl-s) var(--pl-s) var(--pl-m);
  border: 1px solid var(--pl-line);
  border-left: 4px solid var(--pl-line);
  border-radius: var(--pl-r-surface);
  background: var(--pl-surface);
  box-shadow: var(--pl-shadow-1);
}
.pl-aviso[data-sev="alta"] {
  border-left-color: var(--pl-danger);
}
.pl-aviso[data-sev="media"] {
  border-left-color: var(--pl-warn);
}
.pl-aviso[data-sev="baja"] {
  border-left-color: var(--pl-info);
}
.pl-aviso[data-sev="info"] {
  border-left-color: var(--pl-line);
}
.pl-aviso[data-leido="true"] {
  background: var(--pl-bg-raised);
}
.pl-aviso[data-leido="true"] .pl-aviso__titulo {
  font-weight: 520;
}
.pl-aviso[data-resuelto="true"] {
  opacity: 0.72;
}
.pl-aviso__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-2xs) var(--pl-xs);
  align-items: baseline;
}
.pl-aviso__titulo {
  margin: 0;
  font-size: var(--pl-h3);
  font-weight: 620;
  letter-spacing: -0.01em;
}
.pl-aviso__cuando {
  margin-left: auto;
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
  font-variant-numeric: tabular-nums;
}
.pl-aviso__cuerpo {
  margin: 0;
  font-size: 0.875rem;
  color: var(--pl-fg-mute);
}
.pl-aviso__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-2xs);
  margin-top: var(--pl-2xs);
}

/* ── Preferencias ───────────────────────────────────────────────── */
.pl-avisos__prefs {
  border-top: 1px solid var(--pl-line-soft);
  padding-top: var(--pl-xs);
}
.pl-avisos__prefs summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.3rem 0;
}
.pl-avisos__tipos {
  display: grid;
  gap: 0.1rem;
  margin: var(--pl-2xs) 0 var(--pl-xs);
}
.pl-avisos__tipos .pl-check {
  min-height: 2rem;
}
.pl-avisos__tipos .pl-check[data-fijo="true"] {
  color: var(--pl-fg-mute);
}
.pl-field__label {
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
}
.pl-avisos__posponer {
  max-width: 12rem;
  margin-bottom: var(--pl-xs);
}

/* Cartera: una tarjeta por boda, con su semáforo */
.pl-cartera {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: [a] minmax(20rem, 1.6fr) [b] minmax(18rem, 1fr);
  gap: var(--pl-s);
}
.pl-cartera__item {
  display: grid;
  gap: var(--pl-xs);
  padding: var(--pl-m);
  border: 1px solid var(--pl-line);
  border-left: 4px solid var(--pl-line);
  border-radius: var(--pl-r-surface);
  background: var(--pl-bg-raised);
  box-shadow: var(--pl-shadow-1);
}
.pl-cartera__item[data-activo="true"] {
  border-color: var(--pl-accent);
}
.pl-cartera__item[data-riesgo="alto"] {
  border-left-color: var(--pl-danger);
}
.pl-cartera__item[data-riesgo="medio"] {
  border-left-color: var(--pl-warn);
}
.pl-cartera__item[data-riesgo="bajo"] {
  border-left-color: var(--pl-ok);
}
.pl-cartera__item[data-inactivo="true"] {
  opacity: 0.72;
}
.pl-cartera__top {
  display: grid;
  grid-template-columns: [name] minmax(0, 1fr) [days] auto;
  gap: var(--pl-xs);
  align-items: baseline;
}
.pl-cartera__name {
  font-size: var(--pl-h2);
  font-weight: 620;
  letter-spacing: -0.01em;
}
.pl-cartera__dias {
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
  font-variant-numeric: tabular-nums;
}
.pl-cartera__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
}
.pl-cartera__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-xs);
  margin-top: var(--pl-2xs);
}

/* Enfoque: tres listas que responden «¿qué hago ahora?» */
.pl-enfoque {
  display: grid;
  gap: var(--pl-m);
}
.pl-enfoque__bloque {
  padding: var(--pl-m);
  border: 1px solid var(--pl-line-soft);
  border-radius: var(--pl-r-surface);
  background: var(--pl-bg-raised);
}
.pl-enfoque__titulo {
  margin: 0 0 var(--pl-xs);
  font-size: var(--pl-h2);
  letter-spacing: -0.01em;
  display: flex;
  gap: var(--pl-xs);
  align-items: baseline;
}
.pl-enfoque__n {
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
  font-variant-numeric: tabular-nums;
}
.pl-enfoque__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pl-2xs);
}
.pl-fila {
  display: grid;
  grid-template-columns: [titulo] minmax(0, 1fr) [meta] auto [acciones] auto;
  gap: var(--pl-xs) var(--pl-s);
  align-items: center;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--pl-line-soft);
  border-radius: var(--pl-r-control);
  background: var(--pl-surface);
}
.pl-fila__meta {
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
  white-space: nowrap;
}
.pl-fila__acciones {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.pl-fila__nota {
  grid-column: titulo / acciones;
  font-size: var(--pl-micro);
  color: var(--pl-danger);
  margin: 0;
}
.pl-enfoque__ok {
  margin: 0;
  font-size: 0.875rem;
  color: var(--pl-ok);
}

/* Revisión del plan: huecos que cuestan caro */
.pl-chequeos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pl-2xs);
}
.pl-chequeo {
  display: grid;
  grid-template-columns: [mark] 1.1rem [text] minmax(0, 1fr);
  gap: var(--pl-xs);
  align-items: baseline;
  font-size: 0.875rem;
  color: var(--pl-fg);
}
.pl-chequeo::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  font-size: var(--pl-micro);
  font-weight: 700;
  background: oklch(34% 0.06 28);
  color: var(--pl-danger);
  transform: translateY(0.12rem);
}
.pl-chequeo[data-ok="true"]::before {
  content: "✓";
  background: oklch(31% 0.05 155);
  color: var(--pl-ok);
}
.pl-chequeo__detalle {
  display: block;
  color: var(--pl-fg-mute);
  font-size: var(--pl-micro);
}

/* Dos campos por fila en diálogos, con aire entre medias */
.pl-dialog__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pl-s);
}
@media (max-width: 40rem) {
  .pl-dialog__grid {
    grid-template-columns: 1fr;
  }
}

kbd {
  font-family: var(--pl-font-mono);
  font-size: var(--pl-micro);
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--pl-line);
  border-bottom-width: 2px;
  border-radius: var(--pl-r-control);
  background: var(--pl-bg-sunken);
  color: var(--pl-fg);
}

/* Tablas anchas: se desplazan en su propio carril, no rompen el panel */
.pl-tablewrap {
  overflow-x: auto;
}

/* Arrastrar y soltar: complemento del botón, nunca la única vía */
.pl-card[draggable="true"] {
  cursor: grab;
}
.pl-card.pl-arrastrando {
  opacity: 0.45;
}
.pl-col.pl-sobre {
  border-color: var(--pl-accent);
  background: linear-gradient(
    180deg,
    oklch(30% 0.03 70 / 0.55),
    var(--pl-bg) 70%
  );
}
.pl-col.pl-cola.ok {
  border-color: var(--pl-ok);
}
.pl-col.pl-cola.no {
  border-color: var(--pl-danger);
}

/* Foco visible dentro de la tarjeta: se ve cuál vas a mover */
.pl-card:focus-within {
  outline: 2px solid var(--pl-accent);
  outline-offset: 2px;
}

/* Columna vacía: dice algo en vez de parecer rota */
.pl-col__vacio {
  margin: 0;
  padding: var(--pl-s) var(--pl-xs);
  border: 1px dashed var(--pl-line-soft);
  border-radius: var(--pl-r-control);
  font-size: var(--pl-micro);
  color: var(--pl-fg-mute);
  text-align: left;
}

/* Aviso de exceso de trabajo en curso */
.pl-aviso[data-sev="wip"] {
  border-left-color: var(--pl-info);
}
.pl-aviso[data-sev="wip"]::before {
  background: var(--pl-info);
}

/* ── Ergonomía táctil: objetivos de 44 px y nada que dependa del hover ── */
@media (pointer: coarse) {
  .pl-btn {
    min-height: 2.75rem;
    padding: 0.6rem 0.9rem;
  }
  .pl-btn--tiny {
    min-height: 2.5rem;
  }
  .pl-input,
  .pl-select,
  .pl-textarea {
    min-height: 2.75rem;
  }
  .pl-check {
    min-height: 2.75rem;
  }
  .pl-tab {
    padding: 0.7rem 0.75rem;
  }
  .pl-card__actions {
    opacity: 1;
  }
}

/* En pantallas estrechas, las tarjetas de cartera y las filas de enfoque se
   apilan: una rejilla de dos columnas en 360 px no es una rejilla, es un lío. */
@media (max-width: 46rem) {
  .pl-fila {
    grid-template-columns: [titulo] minmax(0, 1fr);
  }
  .pl-fila__meta {
    white-space: normal;
  }
  .pl-toolbar__count {
    margin-left: 0;
  }
}