@import url("fonts.8a9f7cc4de58.css");

/* =============================================================================
   pyAdventureMap — sistema visual «cuaderno de papel»

   Principio rector (sin cambios): el color saturado pertenece a los datos —los
   dias y las categorias—, no a la marca. Lo que cambia es el material sobre el
   que se apoyan: antes papel blanco de oficina, ahora papel rosa de cuaderno.
   El cromo sigue sin competir con el mapa porque es rosa palido y sin
   saturacion; los dias siguen siendo lo unico que canta.

   Tinta ciruela en vez de negro. Un gris azulado sobre blanco es una hoja de
   calculo; una tinta calida sobre papel tenido es un cuaderno. Ningun color de
   esta hoja es neutro: todos los grises estan girados hacia el rosa.

   La firma es la cinta washi: cada dia va pegado a la pagina con una tira de
   celo de su color, translucida y con los bordes rasgados. El color del dia
   —que ya era el dato— se convierte en el objeto que sujeta la hoja.
   ========================================================================== */

:root {
  /* Papel y paneles. `--paper` es rosa de verdad, no crema: es la diferencia
     entre un cuaderno y un informe. */
  --paper: #fbedea;
  --panel: #fffaf8;
  --panel-sunk: #f5dfda;

  /* Tinta ciruela. Contrastes sobre `--panel`: 11.9 / 5.7 / 3.8. */
  --ink: #4a2b33;
  --ink-2: #7e5a62;
  --ink-3: #9a7078;

  --rule: #f0d9d4;
  --rule-strong: #ddb9b3;

  /* Rosa de marca en dos intensidades: `--rose` para lo decorativo (cintas,
     puntos, rieles) y `--rose-deep` para todo lo que lleve texto encima o sea
     texto. El claro no llega a 4.5:1 y por eso no se usa nunca para leer. */
  --rose: #d06d89;
  --rose-deep: #b4486a;
  --rose-soft: #fbe4ea;
  --on-rose: #fff7f9;

  /* Semaforo. El rojo se va a caqui y el ambar a miel para no confundirse con
     el rosa de marca: un error tiene que distinguirse de un boton. */
  --signal: #b34a32;
  --signal-soft: #fbe7e0;
  --warn: #8f6318;
  --warn-soft: #faf0dc;
  --ok: #4a7a55;
  --ok-soft: #e6f1e7;

  --font-ui: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-narrow: "Nunito", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Fraunces es variable: SOFT redondea las terminaciones y WONK activa las
     formas alternativas. `opsz` hay que darlo a mano en cada tamaño porque
     `font-variation-settings` desactiva el ajuste optico automatico. */
  --fr: "SOFT" 100, "WONK" 1;

  --r-sm: 7px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Sombras tenidas de ciruela. Una sombra gris sobre papel rosa se ve sucia. */
  --shadow-pop: 0 2px 6px rgb(122 66 80 / 0.10), 0 14px 34px rgb(122 66 80 / 0.16);
  --shadow-card: 0 1px 2px rgb(122 66 80 / 0.06), 0 2px 8px rgb(122 66 80 / 0.05);
  --edge: 0 2px 0 var(--rule-strong);

  --map-width: 42%;
  --col-width: 296px;
  --backlog-width: 250px;
  --header-h: 56px;

  /* Grano de papel. Va como capa de fondo del `body`, no como superposicion,
     para que jamas se interponga entre el usuario y un clic. Solo se ve en el
     papel: los paneles llevan su propio fondo y quedan lisos. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* El tema no depende de `prefers-color-scheme` directamente: un script en el
   `<head>` resuelve la preferencia guardada (auto / claro / oscuro) y escribe
   `data-theme` antes del primer pintado. Asi el usuario puede forzar uno de los
   dos sin que el sistema le lleve la contraria, y no hay parpadeo.

   La noche no es negra: es ciruela oscura, como una habitacion con la lampara
   encendida. Un gris neutro aqui romperia la continuidad con el modo claro. */
:root[data-theme="dark"] {
  --paper: #221a1f;
  --panel: #2e2329;
  --panel-sunk: #1a1418;
  --ink: #f5e7e9;
  --ink-2: #c4a8ae;
  --ink-3: #9a8087;
  --rule: #3f2f37;
  --rule-strong: #584249;

  --rose: #e896ac;
  --rose-deep: #ee96af;
  --rose-soft: #3b262e;
  --on-rose: #2a1d22;

  --signal: #e8836a;
  --signal-soft: #3a231d;
  --warn: #d9a656;
  --warn-soft: #35291a;
  --ok: #7cb98a;
  --ok-soft: #1c2c20;

  --shadow-pop: 0 2px 6px rgb(0 0 0 / 0.34), 0 16px 38px rgb(0 0 0 / 0.46);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.22), 0 2px 8px rgb(0 0 0 / 0.18);
  --edge: 0 2px 0 rgb(0 0 0 / 0.32);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--grain);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Los titulos son la voz de la casa: Fraunces con SOFT al maximo. `opsz` baja
   segun el tamaño para que un h3 no herede el trazo de un titular. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
}
h1 { font-size: 31px; font-variation-settings: "opsz" 96, var(--fr); letter-spacing: -0.012em; }
h2 { font-size: 22px; font-variation-settings: "opsz" 48, var(--fr); letter-spacing: -0.008em; }
h3 { font-size: 16px; font-variation-settings: "opsz" 24, var(--fr); }
h4 { font-size: 14.5px; font-variation-settings: "opsz" 18, var(--fr); }
p { margin: 0 0 0.75em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--rose-deep);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--rose-soft); color: var(--ink); }

/* La tira de dias se desplaza en horizontal y su barra esta siempre a la
   vista: si se deja la del sistema, es lo unico gris de la pantalla. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border: 3px solid transparent;
  border-radius: var(--r-pill);
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--rose); background-clip: content-box; }

/* --- Atomos ---------------------------------------------------------------- */

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-narrow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rose-deep);
}

.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.tiny { font-size: 12px; }
.nowrap { white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 8px; }
.row-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; }
.hidden { display: none !important; }

.rule { height: 1px; background: var(--rule); border: 0; margin: 16px 0; }

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

/* --- Botones --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  /* El canto inferior es lo que hace que el boton parezca un objeto que se
     hunde al pulsarlo en vez de un rectangulo que cambia de color. */
  box-shadow: var(--edge);
  transition: background 0.12s ease, border-color 0.12s ease,
              box-shadow 0.1s ease, transform 0.1s ease;
}
.btn:hover { background: var(--rose-soft); border-color: var(--rose); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.btn-primary {
  background: var(--rose-deep);
  border-color: var(--rose-deep);
  color: var(--on-rose);
  box-shadow: 0 2px 0 rgb(122 40 66 / 0.45);
}
.btn-primary:hover { background: var(--rose); border-color: var(--rose); }
.btn-primary:active { box-shadow: none; }

.btn-ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--rose-soft); border-color: var(--rule); }
.btn-ghost:active { transform: translateY(1px); }

.btn-danger { color: var(--signal); border-color: var(--rule-strong); }
.btn-danger:hover { background: var(--signal-soft); border-color: var(--signal); }

.btn-sm { padding: 3px 8px; font-size: 12px; }
.btn-icon { padding: 5px; min-width: 28px; justify-content: center; }

/* --- Etiquetas de estado ---------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-narrow);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.tag-ok { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.tag-warn { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.tag-alert { color: var(--signal); border-color: var(--signal); background: var(--signal-soft); }

/* Selector de tema: tres estados, y solo se ve el icono del que esta activo. */
.theme-toggle { position: relative; width: 30px; }
/* Nunito no trae ◐ ☀ ☾ y el navegador cae en la primera fuente que los tenga,
   que rara vez es la que uno quiere. Se piden explicitamente. */
.theme-toggle span {
  display: none;
  line-height: 1;
  font-family: "Segoe UI Symbol", "Apple Symbols", system-ui, sans-serif;
  font-size: 15px;
}
:root[data-theme-pref="auto"] .theme-toggle .icon-auto,
:root[data-theme-pref="light"] .theme-toggle .icon-light,
:root[data-theme-pref="dark"] .theme-toggle .icon-dark { display: inline; }

/* --- Cabecera de la aplicacion ---------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--header-h);
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 30, var(--fr);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand span { color: var(--rose-deep); font-weight: 500; }

.trip-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.trip-title strong { font-size: 15px; font-weight: 600; }
.trip-title .dates {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Navegacion por secciones: pestañas de fichero, no botones */
.tabs { display: flex; gap: 2px; align-items: stretch; height: var(--header-h); }
.tab {
  display: flex;
  align-items: center;
  padding: 0 13px;
  border-bottom: 3px solid transparent;
  border-radius: var(--r-md) var(--r-md) 0 0;
  font-family: var(--font-narrow);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.12s ease, background 0.12s ease;
}
.tab:hover { color: var(--ink); background: var(--rose-soft); }
.tab[aria-current="page"] { color: var(--rose-deep); border-bottom-color: var(--rose-deep); }

/* Desplegable de acciones: <details> nativo, sin el triangulo del navegador. */
.actions-menu { position: relative; }
.actions-menu > summary { list-style: none; }
.actions-menu > summary::-webkit-details-marker { display: none; }

.menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 186px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
}
.menu-panel form { margin: 0; }
.menu-panel hr { margin: 4px 0; border: 0; border-top: 1px solid var(--rule); }
.menu-panel a,
.menu-panel button {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-panel a:hover,
.menu-panel button:hover { background: var(--panel-sunk); }
.menu-panel .is-danger { color: var(--signal); }

/* --- Contenedores ------------------------------------------------------------ */

.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 20px 64px; }
.wrap-narrow { max-width: 640px; margin: 0 auto; padding: 32px 20px 64px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}

/* --- Vista de planificacion: filmstrip + mapa -------------------------------- */

.plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--map-width);
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}
.plan.map-collapsed { grid-template-columns: minmax(0, 1fr) 0; }

.plan-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* `min-height: 0` es imprescindible: por defecto un elemento de grid vale
     `auto` y crece con su contenido en vez de ceñirse a la pista, y entonces la
     tira de dias desborda la pantalla en vez de tener scroll propio. */
  min-height: 0;
  border-right: 1px solid var(--rule);
}

.plan-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}
.segmented a,
.segmented button {
  padding: 4px 11px;
  border: 0;
  border-right: 1px solid var(--rule);
  background: var(--panel);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.segmented > *:last-child { border-right: 0; }
.segmented .is-on { background: var(--rose-deep); color: var(--on-rose); font-weight: 700; }

/* El filmstrip: los dias en horizontal, como una tira de billetes */
.filmstrip {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 0;
  overflow: auto;
  scroll-snap-type: x proximity;
  background: var(--panel-sunk);
  /* La columna de backlog va fija a la izquierda y tapa 250 px de la tira. Sin
     este relleno, el anclaje de scroll dejaria el primer dia justo debajo. */
  scroll-padding-left: var(--backlog-width);
  /* Los tramos se cargan despues y cambian el alto de las columnas; sin esto
     Chrome reajusta el scroll horizontal por su cuenta. */
  overflow-anchor: none;
}

.day-col {
  flex: 0 0 var(--col-width);
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--rule);
  background: var(--paper);
  scroll-snap-align: start;
}
.day-col.is-today { background: var(--panel); box-shadow: inset 0 0 0 1px var(--rose-soft); }

/* LA FIRMA — la cinta washi.
   Cada dia esta pegado a la pagina con una tira de celo de su color. Es
   translucida (`opacity`) para que se vea el papel por debajo, lleva la trama
   diagonal de la fibra y los dos extremos rasgados con `clip-path`: una cinta
   cortada a mano nunca acaba recta. El color del dia ya era el dato; aqui deja
   de ser una linea de la interfaz y pasa a ser el objeto que sujeta la hoja. */
.day-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 24px 12px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.day-head::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 54%;
  height: 12px;
  /* Centrada, estrecha y torcida. Una banda de borde a borde se lee como una
     regla de cabecera; un trozo corto y ladeado se lee como celo. El grado y
     pico de inclinacion es todo lo que separa una cosa de la otra. */
  transform: translateX(-50%) rotate(-1.1deg);
  background:
    repeating-linear-gradient(114deg, rgb(255 255 255 / 0.34) 0 1px, transparent 1px 4px),
    var(--day-color, var(--rule-strong));
  opacity: 0.75;
  box-shadow: 0 1px 2px rgb(74 43 51 / 0.13);
  clip-path: polygon(
    0% 0%, 100% 0%,
    calc(100% - 3px) 22%, 100% 45%, calc(100% - 4px) 68%, 100% 88%, calc(100% - 2px) 100%,
    2px 100%, 0% 86%, 4px 64%, 0% 42%, 3px 20%
  );
}
/* Ninguna mano pega dos cintas con el mismo angulo. */
.day-col:nth-of-type(even) .day-head::before {
  transform: translateX(-50%) rotate(1.3deg);
}
.day-head-top { display: flex; align-items: baseline; gap: 8px; }
.day-num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40, var(--fr);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.day-dow {
  font-family: var(--font-narrow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.day-label {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.day-actions { display: flex; gap: 2px; margin-left: auto; }

.day-body {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  min-height: 80px;
}

/* Casilla de seleccion del dia. Discreta hasta que se usa: no debe competir
   con la fecha, pero tiene que estar siempre a mano. */
.day-pick { display: flex; align-items: center; }
.day-pick input {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--rose-deep);
  opacity: 0.35;
  transition: opacity 0.12s ease;
}
.day-col:hover .day-pick input,
.day-pick input:checked,
.day-pick input:focus-visible { opacity: 1; }

.day-col.is-picked { background: var(--ok-soft); }
.day-col.is-picked .day-head { box-shadow: inset 0 0 0 2px var(--ok); }

/* Añadir va pegado al ultimo bloque, no anclado al fondo de la columna. */
.add-block {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.add-block:hover { border-color: var(--ink-3); color: var(--ink); background: var(--panel); }

/* --- Barra de acciones en lote ---------------------------------------------- */

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 3px 0 0 var(--ok);
}
.bulk-bar[hidden] { display: none; }
.bulk-sep { width: 1px; height: 18px; background: var(--rule); }

.swatches { display: flex; align-items: center; gap: 4px; }
.swatch {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgb(0 0 0 / 0.15);
  border-radius: 50%;
  cursor: pointer;
}
.swatch:hover { transform: scale(1.18); }
.swatch:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 2px; }

/* Herramientas de la tarjeta: aparecen al pasar por encima. */
.block-tools {
  margin-left: auto;
  display: flex;
  gap: 1px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.block:hover .block-tools,
.block:focus-within .block-tools { opacity: 1; }
.block-tools .btn { padding: 2px 4px; min-width: 20px; font-size: 11px; }

/* En pantallas tactiles no hay `hover`: si se ocultan, no hay forma de llegar. */
@media (hover: none) {
  .block-tools { opacity: 1; }
  .day-pick input { opacity: 1; }
}
.day-body.drop-active {
  background: var(--ok-soft);
  outline: 2px dashed var(--ok);
  outline-offset: -6px;
}

.day-foot {
  padding: 6px 10px 10px;
  border-top: 1px dashed var(--rule);
}

/* --- Tarjeta de bloque -------------------------------------------------------- */

.block {
  position: relative;
  display: block;
  width: 100%;
  padding: 9px 11px 9px 12px;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--block-color, var(--rule-strong));
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  cursor: grab;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.block:hover { border-color: var(--rose); box-shadow: var(--shadow-pop); transform: translateY(-1px); }
.block:active { cursor: grabbing; transform: none; }
.block.is-cancelled { opacity: 0.5; }
.block.is-cancelled .block-title { text-decoration: line-through; }
.block.is-highlighted { border-color: var(--rose-deep); box-shadow: 0 0 0 2px var(--rose-deep); }

.block-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.block-time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}
.block-icon { font-size: 13px; line-height: 1; }
.block-title {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.block-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.block-code {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 0 4px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--panel-sunk);
}

/* --- El conector de tramo ----------------------------------------------------
   El hueco entre dos bloques no es espacio en blanco: es el trayecto. Antes era
   un raíl de puntos tecnicos; ahora es un pespunte, la costura que une dos
   parches del cuaderno. Sigue diciendo lo mismo —el tiempo real y si llegas o
   no— y sigue poniendose en caqui cuando no da tiempo.
   -------------------------------------------------------------------------- */

.leg {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 3px 0 3px 20px;
  font-size: 11px;
  color: var(--ink-3);
}
.leg::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -1px;
  bottom: -1px;
  width: 0;
  border-left: 2px dotted var(--rose);
  opacity: 0.75;
}
.leg-mode { font-size: 11px; line-height: 1; }
.leg-time { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.01em; }
.leg-slack { color: var(--ink-3); }

.leg.is-tight { color: var(--signal); font-weight: 500; }
.leg.is-tight::before { border-left-color: var(--signal); border-left-style: solid; opacity: 1; }

.blocks-list { display: flex; flex-direction: column; }
.blocks-list .block + .block { margin-top: 0; }
.blocks-list > .block:not(:last-child) { margin-bottom: 0; }
.blocks-list .sortable-gap { height: 8px; }

/* Estado de arrastre */
.sortable-ghost { opacity: 0.35; }
.sortable-drag { box-shadow: var(--shadow-pop); }

/* --- Modo horario ----------------------------------------------------------------
   Cada bloque ocupa su franja real. Lo que cruza la medianoche aparece en los dos
   dias, pegado al borde que continua y con una flecha.
   ------------------------------------------------------------------------------ */

/* En modo horario la tira entera comparte un unico scroll vertical: si cada
   columna se desplazara por su cuenta, las horas dejarian de cuadrar entre
   columnas y esto ya no seria un horario. */
.filmstrip.is-calendar { align-items: flex-start; }
/* Las columnas se dimensionan por su contenido: si se estiran a la altura del
   contenedor, la rejilla queda dentro y la tira deja de tener nada que
   desplazar. */
.filmstrip.is-calendar .day-col { flex: 0 0 var(--col-width); align-self: flex-start; min-height: 100%; }
.filmstrip.is-calendar .backlog-col { align-self: flex-start; min-height: 100%; }

.day-body.is-calendar { --gutter: 30px; padding: 0; overflow: visible; flex: none; }

.grid-body { position: relative; }

.hour-rule {
  position: absolute;
  left: var(--gutter);
  right: 6px;
  border-top: 1px solid var(--rule);
  pointer-events: none;
}
.hour-rule::before {
  content: attr(data-hour);
  position: absolute;
  left: -26px;
  top: -7px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

.grid-block {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 6px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--block-color, var(--rule-strong));
  border-radius: var(--r-sm);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: left;
}
.grid-block:hover { box-shadow: var(--shadow-pop); z-index: 2; }
.grid-block.is-cancelled { opacity: 0.5; }

/* Cuadrado por el lado que continua: la forma dice que no acaba aqui. */
.grid-block.from-before { border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: dashed; }
.grid-block.to-after { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-style: dashed; }

.grid-time { font-size: 10.5px; color: var(--ink-2); line-height: 1.2; }
.grid-title { font-size: 12px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.grid-arrow { position: absolute; right: 4px; top: 2px; font-size: 8px; color: var(--ink-3); }
.grid-arrow.bottom { top: auto; bottom: 2px; }

/* Fila de todo el dia: alojamientos y lo que no tiene hora. */
.grid-allday {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 6px 6px var(--gutter);
  border-bottom: 1px solid var(--rule-strong);
  background: var(--panel-sunk);
}
.allday-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--block-color, var(--rule-strong));
  border-radius: var(--r-sm);
  background: var(--panel);
  color: inherit;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  text-align: left;
}
.allday-chip.from-before { border-left-style: dashed; }
.allday-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Tira de continuacion en modo agenda ------------------------------------------ */

.continuation {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 6px;
  padding: 4px 8px;
  border: 1px dashed var(--rule-strong);
  border-left: 3px solid var(--block-color, var(--rule-strong));
  border-radius: var(--r-sm);
  background: var(--panel-sunk);
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  text-align: left;
}
.continuation:hover { background: var(--panel); color: var(--ink); }
.continuation-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continuation-note { flex: none; font-size: 10.5px; color: var(--ink-3); }

/* --- Repaso de sitios, una carta cada vez -----------------------------------
   La pantalla entera para una sola decision. El mini-mapa de cada candidato es
   lo que hace que la decision sea de un vistazo: los cuatro nombres se parecen
   y los cuatro barrios no.
   --------------------------------------------------------------------------- */

.review {
  /* Ancho medido, no redondeado: cuatro candidatos de 160 px con 8 de hueco
     piden 664, mas los 52 de padding de la tarjeta. Por debajo de esto la
     cuarta opcion cae a una segunda fila y deja de leerse como un abanico. */
  max-width: 764px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

.review-progress { margin-bottom: 22px; }

.review-card {
  padding: 24px 26px 20px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

.review-head { margin-bottom: 20px; }
.review-head h1 { margin: 2px 0 6px; font-size: 27px; }

.review-context { margin: 0; color: var(--ink-2); font-size: 13px; }
.review-context strong { font-weight: 700; color: var(--ink); }

.review-options {
  display: grid;
  /* `auto-fill` y no `auto-fit`: con un solo candidato, `auto-fit` colapsa las
     pistas vacias y estira la carta a todo el ancho, y entonces el mini-mapa
     —que mide lo que mide— deja media tarjeta en blanco. */
  grid-template-columns: repeat(auto-fill, 160px);
  justify-content: start;
  gap: 8px;
}
.review-options form { margin: 0; display: contents; }

.review-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 0 0 11px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--panel-sunk);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.review-option:hover {
  border-color: var(--rose);
  box-shadow: var(--shadow-pop);
  transform: translateY(-2px);
}

/* Ventana recortada sobre las teselas. Las imagenes van en bruto y colocadas
   por el servidor: no hace falta Leaflet para enseñar un barrio. */
.review-map {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--panel-sunk);
}
.review-map img { position: absolute; max-width: none; }

.review-pin {
  position: absolute;
  width: 13px;
  height: 13px;
  margin: -13px 0 0 -6.5px;
  border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg);
  background: var(--rose-deep);
  border: 2px solid var(--panel);
  box-shadow: 0 1px 3px rgb(74 43 51 / 0.5);
}

.review-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--r-sm);
  background: var(--rule);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
}
.review-option .review-key { position: absolute; top: 7px; right: 7px; }
.review-option:hover .review-key { background: var(--rose-deep); color: var(--on-rose); }

.review-option-name { padding: 9px 11px 0; font-size: 13.5px; font-weight: 700; }
.review-option-address {
  padding: 0 11px;
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.35;
}

.review-none { margin: 0 0 10px; color: var(--ink-2); font-size: 13.5px; }

.review-search { position: relative; margin-top: 18px; }
.review-search .search-results {
  position: static;
  margin-top: 6px;
  max-height: 216px;
  overflow-y: auto;
}

.review-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--rule);
}
.review-foot form { margin: 0; }
.review-foot .review-key { margin-left: 4px; }

.review-done {
  max-width: 460px;
  margin: 8vh auto 0;
  padding: 34px 30px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.review-done h1 { margin: 2px 0 10px; }
.review-done form { margin-top: 14px; }

/* --- Completitud de la ficha -----------------------------------------------
   La casilla es la ultima palabra de la persona; el aviso de lo que falta es
   solo un consejo del programa y desaparece en cuanto se marca. Una ficha dada
   por buena se distingue por el color del papel, no por tachar el titulo: eso
   ya significa «cancelado» en esta interfaz.
   --------------------------------------------------------------------------- */

.block-check { display: inline-flex; align-items: center; flex: none; cursor: pointer; }
.block-check input {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--ok);
  opacity: 0.4;
  transition: opacity 0.12s ease;
}
.block:hover .block-check input,
.block-check input:checked,
.block-check input:focus-visible { opacity: 1; }

.block.is-ready { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 28%, var(--rule)); }
.block.is-ready .block-title { color: var(--ink-2); }

/* Aviso de hueco. Va en el tono miel de «esto no es un error, es que aun no
   esta»: un rojo aqui convertiria una tarea pendiente en un fallo. */
.gap-hint {
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.gap-hint.is-suggestion { background: var(--rose-soft); color: var(--rose-deep); }

/* --- Panel de «que falta» ---------------------------------------------------- */

.ready-meter {
  padding: 11px 13px;
  margin-bottom: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--panel-sunk);
}

.suggest-card {
  padding: 12px 13px;
  margin-bottom: 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

.suggest-options { display: flex; flex-direction: column; gap: 5px; }
.suggest-options form { margin: 0; }

.suggest-option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--panel-sunk);
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.suggest-option:hover { background: var(--rose-soft); border-color: var(--rose); }

.suggest-name { font-weight: 600; }
.suggest-address {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-3);
  font-size: 11.5px;
}
.suggest-score { flex: none; color: var(--ink-3); font-size: 11px; }

.gap-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.gap-row:hover { background: var(--rose-soft); }
.gap-icon { flex: none; }
.gap-title { flex: 1; min-width: 0; }
/* El motivo va debajo del titulo y en cursiva: es la voz de la app explicandose,
   no otro dato de la ficha. */
.gap-why {
  display: block;
  margin-top: 1px;
  color: var(--ink-3);
  font-size: 11px;
  font-style: italic;
  line-height: 1.35;
}
.gap-what { flex: none; color: var(--warn); font-size: 11px; font-weight: 700; }

/* --- Participantes ------------------------------------------------------------
   Casi todo el viaje lo hace el grupo entero: si cada tarjeta llevara las tres
   iniciales, el dato dejaria de verse justo donde importa, que es en los pocos
   bloques que hace uno solo. Por eso la pastilla solo sale cuando el bloque
   tiene participantes marcados, y por eso son puntos de color y no texto: el
   nombre completo solo aparece cuando la columna da de si.
   --------------------------------------------------------------------------- */

.who-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 1.5px var(--panel);
}

.who-chips {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px 1px 5px;
  border-radius: var(--r-pill);
  background: var(--panel-sunk);
  color: var(--ink-2);
  font-size: 10.5px;
  line-height: 1.5;
}
.who-chips .who-dot + .who-dot { margin-left: -4px; }
.who-names { margin-left: 3px; white-space: nowrap; }

/* En columnas estrechas se cae al punto de color y se quita el nombre. */
@media (max-width: 1200px) {
  .who-names { display: none; }
}

.segmented [data-who-pick] { display: inline-flex; align-items: center; gap: 5px; }
.segmented .is-on .who-dot { box-shadow: 0 0 0 1.5px var(--on-rose); }

/* Oculto por el filtro. Se marca con una clase y no con `hidden` porque hay
   elementos que ya usan `hidden` para otra cosa. */
.filtered-out { display: none !important; }

/* Mientras hay filtro, el papel avisa de que no se esta viendo todo. */
.plan-side.is-who-filtered .day-body { background-image:
  repeating-linear-gradient(135deg, transparent 0 9px, rgb(176 72 106 / 0.035) 9px 18px); }

/* --- Columna de backlog -------------------------------------------------------- */

.backlog-col {
  flex: 0 0 var(--backlog-width);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule-strong);
  background: var(--panel-sunk);
  position: sticky;
  left: 0;
  z-index: 5;
}
.backlog-head {
  position: relative;
  padding: 24px 12px 10px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}
/* El backlog tambien va pegado con cinta, pero sin color: todavia no es de
   ningun dia. */
.backlog-head::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 54%;
  height: 12px;
  transform: translateX(-50%) rotate(0.9deg);
  background:
    repeating-linear-gradient(114deg, rgb(255 255 255 / 0.32) 0 1px, transparent 1px 4px),
    var(--rule-strong);
  opacity: 0.7;
  box-shadow: 0 1px 2px rgb(74 43 51 / 0.1);
  clip-path: polygon(
    0% 0%, 100% 0%,
    calc(100% - 3px) 22%, 100% 45%, calc(100% - 4px) 68%, 100% 88%, calc(100% - 2px) 100%,
    2px 100%, 0% 86%, 4px 64%, 0% 42%, 3px 20%
  );
}

.pin {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 9px;
  margin-bottom: 6px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  cursor: grab;
}
.pin:hover { border-color: var(--rose); background: var(--rose-soft); }
.pin-dot {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--pin-color, var(--rule-strong));
}
.pin-name { font-size: 13px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.pin-sub { font-size: 11px; color: var(--ink-3); }

/* --- Mapa ------------------------------------------------------------------- */

.map-pane {
  position: relative;
  min-width: 0;
  background: var(--panel-sunk);
  /* Leaflet reparte z-index de 200 a 800 entre sus propias capas. Sin un
     contexto de apilamiento propio, esos valores ganan al drawer y las teselas
     se pintan por encima del panel lateral. */
  isolation: isolate;
}
#map { width: 100%; height: 100%; }

.map-overlay {
  position: absolute;
  z-index: 500;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  pointer-events: none;
}
.map-overlay > * { pointer-events: auto; }

.map-search {
  position: relative;
  flex: 1;
  max-width: 340px;
}
.map-search input {
  width: 100%;
  padding: 7px 11px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  box-shadow: var(--shadow-pop);
}
.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
}
.search-results:empty { display: none; }
.search-hit {
  display: block;
  width: 100%;
  padding: 7px 11px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.search-hit:last-child { border-bottom: 0; }
.search-hit:hover { background: var(--panel-sunk); }
.search-hit strong { display: block; font-size: 13px; font-weight: 500; }
.search-hit small { color: var(--ink-3); font-size: 11.5px; }

/* Pines: chincheta cartografica, no globo generico */
.pin-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg);
  border: 2px solid var(--panel);
  box-shadow: 0 2px 5px rgb(74 43 51 / 0.4);
  font-size: 12px;
}
.pin-marker > span { transform: rotate(45deg); }
.pin-marker.is-numbered {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  /* La paleta de dias es mas clara que la de antes y un numero blanco de 11 px
     se perderia sobre el amarillo miel o el agua. La sombra le devuelve el
     contraste sin oscurecer el color del dia, que es el dato. */
  text-shadow: 0 1px 1.5px rgb(74 43 51 / 0.6);
}

.leaflet-container { font-family: var(--font-ui); background: var(--panel-sunk); }
.leaflet-popup-content-wrapper { border-radius: var(--r-md); }
.leaflet-popup-content { margin: 10px 12px; font-size: 13px; }
.leaflet-bar a { color: var(--ink); }

/* Las teselas se templan lo justo para que el mapa no sea una ventana fria
   recortada sobre el papel. Es un ajuste de 8 %: por encima de eso el verde de
   los parques y el azul del agua empiezan a mentir. */
:root[data-theme="light"] .leaflet-tile-pane {
  filter: saturate(0.9) sepia(0.08) brightness(1.01);
}

/* Mapa en modo oscuro.
   No existe ningun proveedor gratuito y sin clave con tanto detalle como el
   estilo estandar de OpenStreetMap, y una capa oscura minimalista se comeria
   los nombres de calles y comercios, que es justo lo que hace falta al
   planificar. Se invierte la capa de teselas y solo esa: los pines, las rutas
   y los globos conservan su color. */
:root[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.88) saturate(0.75);
}
:root[data-theme="dark"] .leaflet-container { background: #0d1116; }
:root[data-theme="dark"] .leaflet-bar a,
:root[data-theme="dark"] .leaflet-control-attribution,
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip {
  background: var(--panel);
  color: var(--ink);
}
:root[data-theme="dark"] .leaflet-control-attribution a { color: var(--ink-2); }
:root[data-theme="dark"] .leaflet-bar a:hover { background: var(--panel-sunk); }

/* --- Drawer lateral ------------------------------------------------------------ */

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgb(74 43 51 / 0.3);
  backdrop-filter: blur(2px);
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  width: min(460px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-pop);
  animation: drawer-in 0.18s ease-out;
}
@keyframes drawer-in {
  from { transform: translateX(14px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
}
.drawer-body { flex: 1; overflow-y: auto; padding: 14px; }
.drawer-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--rule);
  background: var(--panel-sunk);
}

/* --- Formularios ---------------------------------------------------------------- */

.field { margin-bottom: 12px; }
.field > label,
.form-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-narrow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

input[type="text"], input[type="url"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"], input[type="search"],
input[type="file"], select, textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input[type="time"], input[type="date"], input[type="number"] { font-family: var(--font-mono); }
textarea { resize: vertical; min-height: 68px; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--rose-deep);
  outline-offset: -1px;
  border-color: var(--rose-deep);
}
input[readonly] { background: var(--panel-sunk); color: var(--ink-2); }
input[type="color"] { width: 42px; height: 30px; padding: 2px; cursor: pointer; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.check { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.check input { width: auto; }

.helptext { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.errorlist {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: var(--signal);
  font-size: 12px;
}

/* Grupos de campos que solo aplican a ciertos tipos de bloque */
.kind-group { display: none; }
.kind-group.is-shown { display: block; }

fieldset.subform {
  margin: 14px 0 0;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--panel-sunk);
}
fieldset.subform legend {
  padding: 0 6px;
  font-family: var(--font-narrow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Tablas ---------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-narrow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  white-space: nowrap;
}
table.grid td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.grid tbody tr:hover { background: var(--panel-sunk); }
table.grid td.num, table.grid th.num { text-align: right; font-family: var(--font-mono); }
/* Columna de acciones: los botones nunca deben partirse en dos lineas. */
table.grid td.actions { white-space: nowrap; text-align: right; }
table.grid .day-marker {
  display: inline-block;
  width: 3px;
  height: 15px;
  margin-right: 7px;
  border-radius: 2px;
  vertical-align: -2px;
  background: var(--day-color, var(--rule-strong));
}

/* Celda editable en linea */
.cell-edit {
  display: block;
  width: 100%;
  padding: 2px 4px;
  margin: -2px -4px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: text;
}
.cell-edit:hover { border-color: var(--rule-strong); background: var(--panel); }

/* --- Avisos (el doctor del viaje) -------------------------------------------------- */

.notice {
  display: flex;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--rule-strong);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--panel);
  font-size: 13px;
}
.notice + .notice { margin-top: 7px; }
.notice-error { border-left-color: var(--signal); background: var(--signal-soft); }
.notice-warning { border-left-color: var(--warn); background: var(--warn-soft); }
.notice-info { border-left-color: var(--rose); }
.notice-mark { font-family: var(--font-mono); font-weight: 600; flex: none; }
.notice-hint { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }

.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--ink-3);
}
.badge-count.is-error { background: var(--signal); }
.badge-count.is-warning { background: var(--warn); }

/* --- Mensajes flotantes ------------------------------------------------------------ */

.flash-stack {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 380px;
}
.flash {
  padding: 9px 13px;
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--rose-deep);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-pop);
  font-size: 13px;
  animation: flash-in 0.2s ease-out;
}
@keyframes flash-in {
  from { transform: translateY(6px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.flash-success { border-left-color: var(--ok); }
.flash-warning { border-left-color: var(--warn); }
.flash-error { border-left-color: var(--signal); }

/* --- Barras de datos (presupuesto) --------------------------------------------------- */

.bar-row { display: grid; grid-template-columns: 150px 1fr 92px; align-items: center; gap: 10px; padding: 3px 0; }
.bar-track { height: 9px; border-radius: var(--r-pill); background: var(--panel-sunk); overflow: hidden; }
/* `display: block` es imprescindible: la barra es un `<span>` y sin el la
   altura del 100% no se aplica y la barra se ve siempre vacia. */
.bar-fill { display: block; height: 100%; min-width: 3px; background: var(--rose); border-radius: var(--r-pill); }
.bar-value { font-family: var(--font-mono); font-size: 12.5px; text-align: right; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.stat { padding: 12px 14px; background: var(--panel); }
.stat-value {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40, var(--fr);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-label { margin-top: 3px; font-family: var(--font-narrow); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* --- Listas de tareas ---------------------------------------------------------------- */

.checkitem { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--rule); }
.checkitem:last-child { border-bottom: 0; }
.checkitem.is-done .checkitem-text { color: var(--ink-3); text-decoration: line-through; }
.checkitem-text { flex: 1; font-size: 13.5px; }
.progress-track { height: 6px; border-radius: var(--r-pill); background: var(--panel-sunk); overflow: hidden; }
.progress-fill { height: 100%; background: var(--ok); border-radius: var(--r-pill); }

/* --- Tarjetas de viaje en el listado ---------------------------------------------------- */

.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }

.trip-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--panel);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.trip-card:hover { border-color: var(--rose); box-shadow: var(--shadow-pop); transform: translateY(-2px); }
.trip-card-cover { width: 100%; height: 132px; object-fit: cover; display: block; }
/* Un hilo por dia: la duracion del viaje se lee sin contar ninguna cifra.
   La altura va en los hijos y no en el contenedor: con `box-sizing: border-box`
   un `height` menor que el `padding` deja la caja de contenido en cero y los
   hilos desaparecen. */
.trip-card-strip { display: flex; gap: 2px; padding: 9px 15px 0; }
.trip-card-strip i { flex: 1; height: 7px; border-radius: var(--r-pill); opacity: 0.85; }
.trip-card-body { padding: 11px 15px 16px; }
.trip-card h3 { margin-bottom: 3px; }
.trip-card-dates { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.trip-card-stats { display: flex; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.trip-card-stats b { font-family: var(--font-mono); font-weight: 600; }

/* --- Vacios ------------------------------------------------------------------------------ */

.empty {
  padding: 30px 20px;
  border: 2px dashed var(--rule-strong);
  border-radius: var(--r-lg);
  background: var(--panel);
  text-align: center;
  color: var(--ink-3);
  font-size: 13.5px;
}
.empty strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 24, var(--fr);
  font-weight: 600;
  color: var(--ink);
  font-size: 16px;
}

/* --- Vista de hoy (movil) ------------------------------------------------------------------ */

.today-now {
  border: 1px solid var(--rose);
  border-left-width: 5px;
  border-left-color: var(--rose-deep);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  background: var(--panel);
  box-shadow: var(--shadow-card);
}
.today-now .eyebrow { color: var(--rose-deep); }

/* --- Impresion ------------------------------------------------------------------------------
   El PDF sale de Ctrl+P: nada de WeasyPrint ni dependencias nativas.
   ----------------------------------------------------------------------------------------- */

@media print {
  /* Hay que nombrar tambien `[data-theme="dark"]`: si no, gana por especificidad
     y el itinerario saldria impreso sobre fondo negro. */
  :root,
  :root[data-theme="dark"] {
    --paper: #fff;
    --panel: #fff;
    --panel-sunk: #fff;
    --ink: #000;
    --ink-2: #333;
    --ink-3: #666;
    --rule: #ccc;
    --rule-strong: #999;
  }
  .masthead, .no-print, .plan-toolbar, .drawer, .drawer-scrim, .flash-stack { display: none !important; }
  body { font-size: 11pt; background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .print-day { break-inside: avoid; page-break-inside: avoid; margin-bottom: 14pt; }
  .print-day + .print-day { border-top: 1px solid #ccc; padding-top: 10pt; }
  .block { box-shadow: none; break-inside: avoid; }
  a { text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }
}

/* --- App instalada y sin conexion ------------------------------------------------------ */

/* Instalada en el movil la app ocupa la pantalla entera: en el iPhone el notch
   y la barra de inicio se comen los bordes si no se les deja sitio. `max()`
   mantiene el margen de siempre en escritorio, donde los `env()` valen 0. */
.masthead {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.flash-stack {
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
}
.drawer-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

/* Un enlace largo pegado en las notas (la URL de unas entradas, una reserva)
   no puede ensanchar la pagina: en el movil aparece scroll lateral. */
.card, .drawer-body { overflow-wrap: break-word; }

.offline-badge {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid currentColor;
}
.offline-badge[hidden] { display: none; }
.offline-short { display: none; }

/* Sin red se consulta, no se edita: los botones de guardar se apagan para que
   nadie rellene un formulario entero y lo pierda al enviarlo. */
.is-offline button[type="submit"],
.is-offline [data-save-offline] {
  opacity: 0.45;
  pointer-events: none;
}

/* --- Responsive ------------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .plan { grid-template-columns: 1fr; grid-template-rows: 1fr 40vh; }
  .plan-side { border-right: 0; border-bottom: 1px solid var(--rule); }
  .backlog-col { position: static; }
  .trip-title .dates { display: none; }
  .tabs { overflow-x: auto; }
  .field-row, .field-row-3 { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 100px 1fr 76px; }

  /* Sin esto el nombre del viaje parte en varias lineas y estira la cabecera,
     que tiene alto fijo: las pestañas se salen por abajo. */
  .trip-title strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* En un telefono no caben a la vez la marca, el nombre del viaje y siete
   pestañas. Se cede el nombre del viaje: ya esta en el titulo de la pestaña del
   navegador y se acaba de venir de la pantalla que lo lleva por encabezado. Lo
   que no se puede ceder es la navegacion ni la vuelta al listado. */
@media (max-width: 700px) {
  :root { --col-width: 262px; --backlog-width: 218px; }
  .masthead {
    gap: 10px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .brand { font-size: 17px; }
  .trip-title { display: none; }
  .tab { padding: 0 10px; }
  .wrap, .wrap-narrow { padding-left: 14px; padding-right: 14px; }

  /* Sin red la cabecera tiene que hacer sitio al aviso: cede el boton de tema,
     que es lo unico prescindible, y el aviso se acorta. */
  .offline-badge { padding: 2px 7px; font-size: 11px; }
  .offline-long { display: none; }
  .offline-short { display: inline; }
  .is-offline .theme-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Gasto: quien paga y para quien ------------------------------------------------ */

.field-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.split-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.split-people { display: flex; flex-direction: column; gap: 6px; }
.split-person { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.split-person > input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.split-person .chip { flex: 1; }
.split-person > input:checked + .chip {
  background: var(--rose-soft);
  border-color: var(--rose-deep);
  color: var(--rose-deep);
}
.split-person > input:focus-visible + .chip { outline: 2px solid var(--rose); outline-offset: 2px; }
.split-amount { display: none; width: 7.5em; }
.split-box.is-amounts .split-person > input:checked ~ .split-amount { display: block; }
.split-mode { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }

/* Presupuesto: liquidacion */
.settle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.settle-row:last-child { border-bottom: 0; }
.settle-who { flex: 1; min-width: 0; }
.settle-amount { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.settle-even { padding: 8px 0; color: var(--ok); font-weight: 600; }
.people-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.people-table th, .people-table td { padding: 6px 4px; border-bottom: 1px solid var(--rule); text-align: right; }
.people-table th:first-child, .people-table td:first-child { text-align: left; }
.people-table th { color: var(--ink-3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.tag-settle { background: var(--ok-soft, #e4f0e6); color: var(--ok); }

/* =============================================================================
   Movil (≤ 700 px)

   El escritorio no se toca: todo lo de aqui vive dentro de la media query o en
   elementos `.mobile-only`, que fuera de ella no existen.

   - Esqueleto: barra inferior (Hoy · Plan · Mapa · Gastos · Mas) y cabecera
     con solo la marca y el nombre del viaje.
   - Plan: un dia por pantalla con chips para saltar, mapa a pantalla completa
     como vista aparte, herramientas en una hoja «Opciones».
   - Tablas: cada fila se convierte en tarjeta (`.stack-table`).
   - Formularios: 16 px en los campos (menos hace que el iPhone amplie la
     pagina al enfocarlos) y objetivos tactiles de 44 px.
   ========================================================================== */

.mobile-only,
.tabbar,
.day-chips { display: none; }

.budget-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
details.filters > summary { list-style: none; }
details.filters > summary::-webkit-details-marker { display: none; }
.move-day { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

@media (max-width: 700px) {
  :root { --tabbar-h: 58px; --safe-bottom: env(safe-area-inset-bottom, 0px); }

  .mobile-only { display: revert; }
  .desk-only { display: none !important; }

  /* --- Esqueleto ----------------------------------------------------------- */

  .masthead:has(.tabbar) .tabs,
  .masthead:has(.tabbar) .actions-menu,
  .masthead:has(.tabbar) .theme-toggle,
  .masthead:has(.tabbar) .masthead-logout { display: none; }
  .masthead:has(.tabbar) .trip-title {
    display: block;
    flex: 1;
    min-width: 0;
    text-align: right;
  }
  .masthead:has(.tabbar) .spacer { display: none; }

  body:has(.tabbar) { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
  body:has(.tabbar) .flash-stack { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 10px); left: 12px; right: 12px; max-width: none; }

  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    padding: 0 max(4px, env(safe-area-inset-right)) var(--safe-bottom) max(4px, env(safe-area-inset-left));
    background: var(--panel);
    border-top: 1px solid var(--rule-strong);
    box-shadow: 0 -4px 16px rgb(74 43 51 / 0.06);
  }
  .tabbar > a,
  .tabbar-more { flex: 1; min-width: 0; }
  .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: var(--tabbar-h);
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar-item::-webkit-details-marker { display: none; }
  .tabbar-item svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tabbar-more circle { fill: currentColor; stroke: none; }
  .tabbar-item[aria-current="page"],
  .tabbar-more[open] > .tabbar-item { color: var(--rose-deep); }
  .tabbar-item[aria-current="page"] svg { stroke-width: 2.2; }

  /* --- Hojas inferiores («Mas» y «Opciones») -------------------------------- */

  details[open] > .sheet { animation: sheet-in 0.16s ease-out; }
  details:has(> .sheet)[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 46;
    background: rgb(74 43 51 / 0.32);
  }
  .sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 47;
    max-height: 78dvh;
    overflow-y: auto;
    padding: 8px 12px calc(12px + var(--safe-bottom));
    background: var(--panel);
    border-radius: 18px 18px 0 0;
    box-shadow: var(--shadow-pop);
    text-align: left;
  }
  /* El asa: dice «esto se cierra» sin necesidad de boton. */
  .sheet::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    margin: 2px auto 10px;
    border-radius: 2px;
    background: var(--rule-strong);
  }
  .sheet-title {
    margin: 2px 4px 8px;
    font-family: var(--font-narrow);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rose-deep);
  }
  .sheet form { margin: 0; }
  .sheet hr { margin: 8px 0; border: 0; border-top: 1px solid var(--rule); }
  .sheet > a,
  .sheet > button,
  .sheet form > button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .sheet > a:active,
  .sheet > button:active,
  .sheet form > button:active { background: var(--panel-sunk); }
  .sheet .is-danger { color: var(--signal); }
  .sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sheet-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 12px;
    background: var(--panel-sunk);
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }
  .sheet-grid a[aria-current="page"] { background: var(--rose-soft); color: var(--rose-deep); }
  .segmented-block { display: flex; width: 100%; }
  .segmented-block > * { flex: 1; min-height: 42px; font-size: 13px; }

  /* --- Tacto y formularios ---------------------------------------------------- */

  input[type="text"], input[type="url"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="time"], input[type="search"],
  select, textarea {
    /* !important para ganar a los `style="font-size:12px"` en linea de algunas
       plantillas: con un solo campo por debajo de 16 px el iPhone amplia. */
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea { min-height: 96px; }

  .btn { min-height: 40px; padding-left: 14px; padding-right: 14px; font-size: 14px; }
  .btn-sm { min-height: 36px; padding-left: 11px; padding-right: 11px; font-size: 13px; }
  .btn-icon { min-width: 40px; min-height: 40px; }

  /* Un solo scroll para toda la ficha: con el formulario y los adjuntos en
     dos cajas con scroll propio, al formulario le quedaba media pantalla. La
     cabecera y los botones de guardar se quedan pegados arriba y abajo. */
  .drawer { width: 100vw; border-left: 0; overflow-y: auto; overscroll-behavior: contain; }
  .drawer > .drawer-body { flex: none !important; overflow: visible; }
  .drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel);
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .drawer-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
    flex-wrap: wrap;
  }
  .move-day .btn { flex: 1; }

  /* --- Plan: un dia por pantalla --------------------------------------------- */

  .plan {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr;
    height: calc(100dvh - var(--header-h) - var(--tabbar-h) - var(--safe-bottom));
  }
  .plan .map-pane { display: none; }
  .plan.is-map-view .plan-side { display: none; }
  .plan.is-map-view .map-pane { display: block; }
  .plan-side { border-right: 0; border-bottom: 0; }

  .plan-toolbar { flex-wrap: nowrap; gap: 6px; padding: 8px 10px; }
  .plan-toolbar .segmented a,
  .plan-toolbar .segmented button { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; }
  .plan-more { margin-left: auto; }
  .plan-more > summary { list-style: none; }
  .plan-more > summary::-webkit-details-marker { display: none; }

  .day-chips {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
  }
  .day-chips::-webkit-scrollbar { display: none; }
  .day-chips button {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 46px;
    padding: 2px 8px;
    border: 1px solid var(--rule-strong);
    border-radius: 12px;
    background: var(--panel);
    color: var(--ink-2);
    font: inherit;
    font-size: 12px;
    line-height: 1.1;
    cursor: pointer;
    box-shadow: inset 0 -3px 0 var(--day-color, transparent);
    -webkit-tap-highlight-color: transparent;
  }
  .day-chips button[data-chip-for="backlog"] { font-weight: 700; }
  .day-chips .chip-dow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
  .day-chips .chip-num { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
  .day-chips button.is-on { background: var(--rose-deep); border-color: var(--rose-deep); color: var(--on-rose); box-shadow: none; }
  .day-chips button.is-on .chip-num { color: var(--on-rose); }

  .filmstrip {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .filmstrip::-webkit-scrollbar { display: none; }
  .day-col,
  .backlog-col,
  .filmstrip.is-calendar .day-col {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .backlog-col { position: static; }
  .day-body { overflow-y: auto; }

  /* En la tarjeta solo lo que se toca a proposito: duplicar y borrar estan en
     la ficha, donde un toque perdido no se lleva un bloque. */
  .block .block-tools { display: none; }
  .block-check { padding: 8px; margin: -8px; }

  .bulk-bar {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 8px);
    z-index: 44;
    flex-wrap: wrap;
    border-radius: 14px;
    box-shadow: var(--shadow-pop);
  }

  .map-back {
    position: absolute;
    left: 12px;
    bottom: 16px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--rose-deep);
    color: var(--on-rose);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-pop);
  }
  .map-overlay { right: 12px; left: 12px; }

  /* --- Tablas que se apilan en tarjetas -------------------------------------- */

  .table-scroll { overflow: visible; border: 0; background: transparent; }
  .stack-table thead { display: none; }
  .stack-table,
  .stack-table tbody { display: block; }
  .stack-table tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 8px;
    padding: 10px 52px 10px 14px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--day-color, var(--rule-strong));
    border-radius: 12px;
  }
  .stack-table tbody tr:hover { background: var(--panel); }
  .stack-table td {
    display: block;
    order: 3;
    padding: 0;
    border: 0;
    text-align: left !important;
  }
  .stack-table td.cell-lead { order: 1; color: var(--ink-2); font-size: 12px; }
  .stack-table td.cell-main { order: 2; flex: 1 0 100%; font-size: 15px; font-weight: 600; }
  .stack-table td.cell-amount { order: 2; font-size: 15px; font-weight: 700; }
  .stack-table td.cell-empty,
  .stack-table td.cell-redundant { display: none; }
  .stack-table td[data-label]::before {
    content: attr(data-label) " ";
    margin-right: 3px;
    color: var(--ink-3);
    font-family: var(--font-narrow);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .stack-table td.cell-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .stack-table .day-marker { display: none; }
  table.stack-table td { border: 0; padding: 0; }
  /* Un localizador vacio ocupaba una linea en casi todas las filas; se rellena
     desde la ficha (✎). */
  .stack-table td:has(> .cell-edit[name="value"][value=""]):not(.cell-main):not(.cell-lead) { display: none; }

  /* Las celdas editables siguen pareciendo texto, como en escritorio: con el
     aspecto de campo de formulario cada fila ocupaba media pantalla. */
  .stack-table .cell-edit {
    width: auto;
    min-height: 34px;
    margin: 0 -6px;
    padding: 2px 6px;
    border-color: transparent !important;
    background: transparent;
    box-shadow: none;
  }
  .stack-table .cell-edit:focus { border-color: var(--rose) !important; background: var(--panel); }
  .stack-table td.cell-main .cell-edit { width: calc(100% + 12px); font-weight: 600; }
  .stack-table td[data-label]:has(.cell-edit) { display: flex; align-items: center; }
  .stack-table .cell-edit[type="time"] { width: 7.2em; }
  .stack-table td[data-label] .cell-edit[type="text"] { width: 8.5em; }
  .stack-table td[data-label] select.cell-edit { width: auto; }
  .stack-table tr { row-gap: 2px; }
  .stack-table td.cell-lead { display: flex; align-items: center; min-height: 34px; }
  .stack-table td[colspan] { flex: 1 0 100%; }

  /* --- Pantallas secundarias ----------------------------------------------- */

  .page-head { flex-wrap: wrap; gap: 10px; }
  .page-head h1 { font-size: 26px; }
  .budget-cols { grid-template-columns: 1fr; }
  /* En el movil primero lo que se consulta y se toca: las cifras y la lista de
     gastos. Los graficos por categoria y por dia, al final. */
  .budget-page { display: flex; flex-direction: column; }
  .budget-page > .budget-expenses { order: 1; }
  .budget-page > .budget-balances { order: 2; }
  .budget-page > .budget-cols { order: 3; margin-top: 16px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 21px; white-space: nowrap; }
  details.filters > summary { display: inline-flex; margin-bottom: 10px; }
  details.filters > form { flex-direction: column; align-items: stretch; }
  details.filters > form > * { width: 100% !important; }

  .fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
    z-index: 44;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--rose-deep);
    color: var(--on-rose);
    font-size: 28px;
    line-height: 1;
    box-shadow: var(--shadow-pop);
    cursor: pointer;
  }
  body:has(.fab) .flash-stack { right: 84px; }

  .create-list { flex-wrap: wrap; width: 100%; }
  .create-list input[type="text"] { flex: 1 0 100%; width: 100% !important; }
  .create-list select { flex: 1; }
  .checkitem { min-height: 44px; }
  .chip { min-height: 42px; font-size: 14px; }
  /* El estado en la tarjeta de un lugar es un control secundario: tactil pero
     sin la altura de un campo de formulario. */
  .pin select { min-height: 34px; padding-top: 2px !important; padding-bottom: 2px !important; font-size: 16px; }
}

@keyframes sheet-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}