/* miscosas — cartón. Un solo acento (rojo pin) reservado a ubicación y avisos. */
@font-face { font-family: "DM Sans"; src: url("/fonts/dm-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #F6EEE1; --card: #FFFBF3; --line: #E2D3BA;
  --ink: #2B1D12; --ink2: #6B5644;
  --logo-line: #3B2516;   /* contorno del logo: en oscuro se aclara para que no se funda con el fondo */
  --kraft: #C79A6B; --kraft-l: #E6D2B3; --kraft-d: #8A5F38;
  --pin: #C4421F; --pin-text: #B2381A; --edge: #9A8260; --on-pin: #FFFFFF; --warn: #F0D98C; --ok: #CBD9B8; --ok-dot: #3E8F55;
  --t-sage: #CBD9B8; --t-mustard: #F0D98C; --t-sky: #C9DCE3; --t-rose: #EBC9C0; --t-sand: #E6D2B3; --t-lilac: #D9CFE6;
  --t-mint: #BFE3D0; --t-peach: #F6CFA8; --t-periwinkle: #C6CFF2; --t-stone: #D8D0C2;
  --shadow: 0 1px 2px rgba(43,29,18,.06);
  --share: #2F6B4A; --share-bg: #E3EEDC;   /* rework-share-access: lo que ven otras personas (borde y etiqueta de las filas) */
  --share-pending: #3F7A59; --share-pending-bg: #F4F8F1;   /* invitaciones sin aceptar: el mismo verde, traslúcido y discontinuo */
  --sel-plate: color-mix(in srgb, var(--kraft) 30%, var(--paper));   /* fondo suave de lo seleccionado */
  --choice: #8A5F38;   /* borde y marca de la opción elegida (selector de ubicación): ≥ 3 : 1 sobre --paper y --card */
  --radius: 18px;
  --nav-h: 76px;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-title: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  color-scheme: light;
}
/* Oscuro: sigue al sistema, salvo que se elija a mano (data-theme="light" / "dark" en <html>, ver js/theme.js). */
:root[data-theme="dark"] {
  --paper: #1E1710; --card: #2A2118; --line: #3D3023;
  --ink: #F3E8D6; --ink2: #BFAE96; --logo-line: #D8BC94;
  --pin: #C4421F; --pin-text: #E8765A; --edge: #867057; --warn: #5A4B22; --ok: #3E4A33; --ok-dot: #7BC48A;
  --t-sage: #3E4A33; --t-mustard: #5A4B22; --t-sky: #2F4650; --t-rose: #5A3A33; --t-sand: #4A3826; --t-lilac: #433A55;
  --t-mint: #2F4D40; --t-peach: #5E4128; --t-periwinkle: #343E66; --t-stone: #45403A;
  --kraft-l: #4A3826;
  --share: #8FD19E; --share-bg: #2F4A38;
  --share-pending: #7DBB8C; --share-pending-bg: #242E25;
  --sel-plate: color-mix(in srgb, var(--ink) 34%, var(--paper));   /* en oscuro, lo seleccionado se marca con un tono claro */
  --choice: #C79A6B;
  --shadow: none;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1E1710; --card: #2A2118; --line: #3D3023;
    --ink: #F3E8D6; --ink2: #BFAE96; --logo-line: #D8BC94;
    --pin: #C4421F; --pin-text: #E8765A; --edge: #867057; --warn: #5A4B22; --ok: #3E4A33; --ok-dot: #7BC48A;
    --t-sage: #3E4A33; --t-mustard: #5A4B22; --t-sky: #2F4650; --t-rose: #5A3A33; --t-sand: #4A3826; --t-lilac: #433A55;
    --t-mint: #2F4D40; --t-peach: #5E4128; --t-periwinkle: #343E66; --t-stone: #45403A;
    --kraft-l: #4A3826;
    --share: #8FD19E; --share-bg: #2F4A38;
  --share-pending: #7DBB8C; --share-pending-bg: #242E25;
    --sel-plate: color-mix(in srgb, var(--ink) 34%, var(--paper));
    --choice: #C79A6B;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.35; }
body { overscroll-behavior-y: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--kraft-d); outline-offset: 2px; }
:root[data-theme="dark"] :focus-visible { outline-color: var(--kraft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :focus-visible { outline-color: var(--kraft); } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

#app { height: 100dvh; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; position: relative; }
.view { flex: 1; overflow-y: auto; overflow-x: hidden; padding: calc(16px + env(safe-area-inset-top)) 20px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--ink2); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.bold { font-weight: 700; }

.title { font-family: var(--font-title); font-weight: 700; font-size: 32px; line-height: 1.05; letter-spacing: -.8px; overflow-wrap: anywhere; }
.title--sm { font-size: 24px; letter-spacing: -.5px; }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-title); font-weight: 700; font-size: 20px; letter-spacing: -.5px; }
.brand svg { width: 30px; height: 30px; }
svg [stroke="#3B2516"] { stroke: var(--logo-line); }   /* el logo (static/icons/logo.svg, en icons.js) pinta su contorno con este color fijo */
a.brand, .nav .nav__brand a { color: inherit; text-decoration: none; }
a.brand { border-radius: 12px; padding: 4px 6px 4px 0; }
a.brand:hover, .nav .nav__brand a:hover { opacity: .8; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }

.sync-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--warn); font-size: 12px; font-weight: 500; white-space: nowrap; border: 0; }
.sync-pill[data-state="ok"] { background: transparent; color: var(--ink2); padding-right: 0; }
.sync-pill svg { width: 14px; height: 14px; }
.sync-pill[data-state="error"] { background: var(--pin); color: var(--on-pin); }

.crumbs { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; font-size: 13px; color: var(--ink2); }
.crumbs a { text-decoration: none; padding: 6px 1px; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs svg { width: 11px; height: 11px; flex: none; }
.crumbs--path { font-size: 15px; font-weight: 500; color: var(--ink); }
.crumbs--path a:last-child { font-weight: 700; }

.iconbtn { width: 44px; height: 44px; border-radius: 14px; border: 1.5px solid var(--edge); background: var(--card); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn--on { background: var(--kraft); border-color: var(--ink); }
.iconbtn--on svg { stroke: #2B1D12; }
.iconbtn--round { border-radius: 50%; border-color: var(--ink); }
.iconbtn--ghost { border-color: transparent; background: transparent; }

.searchbar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--edge); }
.searchbar:focus-within { border-color: var(--ink); }
.searchbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; }
.searchbar svg { width: 18px; height: 18px; color: var(--ink2); flex-shrink: 0; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid transparent; background: var(--t-sand); font-size: 13px; font-weight: 500; white-space: nowrap; flex-shrink: 0; min-height: 34px; }
.chip--ghost { background: var(--card); border-color: var(--line); }
.chip--dash { background: transparent; border: 1.5px dashed var(--ink2); color: var(--ink2); }
.chip--on { background: var(--ink); color: var(--paper); }
.chip--c0 { background: var(--t-sage); } .chip--c1 { background: var(--t-mustard); } .chip--c2 { background: var(--t-sky); }
.chip--c3 { background: var(--t-rose); } .chip--c4 { background: var(--t-sand); } .chip--c5 { background: var(--t-lilac); }
.chip--c6 { background: var(--t-mint); } .chip--c7 { background: var(--t-peach); } .chip--c8 { background: var(--t-periwinkle); } .chip--c9 { background: var(--t-stone); }
.chip--on.chip--c0, .chip--on.chip--c1, .chip--on.chip--c2, .chip--on.chip--c3, .chip--on.chip--c4, .chip--on.chip--c5,
.chip--on.chip--c6, .chip--on.chip--c7, .chip--on.chip--c8, .chip--on.chip--c9 { outline: 2px solid var(--ink); }
.chip svg { width: 12px; height: 12px; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; }
.badge--pin { background: var(--pin); color: var(--on-pin); }
.badge--warn { background: var(--warn); color: var(--ink); }
.status { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--ok); font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.status--baja { background: var(--t-sky); }

/* Selector de opciones: la elegida es oscura, con ✓ y relieve; las demás, apagadas. */
.seg { display: flex; padding: 4px; border-radius: 16px; background: var(--kraft-l); gap: 4px; }
.seg button { flex: 1; min-height: 42px; border-radius: 12px; border: 2px solid transparent; background: transparent; font-size: 14px; font-weight: 500; color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button:hover { color: var(--ink); background: rgba(255,255,255,.35); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.28); }
.seg button[aria-pressed="true"]::before { content: "✓"; font-weight: 700; }
:root[data-theme="dark"] .seg button:hover { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .seg button[aria-pressed="true"] { background: var(--kraft); color: #2B1D12; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seg button:hover { background: rgba(255,255,255,.08); }
  :root:not([data-theme="light"]) .seg button[aria-pressed="true"] { background: var(--kraft); color: #2B1D12; }
}

/* Cuadrícula: --cols lo cambia el pellizco (1 = lista) */
.grid { --cols: 2; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.grid[data-cols="3"] { gap: 10px; } .grid[data-cols="4"], .grid[data-cols="5"], .grid[data-cols="6"] { gap: 6px; }
.tile { position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 0; text-align: left; box-shadow: var(--shadow); }
.tile:active { transform: scale(.98); }
.tile__photo { aspect-ratio: 4 / 3; background: var(--t-sand); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.tile__photo img { width: 100%; height: 100%; object-fit: cover; }
.tile__photo > svg { width: 38%; height: 38%; max-width: 44px; max-height: 44px; opacity: .85; }
.tile__body { padding: 9px 12px 11px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tile__name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile__meta { font-size: 12px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .badge, .tile .tag-corner { position: absolute; top: 8px; right: 8px; }
.tile .tag-corner { left: 8px; right: auto; }
.grid[data-cols="4"] .tile, .grid[data-cols="5"] .tile, .grid[data-cols="6"] .tile { border-radius: 10px; border-width: 1px; }
.grid[data-cols="4"] .tile__photo, .grid[data-cols="5"] .tile__photo, .grid[data-cols="6"] .tile__photo { aspect-ratio: 1 / 1; }
.grid[data-cols="4"] .tile__body, .grid[data-cols="5"] .tile__body, .grid[data-cols="6"] .tile__body { display: none; }
.grid[data-cols="4"] .tile .badge, .grid[data-cols="5"] .tile .badge, .grid[data-cols="6"] .tile .badge { top: auto; right: 4px; bottom: 4px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.grid[data-cols="4"] .tile .tag-corner, .grid[data-cols="5"] .tile .tag-corner, .grid[data-cols="6"] .tile .tag-corner { display: none; }
.grid[data-cols="1"] { gap: 0; }
.grid[data-cols="1"] .tile { flex-direction: row; align-items: center; border-radius: 0; border-width: 0 0 1.5px; background: transparent; box-shadow: none; padding: 10px 8px; margin: 0 -8px; gap: 12px; }
.grid[data-cols="1"] .tile__photo { width: 60px; height: 60px; aspect-ratio: auto; border-radius: 14px; flex-shrink: 0; }
.grid[data-cols="1"] .tile__body { padding: 0; flex: 1; }
.grid[data-cols="1"] .tile .badge { position: static; order: 3; }
/* En lista el círculo de selección va delante de la miniatura (como en el árbol), no encima de ella. */
.grid[data-cols="1"] .tile__check { position: static; flex-shrink: 0; order: -1; }
.grid[data-cols="1"] .tile[aria-selected="false"] .tile__check { background: transparent; border-color: var(--ink2); box-shadow: none; }
/* Selección (estilo Google Fotos): la ficha marcada se encoge un poco sobre una placa de color suave y el círculo se rellena con ✓.
   Sin marcos alrededor. Las no marcadas muestran un círculo vacío translúcido. */
.tile { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; }
.grid { --plate: 8px; }
.grid[data-cols="3"] { --plate: 6px; } .grid[data-cols="4"], .grid[data-cols="5"], .grid[data-cols="6"] { --plate: 4px; }
.grid[data-selecting="1"] .tile[aria-selected="true"] { transform: scale(.9); border-color: transparent; box-shadow: 0 0 0 var(--plate) var(--sel-plate); z-index: 1; }
.grid[data-cols="1"] .tile[aria-selected="true"] { transform: none; box-shadow: none; background: var(--sel-plate); border-color: transparent; border-radius: 14px; }
.tile__check { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.22); border: 2px solid rgba(255,255,255,.95); color: transparent; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: background-color .16s ease; }
.tile__check svg { width: 14px; height: 14px; }
.grid[data-selecting="1"] .tile__check { display: flex; }
.tile[aria-selected="true"] .tile__check, .treerow[aria-selected="true"] .tile__check { background: var(--ink); border-color: var(--paper); color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } }
.has-photo > svg { display: none; }
body.selecting .nav { display: none; }
/* Barras fijas abajo (selección, Mover/Dar de baja, Guardar…): la zona con scroll termina justo donde empieza la barra
   (así su barra de desplazamiento tampoco queda escondida detrás). La altura la mide app.js en --bar-h. */
body.selecting .view, .view--bar { margin-bottom: var(--bar-h, 0px); padding-bottom: 24px; }

/* Listas y fichas */
.card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.card--info { background: var(--t-sky); border-color: transparent; flex-direction: row; align-items: center; }
.card--warn { background: var(--warn); border-color: transparent; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--ink2); text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.eyebrow svg { width: 20px; height: 20px; }
.pin-ico { color: var(--pin); }
.rows { display: flex; flex-direction: column; }
.rowitem { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1.5px solid var(--line); text-decoration: none; color: inherit; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; }
.rowitem:last-child { border-bottom: 0; }
.thumb { width: 60px; height: 60px; border-radius: 14px; background: var(--t-sand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb svg { width: 28px; height: 28px; opacity: .85; }
.thumb--sm { width: 52px; height: 52px; border-radius: 12px; }
.path { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink2); }
.path svg { width: 12px; height: 12px; color: var(--pin); flex-shrink: 0; }
mark { background: var(--warn); color: inherit; border-radius: 4px; padding: 0 2px; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kv > div { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.kv .k { font-size: 12px; color: var(--ink2); }
.kv .v { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.hero { position: relative; margin: calc(-16px - env(safe-area-inset-top)) -20px 0; background: var(--t-sand); aspect-ratio: 16 / 10; max-height: 340px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero > svg { width: 84px; height: 84px; opacity: .75; }
/* Sin foto, la cabecera es la inicial grande sobre el color de la cosa (el mismo de su miniatura); con foto, la foto la tapa (.has-photo). */
.hero .hero__ini { font-size: clamp(96px, 34vw, 150px); opacity: .78; }
/* Con foto la inicial no se dibuja: con opacity < 1 se pinta encima del marco de la foto (.hero__frame) y se transparenta en las fotos claras. */
.hero:has(.hero__frame) > .hero__ini { display: none; }
.hero .count { position: absolute; right: 16px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; }
.strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.strip .thumb { cursor: pointer; border: 2px solid transparent; padding: 0; }
.strip .thumb[aria-current="true"] { border-color: var(--ink); }
.history { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.history .when { color: var(--ink2); font-size: 12px; }

/* Botones */
.btn { min-height: 52px; padding: 0 20px; border-radius: 16px; border: 2px solid var(--ink); background: var(--kraft); color: #2B1D12; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--link { border: 0; background: transparent; min-height: 44px; color: var(--ink); }
.btn--danger { background: var(--pin); border-color: var(--pin); color: var(--on-pin); }
.btn--sm { min-height: 40px; font-size: 14px; padding: 0 14px; border-radius: 12px; }
.btn--block { width: 100%; }
.btn svg { width: 20px; height: 20px; flex: none; }
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; max-width: 720px; margin: 0 auto; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1.5px solid var(--line); display: flex; gap: 10px; z-index: 20; }
.actionbar .btn { flex: 1; }
.actionbar--col { flex-direction: column; gap: 4px; }
.actionbar--col .btn--sm { padding: 0 8px; line-height: 1.1; }
@media (max-width: 420px) { .actionbar--col .btn--sm svg { display: none; } }   /* tres acciones en una fila: en pantallas estrechas el texto gana al icono */

/* Formularios */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span.label { font-size: 13px; font-weight: 700; }
.input, .select, .textarea { width: 100%; min-height: 50px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--edge); background: var(--card); font-size: 17px; outline: 0; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); }
.textarea { padding: 12px 16px; min-height: 110px; resize: vertical; }
.input--err { border-color: var(--pin); }
.hint { font-size: 12px; color: var(--ink2); }
.err { font-size: 13px; color: var(--pin-text); font-weight: 700; }
.pair { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 16px; background: var(--card); border: 1.5px solid var(--edge); }
.stepper button { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--kraft-l); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.stepper button svg { width: 20px; height: 20px; }
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper button[aria-disabled="true"] { opacity: .35; cursor: default; }   /* regla de cantidad: se ve apagado, pero al tocarlo explica por qué */
.rowitem[aria-disabled="true"], .btn[aria-disabled="true"], .chip[aria-disabled="true"] { opacity: .5; cursor: default; }
.stepper output { min-width: 44px; text-align: center; font-size: 18px; font-weight: 700; }
.locbtn { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; border-radius: 14px; border: 1.5px solid var(--edge); background: var(--card); width: 100%; text-align: left; }
.locbtn svg { width: 22px; height: 22px; color: var(--pin); flex-shrink: 0; }
.photoadd { display: flex; gap: 10px; }
.photoadd .shot { width: 150px; height: 150px; border-radius: 20px; background: var(--t-sage); border: 2px solid var(--ink); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
.photoadd .shot img { width: 100%; height: 100%; object-fit: cover; }
.photoadd .shot svg { width: 56px; height: 56px; opacity: .8; }
.photoadd .more { flex: 1; border-radius: 20px; border: 2px dashed var(--kraft-d); background: var(--kraft-l); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 700; padding: 0 6px; text-align: center; }
.photoadd .more svg { width: 30px; height: 30px; }
.disclosure { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; width: 100%; text-align: left; font-weight: 700; }   /* sin borde propio: va dentro de su tarjeta (refine-navigation-v9) */
.disclosure svg { width: 18px; height: 18px; }

/* Navegación inferior */
.nav { position: fixed; left: 0; right: 0; bottom: 0; max-width: 720px; margin: 0 auto; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom); background: var(--paper); border-top: 1.5px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; z-index: 25; }
.nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; font-size: 11px; font-weight: 500; color: var(--ink2); position: relative; padding: 6px 0; }
.nav a svg { width: 24px; height: 24px; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav a[aria-current="page"] svg { stroke-width: 2.4; }
.nav .add { display: flex; justify-content: center; }
.nav .add span { width: 58px; height: 58px; border-radius: 50%; background: var(--kraft); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; margin-top: -26px; color: #2B1D12; }
.nav .add svg { width: 28px; height: 28px; stroke-width: 2.6; color: #2B1D12; }
.nav .badge { position: absolute; top: -2px; right: 18%; }

/* Hojas modales y avisos */
.backdrop { position: fixed; inset: 0; background: rgba(20,12,6,.5); z-index: 80; /* por encima de los avisos: un aviso no debe tapar los botones de una hoja */ display: flex; align-items: flex-end; justify-content: center; animation: fade .15s; }
.sheet { width: 100%; max-width: 720px; max-height: 86dvh; background: var(--paper); border-radius: 24px 24px 0 0; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; animation: rise .2s; }
.sheet h2 { font-family: var(--font-title); font-size: 22px; letter-spacing: -.4px; }
.sheet__grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); align-self: center; flex-shrink: 0; }
.sheet .rows { max-height: 46dvh; overflow-y: auto; }
.sheet__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sheet__actions .btn { flex: 1; min-width: 130px; }
.viewer { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; align-items: center; justify-content: center; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer .viewer__close { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 12px; z-index: 2; }
.viewer .bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.viewer .bar .btn { flex: 1; }
.toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 70; pointer-events: none; padding: 0 16px; }
.toast { background: var(--ink); color: var(--paper); padding: 11px 16px; border-radius: 14px; font-size: 14px; display: flex; align-items: center; gap: 14px; pointer-events: auto; max-width: 560px; animation: rise .2s; }
.toast button { background: transparent; border: 0; color: var(--warn); font-weight: 700; padding: 6px 4px; min-height: 36px; }
:root[data-theme="dark"] .toast button { color: var(--kraft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast button { color: var(--kraft); } }
.empty { text-align: center; padding: 36px 12px; color: var(--ink2); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty svg { width: 64px; height: 64px; opacity: .8; }

.center-page { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 28px 24px; max-width: 420px; margin: 0 auto; }
.center-page .logo { width: 96px; height: 96px; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Lector de códigos ---------- */
.scanner { position: relative; background: #000; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner__aim { position: absolute; left: 12%; right: 12%; top: 32%; bottom: 32%; border: 3px solid var(--kraft); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); pointer-events: none; }
.scanner__msg { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px 12px; background: rgba(0,0,0,.65); color: #fff; font-size: 13px; text-align: center; }

/* ---------- Color de etiquetas ---------- */
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.swatch { aspect-ratio: 1 / 1; border-radius: 16px; border: 2px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 500; color: var(--ink); padding: 4px; position: relative; }
.swatch[aria-pressed="true"] { border-color: var(--ink); border-width: 3px; font-weight: 700; }
.swatch svg { width: 22px; height: 22px; }
.dot { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); }

/* ---------- Panel «Dar de baja» (refine-navigation-v9, decisión 10) ----------
   Hoja alta como «¿Dónde lo dejas?»: cabecera y pie fijos y, en medio, un cuerpo con desplazamiento. Nada se encoge para caber: si no
   cabe, se desplaza el cuerpo. Sin huecos reservados: el aviso de «Borrar del todo» sustituye a la explicación del motivo. */
.sheet--baja .baja { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.baja__scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 6px 2px 16px; }
.baja__scroll > * { flex: none; }
.baja__form { display: flex; flex-direction: column; gap: 18px; }
.baja__hint { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
.baja__warn { margin-top: 10px; padding: 14px 16px; gap: 8px; }
.baja__inside { margin: 0 0 8px; }
.baja .card { padding: 14px 16px; gap: 8px; }
.baja__foot .sheet__actions .btn { min-width: 0; }
.chip.chip--pick.chip--danger { color: var(--pin-text); border-color: color-mix(in srgb, var(--pin) 40%, var(--line)); }
.chip.chip--pick.chip--danger.chip--on { background: var(--pin); border-color: var(--pin); color: var(--on-pin); }
/* Cabecera de una hoja con «✕» (decisión 14): el título a la izquierda y el botón a 12 px del borde (la hoja tiene 20 px de relleno). */
.sheethead { flex: none; display: flex; align-items: flex-start; gap: 8px; margin-right: -8px; padding: 2px 0 8px; }
.sheethead > .grow { min-width: 0; }
.sheethead h2 { margin: 0; line-height: 28px; overflow-wrap: anywhere; }
.sheethead > .xbtn { margin-top: -8px; }   /* centrado con la primera línea del título (28 px), aunque haya subtítulo */
.is-off { visibility: hidden; }
.textarea--sm { min-height: 56px; }
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opt { min-height: 48px; padding: 0 10px; border-radius: 14px; border: 1.5px solid var(--edge); background: var(--card); font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.opt:hover { border-color: var(--ink2); }
.opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 700; }
.opt--danger { color: var(--pin-text); border-color: color-mix(in srgb, var(--pin) 40%, var(--line)); }
.opt--danger[aria-pressed="true"] { background: var(--pin); border-color: var(--pin); color: var(--on-pin); }
:root[data-theme="dark"] .opt[aria-pressed="true"]:not(.opt--danger) { background: var(--kraft); border-color: var(--kraft); color: #2B1D12; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .opt[aria-pressed="true"]:not(.opt--danger) { background: var(--kraft); border-color: var(--kraft); color: #2B1D12; }
}

body.dragging .toasts { visibility: hidden; }   /* un aviso anterior no debe tapar la papelera mientras se arrastra */

/* ---------- Vista de árbol («Todo lo de dentro») ---------- */
.tree { display: flex; flex-direction: column; gap: 6px; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.treewrap { display: flex; align-items: center; gap: 4px; padding-left: calc(var(--depth, 0) * 22px); }
.treetoggle { width: 34px; height: 44px; flex-shrink: 0; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--ink2); border-radius: 10px; }
button.treetoggle:hover { background: var(--kraft-l); color: var(--ink); }
.treetoggle svg { width: 18px; height: 18px; }
.treerow { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; box-shadow: var(--shadow); cursor: pointer; }
.treerow { transition: background-color .16s ease, border-color .16s ease; }
.treerow[aria-selected="true"] { background: var(--sel-plate); border-color: transparent; }
.treerow .tile__check { position: static; flex-shrink: 0; background: transparent; border-color: var(--ink2); box-shadow: none; }
.tree[data-selecting="1"] .tile__check { display: flex; }
.tree__thumb { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tree__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tree__thumb > svg { width: 22px; height: 22px; opacity: .85; }
.treerow__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }

/* ---------- Arrastrar para mover ---------- */
.grid .tile, .tree .treerow { cursor: pointer; }
.tile.lifted, .treerow.lifted { transform: scale(1.03); box-shadow: 0 10px 24px rgba(0,0,0,.28); z-index: 2; }
.tile.dragging-src, .treerow.dragging-src { opacity: .35; }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.drag-ghost { position: fixed; left: 0; top: 0; width: 72px; height: 72px; z-index: 90; pointer-events: none; border-radius: 16px; overflow: visible; box-shadow: 0 12px 28px rgba(0,0,0,.35); will-change: transform; }
.drag-ghost__photo { width: 72px; height: 72px; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); background: var(--t-sand); }
.drag-ghost__photo img { width: 100%; height: 100%; object-fit: cover; }
.drag-ghost__photo > svg { width: 36px; height: 36px; }
.drag-ghost__count { position: absolute; top: -8px; right: -8px; }
/* Cartel «Mover aquí: …»: por encima del dedo (arrastrar.js lo coloca; refine-navigation-v9, decisión 11). */
.drag-hint { position: fixed; left: 0; top: 0; z-index: 91; pointer-events: none; white-space: nowrap; max-width: calc(100vw - 16px); box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; padding: 8px 14px; border-radius: 999px; background: var(--pin); color: var(--on-pin); font-weight: 700; font-size: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.3); will-change: transform; }
.drag-hint[hidden] { display: none; }
.drop-ok { outline: 3px solid var(--pin) !important; outline-offset: -3px; }
.crumbs .drop-ok { background: var(--kraft); color: #2B1D12; border-radius: 8px; outline-offset: 0; padding: 6px 8px; }
.nav a.drop-ok { background: var(--kraft); color: #2B1D12; border-radius: 12px; }

/* ---------- Pantallas anchas (ordenador): barra lateral, contenido centrado, cuadrícula adaptable ---------- */
@media (min-width: 860px) {
  #app { max-width: none; display: block; }
  .nav, .nav[hidden], body.selecting .nav { position: sticky; top: 0; left: auto; right: auto; bottom: auto; margin: 0; max-width: none; width: auto;
    grid-column: 1; grid-row: 1; height: 100dvh; display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
    padding: 20px 14px; border-top: 0; border-right: 1.5px solid var(--line); overflow-y: auto; background: var(--card); }
  .nav a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; font-size: 15px; }
  .nav a:hover { background: var(--kraft-l); color: var(--ink); }
  .nav a[aria-current="page"] { background: var(--kraft-l); }
  .nav a svg { width: 22px; height: 22px; flex-shrink: 0; }
  .nav .add { order: -1; justify-content: stretch; padding: 0; margin: 0 0 14px; }
  .nav .add:hover { background: transparent; }
  .nav .add span { width: 100%; height: 48px; margin: 0; border-radius: 14px; gap: 8px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .nav .add svg { width: 22px; height: 22px; }
  .nav .badge { position: static; margin-left: auto; }

  #screen, #screen > .view { grid-column: 2; grid-row: 1; }
  #screen { display: contents; }
  .view { padding: 28px 40px 48px; height: 100dvh; }
  /* Aquí la altura es fija (no flexible), así que se resta la barra de abajo en lugar de usar margen. */
  body.selecting .view, .view--bar { height: calc(100dvh - var(--bar-h, 0px)); margin-bottom: 0; }
  .view > * { max-width: 1120px; margin-left: auto; margin-right: auto; width: 100%; }
  .title { font-size: 38px; }
  .title--sm { font-size: 28px; }

  /* Cuadrícula: tantas columnas como quepan; el nivel de zoom elige el tamaño de la ficha */
  .grid { grid-template-columns: repeat(auto-fill, minmax(var(--min, 220px), 1fr)); }
  .grid[data-cols="2"] { --min: 230px; } .grid[data-cols="3"] { --min: 180px; } .grid[data-cols="4"] { --min: 132px; }
  .grid[data-cols="5"] { --min: 108px; } .grid[data-cols="6"] { --min: 90px; }
  .grid[data-cols="1"] { grid-template-columns: 1fr; }

  /* La ficha: la foto es una tarjeta, no una franja a todo el ancho */
  .hero { margin: 0 auto; width: 100%; border-radius: 22px; max-height: 300px; aspect-ratio: 16 / 6; }
  .topbar .sync-pill { margin-left: auto; }

  /* Barras de acción, avisos y diálogos alineados con el contenido */
  .actionbar { left: 0; right: 0; max-width: none; margin: 0; padding: 14px max(40px, calc((100% - 1120px) / 2)) 18px; }
  .actionbar .btn { max-width: 360px; }
  .actionbar--col .btn { max-width: none; }
  .toasts { left: 0; bottom: 28px; }
  .backdrop { align-items: center; padding: 24px; }
  .sheet { max-width: 560px; border-radius: 24px; max-height: 84dvh; }
  .center-page { max-width: 440px; grid-column: 1 / -1; width: 100%; }
  .photoadd .shot { width: 190px; height: 190px; }
  .kv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
  .view > * { max-width: 1280px; }
  .actionbar { padding-inline: max(40px, calc((100% - 1280px) / 2)); }
}

/* ---------- Selector de fecha ---------- */
.datebtn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; cursor: pointer; }
.datebtn svg { width: 22px; height: 22px; color: var(--ink2); flex: none; }
.cal { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 380px; margin: 0 auto; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal__title { font-family: var(--font-title); font-weight: 700; font-size: 19px; color: var(--ink); background: transparent; border: 0; border-radius: 12px; padding: 8px 14px; min-height: 44px; }
button.cal__title:not(:disabled):hover { background: var(--card); }
button.cal__title:not(:disabled)::after { content: "▾"; font-size: 12px; margin-left: 6px; color: var(--ink2); }
.cal__yr { font-size: 19px; }
.cal__pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cal__cell { min-height: 56px; border-radius: 14px; border: 1.5px solid var(--edge); background: var(--card); color: var(--ink); font-size: 16px; font-weight: 500; text-transform: capitalize; }
.cal__cell:disabled { opacity: .35; }
.cal__cell[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 700; }
:root[data-theme="dark"] .cal__cell[aria-pressed="true"] { background: var(--kraft); border-color: var(--kraft); color: #2B1D12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cal__cell[aria-pressed="true"] { background: var(--kraft); border-color: var(--kraft); color: #2B1D12; } }
.cal__week, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.cal__week span { font-size: 12px; font-weight: 700; color: var(--ink2); padding: 4px 0; }
.cal__grid > span { min-height: 44px; }
.cal__day { min-height: 44px; border-radius: 12px; border: 1.5px solid transparent; background: transparent; color: var(--ink); font-size: 16px; font-weight: 500; }
.cal__day:hover:not(:disabled) { background: var(--card); border-color: var(--line); }
.cal__day.is-today { border-color: var(--ink2); }
.cal__day[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 700; }
.cal__day:disabled { color: var(--ink2); opacity: .35; cursor: default; }
:root[data-theme="dark"] .cal__day[aria-pressed="true"] { background: var(--kraft); border-color: var(--kraft); color: #2B1D12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cal__day[aria-pressed="true"] { background: var(--kraft); border-color: var(--kraft); color: #2B1D12; } }

/* Fila de utilidades (sincronización y tema) en Explorar: sola, arriba a la derecha y pequeña, para que no compita con el logo ni el título. */
.utilbar { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-bottom: -6px; }
.utilbar .sync-pill { font-size: 12px; }
.utilbar .iconbtn { width: 34px; height: 34px; min-width: 34px; border-radius: 11px; }
.utilbar .iconbtn svg { width: 18px; height: 18px; }

.crumbslot { height: 32px; margin: -4px 0 -10px; display: flex; align-items: flex-end; }   /* hueco fijo: el título no se mueve al entrar en un subnivel */
/* Las migas de Explorar comparten tipografía con el título (misma fuente, en negrita) para leerse como su continuación. */
.crumbslot .crumbs { font-family: var(--font-title); font-weight: 700; font-size: 15px; letter-spacing: -.2px; }
.crumbslot .crumbs svg { stroke-width: 2.6; }
.crumbslot .crumbs a:hover { color: var(--ink); }

/* ---------- Animaciones del panel «Dar de baja» (de la maqueta; cada una con su prefijo) ---------- */
.xb{animation-duration:var(--baja-dur,7s);animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.25,1)}
.xb-fb{transform-box:fill-box;transform-origin:50% 100%}
.xb-fc{transform-box:fill-box;transform-origin:50% 50%}
.xb-aLx{animation-name:xb-aLx}
.xb-aLt{animation-name:xb-aLt}
.xb-aRx{animation-name:xb-aRx}
.xb-aRt{animation-name:xb-aRt}
.xb-bX{animation-name:xb-bX}
.xb-bY{animation-name:xb-bY}
.xb-mX{animation-name:xb-mX}
.xb-mY{animation-name:xb-mY}
.xb-mF{animation-name:xb-mF}
.xb-s1{animation-name:xb-s1}
.xb-s2{animation-name:xb-s2}
@keyframes xb-aLx{0%{transform:translateX(-240px);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}14%{transform:translateX(0)}74%{transform:translateX(0);animation-timing-function:cubic-bezier(.5,0,.75,0)}88%{transform:translateX(-240px)}100%{transform:translateX(-240px)}}
@keyframes xb-aLt{0%{transform:rotate(0)}28%{transform:rotate(0)}31%{transform:rotate(-5deg)}34%{transform:rotate(8deg)}39%{transform:rotate(0)}46%{transform:translateY(0)}48%{transform:translateY(5px)}53%{transform:translateY(0)}100%{transform:translateY(0)}}
@keyframes xb-aRx{0%{transform:translateX(-240px);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}14%{transform:translateX(0)}74%{transform:translateX(0);animation-timing-function:cubic-bezier(.5,0,.75,0)}88%{transform:translateX(-240px)}100%{transform:translateX(-240px)}}
@keyframes xb-aRt{0%{transform:rotate(0)}28%{transform:rotate(0)}31%{transform:rotate(-5deg)}34%{transform:rotate(8deg)}39%{transform:rotate(0)}46%{transform:translateY(0)}48%{transform:translateY(5px)}53%{transform:translateY(0)}100%{transform:translateY(0)}}
@keyframes xb-bX{0%{transform:translateX(-124px);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}14%{transform:translateX(116px)}32%{transform:translateX(116px)}46%{transform:translateX(174px)}74%{transform:translateX(174px);animation-timing-function:cubic-bezier(.5,0,.75,0)}88%{transform:translateX(414px)}100%{transform:translateX(414px)}}
@keyframes xb-bY{0%{transform:translateY(0) rotate(0)}32%{transform:translateY(0) rotate(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}39%{transform:translateY(-38px) rotate(16deg);animation-timing-function:cubic-bezier(.6,0,.8,.4)}46%{transform:translateY(0) rotate(0)}48%{transform:translateY(5px) scale(1.08,.9)}53%{transform:translateY(0) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes xb-mX{0%{transform:translateX(404px);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}14%{transform:translateX(164px)}32%{transform:translateX(164px)}46%{transform:translateX(112px)}74%{transform:translateX(112px);animation-timing-function:cubic-bezier(.5,0,.75,0)}88%{transform:translateX(-128px)}100%{transform:translateX(-128px)}}
@keyframes xb-mY{0%{transform:translateY(0) rotate(0)}32%{transform:translateY(0) rotate(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}39%{transform:translateY(-6px) rotate(-14deg);animation-timing-function:cubic-bezier(.6,0,.8,.4)}46%{transform:translateY(0) rotate(0)}48%{transform:translateY(5px) scale(1.06,.9)}53%{transform:translateY(0) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes xb-mF{0%{transform:rotate(0)}32%{transform:rotate(0)}35%{transform:rotate(-12deg)}39%{transform:rotate(9deg)}43%{transform:rotate(-4deg)}47%{transform:rotate(0)}100%{transform:rotate(0)}}
@keyframes xb-s1{0%{opacity:0;transform:translateY(6px) scale(.5)}46%{opacity:0;transform:translateY(6px) scale(.5);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}50%{opacity:1;transform:translateY(0) scale(1)}56%{opacity:1;transform:translateY(-3px) scale(1)}61%{opacity:0;transform:translateY(-8px) scale(1)}100%{opacity:0;transform:translateY(-8px) scale(1)}}
@keyframes xb-s2{0%{opacity:0;transform:translateY(6px) scale(.5)}47%{opacity:0;transform:translateY(6px) scale(.5);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}51%{opacity:1;transform:translateY(0) scale(1)}57%{opacity:1;transform:translateY(-3px) scale(1)}62%{opacity:0;transform:translateY(-8px) scale(1)}100%{opacity:0;transform:translateY(-8px) scale(1)}}
.rh{animation-duration:var(--baja-dur,7s);animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.25,1)}
.rh-fb{transform-box:fill-box;transform-origin:50% 100%}
.rh-fc{transform-box:fill-box;transform-origin:50% 50%}
.rh-aLx{animation-name:rh-aLx}
.rh-aLt{animation-name:rh-aLt}
.rh-aRx{animation-name:rh-aRx}
.rh-aRt{animation-name:rh-aRt}
.rh-gX{animation-name:rh-gX}
.rh-gY{animation-name:rh-gY}
.rh-h0s{animation-name:rh-h0s}
.rh-h0y{animation-name:rh-h0y}
.rh-h0x{animation-name:rh-h0x}
.rh-h1s{animation-name:rh-h1s}
.rh-h1y{animation-name:rh-h1y}
.rh-h1x{animation-name:rh-h1x}
.rh-h2s{animation-name:rh-h2s}
.rh-h2y{animation-name:rh-h2y}
.rh-h2x{animation-name:rh-h2x}
@keyframes rh-aLx{0%{transform:translateX(-240px);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}12%{transform:translateX(0)}80%{transform:translateX(0);animation-timing-function:cubic-bezier(.5,0,.75,0)}92%{transform:translateX(-240px)}100%{transform:translateX(-240px)}}
@keyframes rh-aLt{0%{transform:rotate(0)}22%{transform:rotate(0)}25%{transform:rotate(-5deg)}28%{transform:rotate(8deg)}33%{transform:rotate(0)}100%{transform:rotate(0)}}
@keyframes rh-aRx{0%{transform:translateX(-240px);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}12%{transform:translateX(0)}80%{transform:translateX(0);animation-timing-function:cubic-bezier(.5,0,.75,0)}92%{transform:translateX(-240px)}100%{transform:translateX(-240px)}}
@keyframes rh-aRt{0%{transform:translateY(0)}38%{transform:translateY(0)}40%{transform:translateY(5px)}44%{transform:translateY(0)}100%{transform:translateY(0)}}
@keyframes rh-gX{0%{transform:translateX(-124px);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}12%{transform:translateX(116px)}26%{transform:translateX(116px)}38%{transform:translateX(174px)}80%{transform:translateX(174px);animation-timing-function:cubic-bezier(.5,0,.75,0)}92%{transform:translateX(414px)}100%{transform:translateX(414px)}}
@keyframes rh-gY{0%{transform:translateY(0) rotate(0)}26%{transform:translateY(0) rotate(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}32%{transform:translateY(-38px) rotate(16deg);animation-timing-function:cubic-bezier(.6,0,.8,.4)}38%{transform:translateY(0) rotate(0)}40%{transform:translateY(5px) scale(1.08,.9)}44%{transform:translateY(0) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes rh-h0s{0%{opacity:0;transform:scale(.3)}42%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}46%{opacity:1;transform:scale(1)}62%{opacity:1;transform:scale(1)}63.5%{opacity:1;transform:scale(1.15,.85)}66%{opacity:1;transform:scale(1)}92%{opacity:1;transform:scale(1)}93%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}
@keyframes rh-h0y{0%{transform:translateY(4px)}42%{transform:translateY(4px)}46%{transform:translateY(0)}49%{transform:translateY(-3px)}52%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}56%{transform:translateY(-16px);animation-timing-function:cubic-bezier(.6,0,.8,.4)}62%{transform:translateY(32px)}100%{transform:translateY(32px)}}
@keyframes rh-h0x{0%{transform:translateX(0)}52%{transform:translateX(0);animation-timing-function:cubic-bezier(.4,0,.5,1)}62%{transform:translateX(-54px)}80%{transform:translateX(-54px);animation-timing-function:cubic-bezier(.5,0,.75,0)}92%{transform:translateX(-294px)}100%{transform:translateX(-294px)}}
@keyframes rh-h1s{0%{opacity:0;transform:scale(.3)}45%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}49%{opacity:1;transform:scale(1)}66%{opacity:1;transform:scale(1)}67.5%{opacity:1;transform:scale(1.15,.85)}70%{opacity:1;transform:scale(1)}92%{opacity:1;transform:scale(1)}93%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}
@keyframes rh-h1y{0%{transform:translateY(4px)}45%{transform:translateY(4px)}49%{transform:translateY(0)}52%{transform:translateY(-3px)}56%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}60%{transform:translateY(-16px);animation-timing-function:cubic-bezier(.6,0,.8,.4)}66%{transform:translateY(36px)}100%{transform:translateY(36px)}}
@keyframes rh-h1x{0%{transform:translateX(0)}56%{transform:translateX(0);animation-timing-function:cubic-bezier(.4,0,.5,1)}66%{transform:translateX(-56px)}80%{transform:translateX(-56px);animation-timing-function:cubic-bezier(.5,0,.75,0)}92%{transform:translateX(-296px)}100%{transform:translateX(-296px)}}
@keyframes rh-h2s{0%{opacity:0;transform:scale(.3)}48%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}52%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1)}71.5%{opacity:1;transform:scale(1.15,.85)}74%{opacity:1;transform:scale(1)}92%{opacity:1;transform:scale(1)}93%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}
@keyframes rh-h2y{0%{transform:translateY(4px)}48%{transform:translateY(4px)}52%{transform:translateY(0)}55%{transform:translateY(-3px)}60%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}64%{transform:translateY(-16px);animation-timing-function:cubic-bezier(.6,0,.8,.4)}70%{transform:translateY(37px)}100%{transform:translateY(37px)}}
@keyframes rh-h2x{0%{transform:translateX(0)}60%{transform:translateX(0);animation-timing-function:cubic-bezier(.4,0,.5,1)}70%{transform:translateX(-55px)}80%{transform:translateX(-55px);animation-timing-function:cubic-bezier(.5,0,.75,0)}92%{transform:translateX(-295px)}100%{transform:translateX(-295px)}}
.tr{animation-duration:var(--baja-dur,7s);animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.25,1)}
.tr-fb{transform-box:fill-box;transform-origin:50% 100%}
.tr-fc{transform-box:fill-box;transform-origin:50% 50%}
.tr-aLx{animation-name:tr-aLx}
.tr-aLt{animation-name:tr-aLt}
.tr-bnB{animation-name:tr-bnB}
.tr-lid{animation-name:tr-lid}
.tr-bX{animation-name:tr-bX}
.tr-bY{animation-name:tr-bY}
.tr-p0{animation-name:tr-p0}
.tr-p1{animation-name:tr-p1}
.tr-p2{animation-name:tr-p2}
.tr-p3{animation-name:tr-p3}
@keyframes tr-aLx{0%{transform:translateX(-240px);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}12%{transform:translateX(0)}72%{transform:translateX(0);animation-timing-function:cubic-bezier(.5,0,.75,0)}84%{transform:translateX(-240px)}100%{transform:translateX(-240px)}}
@keyframes tr-aLt{0%{transform:rotate(0)}25%{transform:rotate(0)}28%{transform:rotate(-6deg)}31%{transform:rotate(9deg)}36%{transform:rotate(0)}100%{transform:rotate(0)}}
@keyframes tr-bnB{0%{transform:translateY(0)}44%{transform:translateY(0)}46%{transform:translateY(5px)}49%{transform:translateY(-2px)}52%{transform:translateY(0)}100%{transform:translateY(0)}}
@keyframes tr-lid{0%{transform:rotate(0)}17%{transform:rotate(0);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}23%{transform:rotate(105deg)}45%{transform:rotate(105deg);animation-timing-function:cubic-bezier(.5,0,.75,0)}49%{transform:rotate(0)}51%{transform:rotate(10deg)}54%{transform:rotate(0)}100%{transform:rotate(0)}}
@keyframes tr-bX{0%{transform:translateX(-124px);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}12%{transform:translateX(116px)}29%{transform:translateX(116px);animation-timing-function:cubic-bezier(.3,0,.6,1)}40%{transform:translateX(182px)}100%{transform:translateX(182px)}}
@keyframes tr-bY{0%{opacity:1;transform:translateY(0) rotate(0)}29%{opacity:1;transform:translateY(0) rotate(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}35%{opacity:1;transform:translateY(-44px) rotate(18deg);animation-timing-function:cubic-bezier(.6,0,.8,.4)}40%{opacity:1;transform:translateY(-22px) rotate(6deg);animation-timing-function:cubic-bezier(.5,0,1,1)}44%{opacity:1;transform:translateY(42px) rotate(2deg)}45%{opacity:0;transform:translateY(42px) rotate(2deg)}100%{opacity:0;transform:translateY(42px) rotate(2deg)}}
@keyframes tr-p0{0%{opacity:0;transform:translate(0,0) scale(.3)}48%{opacity:0;transform:translate(0,0) scale(.3);animation-timing-function:cubic-bezier(.2,.7,.4,1)}52%{opacity:1;transform:translate(-7.199999999999999px,-3.5999999999999996px) scale(1)}60%{opacity:0;transform:translate(-12px,-6px) scale(1.25)}100%{opacity:0;transform:translate(-12px,-6px) scale(1.25)}}
@keyframes tr-p1{0%{opacity:0;transform:translate(0,0) scale(.3)}48.5%{opacity:0;transform:translate(0,0) scale(.3);animation-timing-function:cubic-bezier(.2,.7,.4,1)}52.5%{opacity:1;transform:translate(7.199999999999999px,-3.5999999999999996px) scale(1)}60.5%{opacity:0;transform:translate(12px,-6px) scale(1.25)}100%{opacity:0;transform:translate(12px,-6px) scale(1.25)}}
@keyframes tr-p2{0%{opacity:0;transform:translate(0,0) scale(.3)}49.5%{opacity:0;transform:translate(0,0) scale(.3);animation-timing-function:cubic-bezier(.2,.7,.4,1)}53.5%{opacity:1;transform:translate(-3.5999999999999996px,-7.8px) scale(1)}61.5%{opacity:0;transform:translate(-6px,-13px) scale(1.25)}100%{opacity:0;transform:translate(-6px,-13px) scale(1.25)}}
@keyframes tr-p3{0%{opacity:0;transform:translate(0,0) scale(.3)}50%{opacity:0;transform:translate(0,0) scale(.3);animation-timing-function:cubic-bezier(.2,.7,.4,1)}54%{opacity:1;transform:translate(4.2px,-7.8px) scale(1)}62%{opacity:0;transform:translate(7px,-13px) scale(1.25)}100%{opacity:0;transform:translate(7px,-13px) scale(1.25)}}
.pf{animation-duration:var(--baja-dur,7s);animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.25,1)}
.pf-fb{transform-box:fill-box;transform-origin:50% 100%}
.pf-fc{transform-box:fill-box;transform-origin:50% 50%}
.pf-ax{animation-name:pf-ax}
.pf-at{animation-name:pf-at}
.pf-lp{animation-name:pf-lp}
.pf-bx{animation-name:pf-bx}
.pf-p0{animation-name:pf-p0}
.pf-p1{animation-name:pf-p1}
.pf-p2{animation-name:pf-p2}
.pf-p3{animation-name:pf-p3}
.pf-p4{animation-name:pf-p4}
.pf-sp{animation-name:pf-sp}
.pf-bd{animation-name:pf-bd}
.pf-tp{animation-name:pf-tp}
.pf-q0{animation-name:pf-q0}
.pf-q1{animation-name:pf-q1}
.pf-q2{animation-name:pf-q2}
@keyframes pf-ax{0%{transform:translate(-240px,0)}4%{transform:translate(-240px,0);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}18.31%{transform:translate(-30px,-30px);animation-timing-function:cubic-bezier(.45,0,.35,1)}30.23%{transform:translate(-30px,16px);animation-timing-function:cubic-bezier(.45,0,.35,1)}40.96%{transform:translate(0px,-12px);animation-timing-function:cubic-bezier(.45,0,.35,1)}45.73%{transform:translate(-10px,-8px);animation-timing-function:cubic-bezier(.5,0,.9,.5)}52.29%{transform:translate(54px,10px);animation-timing-function:cubic-bezier(.2,.8,.3,1)}58.85%{transform:translate(14px,2px)}66%{transform:translate(22px,2px)}78.31%{transform:translate(22px,2px);animation-timing-function:cubic-bezier(.5,0,.75,0)}88%{transform:translate(-240px,0)}100%{transform:translate(-240px,0)}}
@keyframes pf-at{0%{transform:rotate(0)}18.31%{transform:rotate(0)}24.27%{transform:rotate(4deg)}30.23%{transform:rotate(0)}35.6%{transform:rotate(-4deg)}40.96%{transform:rotate(0)}45.73%{transform:rotate(-3deg)}52.29%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.2,.8,.3,1)}57.06%{transform:rotate(-14deg)}64.81%{transform:rotate(0)}100%{transform:rotate(0)}}
@keyframes pf-lp{0%{opacity:1;transform:translate(0,0) rotate(0)}52.88%{opacity:1;transform:translate(0,0) rotate(0);animation-timing-function:cubic-bezier(.15,.7,.4,1)}60.04%{opacity:1;transform:translate(-36px,-64px) rotate(-280deg);animation-timing-function:cubic-bezier(.5,0,.9,.6)}69.08%{opacity:1;transform:translate(-80px,-170px) rotate(-600deg)}69.69%{opacity:0;transform:translate(-80px,-170px) rotate(-600deg)}99%{opacity:0;transform:translate(0,0) rotate(0)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes pf-bx{0%{opacity:1;transform:scale(1,1)}50.5%{opacity:1;transform:scale(1,1)}52.88%{opacity:1;transform:scale(1.18,.82);animation-timing-function:cubic-bezier(.5,0,.9,.5)}55.27%{opacity:1;transform:scale(0,0)}55.87%{opacity:0;transform:scale(0,0)}90%{opacity:0;transform:scale(0,0)}90.5%{opacity:0;transform:scale(1,1)}100%{opacity:1;transform:scale(1,1)}}
@keyframes pf-p0{0%{opacity:0;transform:translate(0,0) scale(.3)}53.48%{opacity:0;transform:translate(0,0) scale(.3);animation-timing-function:cubic-bezier(.2,.7,.4,1)}57.06%{opacity:1;transform:translate(-8.4px,1.2px) scale(1.15)}66.92%{opacity:0;transform:translate(-14px,2px) scale(1.4)}100%{opacity:0;transform:translate(-14px,2px) scale(1.4)}}
@keyframes pf-p1{0%{opacity:0;transform:translate(0,0) scale(.3)}53.48%{opacity:0;transform:translate(0,0) scale(.3);animation-timing-function:cubic-bezier(.2,.7,.4,1)}57.06%{opacity:1;transform:translate(4.8px,1.2px) scale(1.15)}66.92%{opacity:0;transform:translate(8px,2px) scale(1.4)}100%{opacity:0;transform:translate(8px,2px) scale(1.4)}}
@keyframes pf-p2{0%{opacity:0;transform:translate(0,0) scale(.3)}54.08%{opacity:0;transform:translate(0,0) scale(.3);animation-timing-function:cubic-bezier(.2,.7,.4,1)}57.65%{opacity:1;transform:translate(-5.3999999999999995px,-7.199999999999999px) scale(1.15)}67.23%{opacity:0;transform:translate(-9px,-12px) scale(1.4)}100%{opacity:0;transform:translate(-9px,-12px) scale(1.4)}}
@keyframes pf-p3{0%{opacity:0;transform:translate(0,0) scale(.3)}54.67%{opacity:0;transform:translate(0,0) scale(.3);animation-timing-function:cubic-bezier(.2,.7,.4,1)}58.25%{opacity:1;transform:translate(3.5999999999999996px,-7.199999999999999px) scale(1.15)}67.54%{opacity:0;transform:translate(6px,-12px) scale(1.4)}100%{opacity:0;transform:translate(6px,-12px) scale(1.4)}}
@keyframes pf-p4{0%{opacity:0;transform:translate(0,0) scale(.3)}55.27%{opacity:0;transform:translate(0,0) scale(.3);animation-timing-function:cubic-bezier(.2,.7,.4,1)}58.85%{opacity:1;transform:translate(0.0px,-9.0px) scale(1.15)}67.85%{opacity:0;transform:translate(0px,-15px) scale(1.4)}100%{opacity:0;transform:translate(0px,-15px) scale(1.4)}}
@keyframes pf-sp{0%{opacity:0;transform:scale(.25)}53.48%{opacity:0;transform:scale(.25);animation-timing-function:cubic-bezier(.1,.7,.3,1)}54.43%{opacity:1;transform:scale(.55)}57.65%{opacity:0;transform:scale(1.2)}100%{opacity:0;transform:scale(1.25)}}
@keyframes pf-bd{0%{stroke-dasharray:60 0;fill-opacity:1;stroke:#2B1D12}33.81%{stroke-dasharray:60 0;fill-opacity:1;stroke:#2B1D12}37.38%{stroke-dasharray:6 2;fill-opacity:.4;stroke:#4A3A2C}38.58%{stroke-dasharray:5 2.5;fill-opacity:.8;stroke:#4A3A2C}41.56%{stroke-dasharray:4 3;fill-opacity:.15;stroke:#6B5644}42.75%{stroke-dasharray:3.6 3.2;fill-opacity:.5;stroke:#6B5644}45.73%{stroke-dasharray:3.2 3.4;fill-opacity:0;stroke:#6B5644}90%{stroke-dasharray:3.2 3.4;fill-opacity:0;stroke:#6B5644}90.5%{stroke-dasharray:60 0;fill-opacity:1;stroke:#2B1D12}100%{stroke-dasharray:60 0;fill-opacity:1;stroke:#2B1D12}}
@keyframes pf-tp{0%{opacity:1}33.81%{opacity:1}37.38%{opacity:.3}38.58%{opacity:.7}42.15%{opacity:0}90%{opacity:0}90.5%{opacity:1}100%{opacity:1}}
@keyframes pf-q0{0%{opacity:0;transform:translateY(6px) scale(.3) rotate(0)}64.81%{opacity:0;transform:translateY(6px) scale(.3) rotate(0);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}67.85%{opacity:1;transform:translateY(0) scale(1) rotate(-12deg)}70.31%{opacity:1;transform:translateY(-2px) scale(1) rotate(6.0deg)}78.31%{opacity:1;transform:translateY(-3px) scale(1) rotate(0)}82%{opacity:0;transform:translateY(-10px) scale(.9) rotate(0)}100%{opacity:0;transform:translateY(-10px) scale(.9) rotate(0)}}
@keyframes pf-q1{0%{opacity:0;transform:translateY(6px) scale(.3) rotate(0)}68.46%{opacity:0;transform:translateY(6px) scale(.3) rotate(0);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}70.92%{opacity:1;transform:translateY(0) scale(1) rotate(10deg)}73.38%{opacity:1;transform:translateY(-2px) scale(1) rotate(-5.0deg)}78.31%{opacity:1;transform:translateY(-3px) scale(1) rotate(0)}82%{opacity:0;transform:translateY(-10px) scale(.9) rotate(0)}100%{opacity:0;transform:translateY(-10px) scale(.9) rotate(0)}}
@keyframes pf-q2{0%{opacity:0;transform:translateY(6px) scale(.3) rotate(0)}71.54%{opacity:0;transform:translateY(6px) scale(.3) rotate(0);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}74%{opacity:1;transform:translateY(0) scale(1) rotate(-4deg)}76.46%{opacity:1;transform:translateY(-2px) scale(1) rotate(2.0deg)}78.31%{opacity:1;transform:translateY(-3px) scale(1) rotate(0)}82%{opacity:0;transform:translateY(-10px) scale(.9) rotate(0)}100%{opacity:0;transform:translateY(-10px) scale(.9) rotate(0)}}
.uc{animation-duration:var(--baja-dur,7s);animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.25,1)}
.uc-fc{transform-box:fill-box;transform-origin:50% 50%}
.uc-ax{animation-name:uc-ax}
.uc-ay{animation-name:uc-ay}
.uc-bf{animation-name:uc-bf}
.uc-ct{animation-name:uc-ct}
.uc-fl{animation-name:uc-fl}
.uc-i0x{animation-name:uc-i0x}
.uc-i0y{animation-name:uc-i0y}
.uc-i0r{animation-name:uc-i0r}
.uc-p0{animation-name:uc-p0}
.uc-i1x{animation-name:uc-i1x}
.uc-i1y{animation-name:uc-i1y}
.uc-i1r{animation-name:uc-i1r}
.uc-p1{animation-name:uc-p1}
.uc-i2x{animation-name:uc-i2x}
.uc-i2y{animation-name:uc-i2y}
.uc-i2r{animation-name:uc-i2r}
.uc-p2{animation-name:uc-p2}
@keyframes uc-ax{0%{transform:translateX(-240px);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}12%{transform:translateX(34px)}73%{transform:translateX(34px);animation-timing-function:cubic-bezier(.4,0,.7,.6)}85%{transform:translateX(-240px)}100%{transform:translateX(-240px)}}
@keyframes uc-ay{0%{transform:translateY(0)}27%{transform:translateY(-0.0px)}28%{transform:translateY(2.0px)}30%{transform:translateY(-1.5px)}39%{transform:translateY(-1.5px)}40%{transform:translateY(0.5px)}42%{transform:translateY(-3.0px)}51%{transform:translateY(-3.0px)}52%{transform:translateY(-1.0px)}54%{transform:translateY(-4.5px)}73%{transform:translateY(-4.5px)}85%{transform:translateY(0)}100%{transform:translateY(0)}}
@keyframes uc-bf{0%{transform:scale(1,1)}27%{transform:scale(1,1)}28%{transform:scale(1.08,.9)}30%{transform:scale(1,1)}39%{transform:scale(1,1)}40%{transform:scale(1.08,.9)}42%{transform:scale(1,1)}51%{transform:scale(1,1)}52%{transform:scale(1.08,.9)}54%{transform:scale(1,1)}100%{transform:scale(1,1)}}
@keyframes uc-ct{0%{opacity:1}19%{opacity:1}20%{opacity:0}99%{opacity:0}100%{opacity:1}}
@keyframes uc-fl{0%{opacity:0;transform:scale(1,0)}19%{opacity:0;transform:scale(1,0);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}20%{opacity:1;transform:scale(1,.2);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}24%{opacity:1;transform:scale(1,1)}99%{opacity:1;transform:scale(1,1)}100%{opacity:0;transform:scale(1,0)}}
@keyframes uc-i0x{0%{transform:translateX(0)}27%{transform:translateX(0);animation-timing-function:cubic-bezier(.3,0,.6,1)}36%{transform:translateX(-20px)}100%{transform:translateX(-20px)}}
@keyframes uc-i0y{0%{opacity:0;transform:translateY(0) scale(1)}27%{opacity:0;transform:translateY(0) scale(1)}27.5%{opacity:1;transform:translateY(-4px) scale(1);animation-timing-function:cubic-bezier(.2,.6,.4,1)}36%{opacity:1;transform:translateY(-52px) scale(1)}37.5%{opacity:1;transform:translateY(-54px) scale(1.15)}38.5%{opacity:0;transform:translateY(-54px) scale(.4)}100%{opacity:0;transform:translateY(-54px) scale(.4)}}
@keyframes uc-i0r{0%{transform:rotate(0)}27%{transform:rotate(0)}37.5%{transform:rotate(-300deg)}100%{transform:rotate(-300deg)}}
@keyframes uc-p0{0%{opacity:0;transform:scale(.3)}37%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.2,.7,.4,1)}39%{opacity:1;transform:scale(1.2)}44%{opacity:0;transform:translateY(-6px) scale(1.5)}100%{opacity:0;transform:translateY(-6px) scale(1.5)}}
@keyframes uc-i1x{0%{transform:translateX(0)}39%{transform:translateX(0);animation-timing-function:cubic-bezier(.3,0,.6,1)}48%{transform:translateX(0px)}100%{transform:translateX(0px)}}
@keyframes uc-i1y{0%{opacity:0;transform:translateY(0) scale(1)}39%{opacity:0;transform:translateY(0) scale(1)}39.5%{opacity:1;transform:translateY(-4px) scale(1);animation-timing-function:cubic-bezier(.2,.6,.4,1)}48%{opacity:1;transform:translateY(-52px) scale(1)}49.5%{opacity:1;transform:translateY(-54px) scale(1.15)}50.5%{opacity:0;transform:translateY(-54px) scale(.4)}100%{opacity:0;transform:translateY(-54px) scale(.4)}}
@keyframes uc-i1r{0%{transform:rotate(0)}39%{transform:rotate(0)}49.5%{transform:rotate(200deg)}100%{transform:rotate(200deg)}}
@keyframes uc-p1{0%{opacity:0;transform:scale(.3)}49%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.2,.7,.4,1)}51%{opacity:1;transform:scale(1.2)}56%{opacity:0;transform:translateY(-6px) scale(1.5)}100%{opacity:0;transform:translateY(-6px) scale(1.5)}}
@keyframes uc-i2x{0%{transform:translateX(0)}51%{transform:translateX(0);animation-timing-function:cubic-bezier(.3,0,.6,1)}60%{transform:translateX(20px)}100%{transform:translateX(20px)}}
@keyframes uc-i2y{0%{opacity:0;transform:translateY(0) scale(1)}51%{opacity:0;transform:translateY(0) scale(1)}51.5%{opacity:1;transform:translateY(-4px) scale(1);animation-timing-function:cubic-bezier(.2,.6,.4,1)}60%{opacity:1;transform:translateY(-52px) scale(1)}61.5%{opacity:1;transform:translateY(-54px) scale(1.15)}62.5%{opacity:0;transform:translateY(-54px) scale(.4)}100%{opacity:0;transform:translateY(-54px) scale(.4)}}
@keyframes uc-i2r{0%{transform:rotate(0)}51%{transform:rotate(0)}61.5%{transform:rotate(-260deg)}100%{transform:rotate(-260deg)}}
@keyframes uc-p2{0%{opacity:0;transform:scale(.3)}61%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.2,.7,.4,1)}63%{opacity:1;transform:scale(1.2)}68%{opacity:0;transform:translateY(-6px) scale(1.5)}100%{opacity:0;transform:translateY(-6px) scale(1.5)}}
.bs{animation-duration:var(--baja-dur,7s);animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.25,1)}
.bs-fc{transform-box:fill-box;transform-origin:50% 50%}
.bs-ax{animation-name:bs-ax}
.bs-at{animation-name:bs-at}
.bs-b0{animation-name:bs-b0}
.bs-b1{animation-name:bs-b1}
.bs-b2{animation-name:bs-b2}
.bs-b3{animation-name:bs-b3}
.bs-b4{animation-name:bs-b4}
.bs-b5{animation-name:bs-b5}
.bs-b6{animation-name:bs-b6}
.bs-c0{animation-name:bs-c0}
.bs-c1{animation-name:bs-c1}
.bs-c2{animation-name:bs-c2}
.bs-c3{animation-name:bs-c3}
.bs-c4{animation-name:bs-c4}
.bs-c5{animation-name:bs-c5}
.bs-c6{animation-name:bs-c6}
.bs-g0{animation-name:bs-g0}
.bs-g1{animation-name:bs-g1}
.bs-bo{animation-name:bs-bo}
@keyframes bs-ax{0%{transform:translate(-240px,0);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}12%{transform:translate(0px,0px);animation-timing-function:cubic-bezier(.45,0,.35,1)}22%{transform:translate(38px,-14px);animation-timing-function:cubic-bezier(.4,0,.6,1)}25.5%{transform:translate(70px,-14px)}26%{transform:translate(70px,-7px);animation-timing-function:cubic-bezier(.4,0,.6,1)}29.5%{transform:translate(38px,-7px)}30%{transform:translate(38px,0px);animation-timing-function:cubic-bezier(.4,0,.6,1)}33.5%{transform:translate(70px,0px)}34%{transform:translate(70px,7px);animation-timing-function:cubic-bezier(.4,0,.6,1)}37.5%{transform:translate(38px,7px)}38%{transform:translate(38px,14px);animation-timing-function:cubic-bezier(.4,0,.6,1)}41.5%{transform:translate(70px,14px)}42%{transform:translate(70px,21px);animation-timing-function:cubic-bezier(.4,0,.6,1)}45.5%{transform:translate(38px,21px)}46%{transform:translate(38px,27px);animation-timing-function:cubic-bezier(.4,0,.6,1)}49.5%{transform:translate(70px,27px)}56%{transform:translate(0px,0px);animation-timing-function:cubic-bezier(.45,0,.35,1)}68%{transform:translate(0px,0px);animation-timing-function:cubic-bezier(.5,0,.75,0)}80%{transform:translate(-240px,0)}100%{transform:translate(-240px,0)}}
@keyframes bs-at{0%{transform:rotate(0)}22%{transform:rotate(0)}23.75%{transform:rotate(1.5deg)}25.5%{transform:rotate(0)}26%{transform:rotate(0)}27.75%{transform:rotate(-1.5deg)}29.5%{transform:rotate(0)}30%{transform:rotate(0)}31.75%{transform:rotate(1.5deg)}33.5%{transform:rotate(0)}34%{transform:rotate(0)}35.75%{transform:rotate(-1.5deg)}37.5%{transform:rotate(0)}38%{transform:rotate(0)}39.75%{transform:rotate(1.5deg)}41.5%{transform:rotate(0)}42%{transform:rotate(0)}43.75%{transform:rotate(-1.5deg)}45.5%{transform:rotate(0)}46%{transform:rotate(0)}47.75%{transform:rotate(1.5deg)}49.5%{transform:rotate(0)}100%{transform:rotate(0)}}
@keyframes bs-b0{0%{stroke-dashoffset:72;opacity:1}22%{stroke-dashoffset:72;opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)}25.5%{stroke-dashoffset:0;opacity:1}86%{stroke-dashoffset:0;opacity:1}86.5%{stroke-dashoffset:72;opacity:1}100%{stroke-dashoffset:72;opacity:1}}
@keyframes bs-b1{0%{stroke-dashoffset:72;opacity:1}26%{stroke-dashoffset:72;opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)}29.5%{stroke-dashoffset:0;opacity:1}86%{stroke-dashoffset:0;opacity:1}86.5%{stroke-dashoffset:72;opacity:1}100%{stroke-dashoffset:72;opacity:1}}
@keyframes bs-b2{0%{stroke-dashoffset:72;opacity:1}30%{stroke-dashoffset:72;opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)}33.5%{stroke-dashoffset:0;opacity:1}86%{stroke-dashoffset:0;opacity:1}86.5%{stroke-dashoffset:72;opacity:1}100%{stroke-dashoffset:72;opacity:1}}
@keyframes bs-b3{0%{stroke-dashoffset:72;opacity:1}34%{stroke-dashoffset:72;opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)}37.5%{stroke-dashoffset:0;opacity:1}86%{stroke-dashoffset:0;opacity:1}86.5%{stroke-dashoffset:72;opacity:1}100%{stroke-dashoffset:72;opacity:1}}
@keyframes bs-b4{0%{stroke-dashoffset:72;opacity:1}38%{stroke-dashoffset:72;opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)}41.5%{stroke-dashoffset:0;opacity:1}86%{stroke-dashoffset:0;opacity:1}86.5%{stroke-dashoffset:72;opacity:1}100%{stroke-dashoffset:72;opacity:1}}
@keyframes bs-b5{0%{stroke-dashoffset:72;opacity:1}42%{stroke-dashoffset:72;opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)}45.5%{stroke-dashoffset:0;opacity:1}86%{stroke-dashoffset:0;opacity:1}86.5%{stroke-dashoffset:72;opacity:1}100%{stroke-dashoffset:72;opacity:1}}
@keyframes bs-b6{0%{stroke-dashoffset:72;opacity:1}46%{stroke-dashoffset:72;opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)}49.5%{stroke-dashoffset:0;opacity:1}86%{stroke-dashoffset:0;opacity:1}86.5%{stroke-dashoffset:72;opacity:1}100%{stroke-dashoffset:72;opacity:1}}
@keyframes bs-c0{0%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}25.5%{opacity:0;transform:translate(0,0) rotate(0) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}25.8%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}28.5%{opacity:1;transform:translate(4px,46px) rotate(160deg) scale(1)}58.0%{opacity:1;transform:translate(4px,46px) rotate(160deg) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}61.0%{opacity:0;transform:translate(4px,46px) rotate(160deg) scale(0)}100%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes bs-c1{0%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}29.5%{opacity:0;transform:translate(0,0) rotate(0) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}29.8%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}32.5%{opacity:1;transform:translate(-4px,39px) rotate(160deg) scale(1)}58.6%{opacity:1;transform:translate(-4px,39px) rotate(160deg) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}61.6%{opacity:0;transform:translate(-4px,39px) rotate(160deg) scale(0)}100%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes bs-c2{0%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}33.5%{opacity:0;transform:translate(0,0) rotate(0) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}33.8%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}36.5%{opacity:1;transform:translate(4px,32px) rotate(160deg) scale(1)}59.2%{opacity:1;transform:translate(4px,32px) rotate(160deg) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}62.2%{opacity:0;transform:translate(4px,32px) rotate(160deg) scale(0)}100%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes bs-c3{0%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}37.5%{opacity:0;transform:translate(0,0) rotate(0) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}37.8%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}40.5%{opacity:1;transform:translate(-4px,25px) rotate(160deg) scale(1)}59.8%{opacity:1;transform:translate(-4px,25px) rotate(160deg) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}62.8%{opacity:0;transform:translate(-4px,25px) rotate(160deg) scale(0)}100%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes bs-c4{0%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}41.5%{opacity:0;transform:translate(0,0) rotate(0) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}41.8%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}44.5%{opacity:1;transform:translate(4px,18px) rotate(160deg) scale(1)}60.4%{opacity:1;transform:translate(4px,18px) rotate(160deg) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}63.4%{opacity:0;transform:translate(4px,18px) rotate(160deg) scale(0)}100%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes bs-c5{0%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}45.5%{opacity:0;transform:translate(0,0) rotate(0) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}45.8%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}48.5%{opacity:1;transform:translate(-4px,11px) rotate(160deg) scale(1)}61.0%{opacity:1;transform:translate(-4px,11px) rotate(160deg) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}64.0%{opacity:0;transform:translate(-4px,11px) rotate(160deg) scale(0)}100%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes bs-c6{0%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}49.5%{opacity:0;transform:translate(0,0) rotate(0) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}49.8%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}52.5%{opacity:1;transform:translate(4px,5px) rotate(160deg) scale(1)}61.6%{opacity:1;transform:translate(4px,5px) rotate(160deg) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}64.6%{opacity:0;transform:translate(4px,5px) rotate(160deg) scale(0)}100%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes bs-g0{0%{opacity:0;transform:scale(0) rotate(-40deg)}60%{opacity:0;transform:scale(0) rotate(-40deg);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}63%{opacity:1;transform:scale(1.0) rotate(0deg)}67%{opacity:1;transform:scale(0.9) rotate(15deg)}70%{opacity:0;transform:scale(0) rotate(30deg)}100%{opacity:0;transform:scale(0) rotate(30deg)}}
@keyframes bs-g1{0%{opacity:0;transform:scale(0) rotate(-40deg)}63%{opacity:0;transform:scale(0) rotate(-40deg);animation-timing-function:cubic-bezier(.25,1.3,.55,1)}66%{opacity:1;transform:scale(0.6) rotate(0deg)}70%{opacity:1;transform:scale(0.54) rotate(15deg)}73%{opacity:0;transform:scale(0) rotate(30deg)}100%{opacity:0;transform:scale(0) rotate(30deg)}}
@keyframes bs-bo{0%{opacity:1}52%{opacity:1}52.5%{opacity:0}90%{opacity:0}100%{opacity:1}}
.baja__anim { flex: none; box-sizing: border-box; width: 100%; max-width: 372px; height: 150px;   /* siempre 150 px: nunca se encoge (si no cabe, se desplaza el cuerpo) */
  margin: 0 auto; background: #FFFBF3; border: 1.5px solid #E2D3BA; border-radius: 20px; overflow: hidden; }   /* sin motivo elegido queda en blanco */
.baja__svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .baja__anim { display: none; } }

/* El icono de «sin imagen» es más fino que el resto: no compite con el contenido. */
.tile__photo > svg, .thumb svg, .tree__thumb > svg, .hero svg { stroke-width: 1.3; }
.tile__photo > svg { max-width: 52px; max-height: 52px; opacity: .6; }
.thumb svg, .tree__thumb > svg { opacity: .6; }

/* Barras de desplazamiento finas y con la estética de la app: pista transparente y pulgar redondeado en el tono del texto. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink2) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink2) 40%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink2) 65%, transparent); background-clip: content-box; }
.sheet { scrollbar-gutter: auto; }
.sheet:focus { outline: none; }   /* el diálogo recibe el foco al abrirse (refine-navigation-v6): sin recuadro; sus botones y campos conservan el suyo */
.sheet::-webkit-scrollbar { width: 12px; }

/* ---------- Botón ⓘ (Explorar): abre la ficha; tocar la tarjeta solo entra en lo que contiene cosas ---------- */
.infobtn { position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--paper) 88%, transparent); color: var(--ink); border: 1px solid var(--line); cursor: pointer; z-index: 2; }
.infobtn svg { width: 18px; height: 18px; }
.infobtn::after { content: ""; position: absolute; inset: -8px; }   /* zona táctil de 44 px */
.infobtn:hover { background: var(--card); border-color: var(--ink2); }
.tile:has(.infobtn) .tile__body { padding-right: 38px; }
.grid[data-cols="4"] .infobtn, .grid[data-cols="5"] .infobtn, .grid[data-cols="6"] .infobtn { width: 22px; height: 22px; right: 4px; bottom: 4px; }
.grid[data-cols="4"] .infobtn svg, .grid[data-cols="5"] .infobtn svg, .grid[data-cols="6"] .infobtn svg { width: 15px; height: 15px; }
.grid[data-cols="4"] .tile:has(.infobtn) .tile__body, .grid[data-cols="5"] .tile:has(.infobtn) .tile__body, .grid[data-cols="6"] .tile:has(.infobtn) .tile__body { padding-right: 30px; }
.grid[data-cols="1"] .tile .infobtn { position: relative; right: auto; bottom: auto; order: 9; flex-shrink: 0; }
.treerow .infobtn { position: relative; right: auto; bottom: auto; flex-shrink: 0; margin-left: auto; }
[data-selecting="1"] .infobtn { display: none; }
.tile--static { cursor: default; }

/* ---------- «Mis cosas»: selector de estados y botón «+» (la cabecera de tres líneas y las pestañas, más abajo) ---------- */
.mainhead__right { display: flex; align-items: center; gap: 8px; flex: none; }
.avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--edge); background: var(--card); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; }
.avatar svg { width: 22px; height: 22px; }
.explain { font-size: 13.5px; color: var(--ink2); background: color-mix(in srgb, var(--kraft-l) 45%, transparent); border-radius: 12px; padding: 8px 12px; }
.clearfilters { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed var(--ink2); background: none; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; }
.clearfilters svg { width: 14px; height: 14px; }
/* ---------- Recorrido guiado (recorrido.js): capa que oscurece, hueco sobre el elemento real y globo con el texto ---------- */
.tour { position: fixed; inset: 0; z-index: 85; }
.tour--centro { background: rgba(20,12,6,.6); animation: fade .15s; }
.tour__hueco { position: fixed; border-radius: 16px; box-shadow: 0 0 0 100vmax rgba(20,12,6,.6); outline: 2.5px solid var(--kraft); pointer-events: none; transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease; }
.tour__globo { position: fixed; left: 16px; top: 16px; width: min(360px, calc(100vw - 32px)); box-sizing: border-box; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 18px; padding: 14px 16px 12px; box-shadow: 0 12px 32px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 8px; animation: rise .2s; }
.tour__titulo { margin: 0; font-size: 18px; }
.tour__texto { margin: 0; font-size: 15px; color: var(--ink2); }
.tour__pie { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tour__anuncio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tour__contador { margin-right: auto; font-size: 13px; font-weight: 700; color: var(--ink2); }
.tour__ejemplo { position: fixed; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 4px; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; color: var(--ink); box-shadow: var(--shadow); }
.tour__ejemplo svg { width: 20px; height: 20px; }
.tour__ejemplo-flecha { width: 30px; display: inline-flex; justify-content: center; color: var(--ink2); }
.tour__ejemplo-foto { width: 44px; height: 44px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--kraft-l); }
.tour__ejemplo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tour__ejemplo-texto b { font-size: 15px; }
.tour__ejemplo-texto span { font-size: 12px; color: var(--ink2); }
.tour__ejemplo-info { width: 28px; height: 28px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .tour, .tour__globo, .tour__hueco { animation: none; transition: none; } }
.tile__meta .go { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; cursor: pointer; }
.tile__meta svg { width: 12px; height: 12px; vertical-align: -2px; }
/* Botones de abajo (refine-navigation-v3): fila centrada y fija, sin contenedor visible: «Yo» (56 px) · «＋» (80 px, relleno de acento) · «Buscar» (56 px).
   No se arrastran. En «Bajas» el hueco del «＋» se queda vacío para que «Yo» y «Buscar» no cambien de sitio. En modo selección no están. */
.fabbar { position: fixed; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; justify-content: center; gap: 22px; pointer-events: none; }
.fabbar[hidden], body.selecting .fabbar { display: none; }
.fabbar > a { pointer-events: auto; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.fabbar .fab-me, .fabbar .fab-search { width: 56px; height: 56px; border: 1.5px solid var(--edge); background: var(--card); color: var(--ink); box-shadow: 0 5px 14px rgba(43,29,18,.28); }
.fabbar .fab-me svg, .fabbar .fab-search svg { width: 27px; height: 27px; stroke-width: 2; }
.fabbar .fab-add { width: 80px; height: 80px; border: 0; background: var(--kraft); color: #2B1D12; box-shadow: 0 7px 18px rgba(43,29,18,.32); }
.fabbar .fab-add svg { width: 38px; height: 38px; stroke-width: 2.6; }
.fabbar .fab-add[hidden], .fabbar .fab-search[hidden] { display: none; }   /* en Bajas, sin «＋»: «Yo» y «Buscar» se centran juntos (refine-navigation-v9, decisión 12) */
.fabbar > a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Punto de aviso de la sincronización en «Yo» (refine-navigation-v4): solo cuando hay algo que atender (app.js, pintarAvisoYo). */
.fabbar .fab-me { position: relative; }
.fabbar .fab-me[data-aviso="1"]::after { content: ""; position: absolute; top: 1px; right: 1px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 7px; background: var(--pin-text); border: 2px solid var(--paper); }
/* Círculo de pendientes de administración (add-yo-pending-badge): arriba a la derecha de «Yo». Si lo hay, el punto de sincronización baja a la
   esquina de abajo a la derecha para que se vean los dos (también en la botonera «pastilla»). */
.fabbar .fab-me__pend { position: absolute; top: -5px; right: -5px; z-index: 1; box-sizing: border-box; min-width: 22px; height: 22px; border: 2px solid var(--paper); pointer-events: none; }
.fabbar .fab-me__pend[hidden] { display: none; }
.fabbar .fab-me[data-pend="1"][data-aviso="1"]::after { top: auto; bottom: 1px; }
html[data-lab-botonera="pastilla"] .fabbar .fab-me__pend { top: -2px; right: -2px; }
/* «Laboratorio de diseño» (temporal, laboratorio.js): botonera «Pastilla flotante». Se retira al decidir. */
html[data-lab-botonera="pastilla"] .fabbar { left: 50%; right: auto; transform: translateX(-50%); width: 320px; max-width: calc(100vw - 32px); height: 68px; bottom: calc(20px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 96px 1fr; align-items: center; justify-items: center; gap: 0; border-radius: 34px; background: var(--card); border: 1.5px solid var(--edge); box-shadow: 0 6px 18px rgba(43,29,18,.22); pointer-events: auto; }
html[data-lab-botonera="pastilla"] .fabbar[hidden], html[data-lab-botonera="pastilla"] body.selecting .fabbar { display: none; }
/* Pastilla de dos botones en Bajas (decisión 12): 160 × 68 px; el ancho cambia en 200 ms (sin transición con «reducir movimiento»). */
html[data-lab-botonera="pastilla"] .fabbar { transition: width .2s ease; }
html[data-lab-botonera="pastilla"] .fabbar[data-botones="2"] { width: 160px; grid-template-columns: 1fr 1fr; }
html[data-lab-botonera="pastilla"] .fabbar .fab-me, html[data-lab-botonera="pastilla"] .fabbar .fab-search { width: 52px; height: 52px; border: 0; background: transparent; box-shadow: none; color: var(--ink); }
html[data-lab-botonera="pastilla"] .fabbar .fab-me svg, html[data-lab-botonera="pastilla"] .fabbar .fab-search svg { width: 27px; height: 27px; }
html[data-lab-botonera="pastilla"] .fabbar .fab-add { width: 84px; height: 84px; align-self: start; margin-top: -30px; border: 5px solid var(--paper); box-sizing: border-box; }   /* sobresale 30 px por arriba */
.lab { border: 1.5px dashed var(--kraft-d); border-radius: 16px; padding: 12px 14px; background: var(--card); }
.lab > summary { font-weight: 700; cursor: pointer; }
.lab__grupo { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.lab__grupo .seg { flex-wrap: wrap; }
.view--ex { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }   /* lo último de la lista no queda debajo de los botones */
#clearslot:empty { display: none; }
/* En el móvil el aviso de sincronización se queda en el icono (el color sigue avisando de pendientes o errores). */
/* Sangría decreciente y filas más pequeñas cuanto más hondo (las variables --indent y --s las pone explorar.js). */
.treewrap { padding-left: var(--indent, 0px); }
.treewrap .tree__thumb { width: calc(44px * var(--s, 1)); height: calc(44px * var(--s, 1)); }
.treewrap .tile__name { font-size: calc(15px * var(--s, 1)); }
.treewrap .tile__meta { font-size: calc(12px * var(--s, 1)); }
.treewrap .treetoggle { height: calc(44px * var(--s, 1)); }

/* ---------- Selector de ubicación y listas en hojas: iconos con tamaño y filas más compactas ---------- */
.rowitem > svg { width: 20px; height: 20px; flex: none; color: var(--ink2); }
.sheet .rowitem { padding: 8px 0; gap: 12px; }
.sheet .thumb--sm { width: 42px; height: 42px; border-radius: 11px; }
.sheet .thumb--sm svg { width: 22px; height: 22px; }
.sheet .rowitem .bold { font-size: 15px; line-height: 1.25; }
.rowitem--new { color: var(--ink2); }
.thumb--new { background: transparent; border: 1.5px dashed var(--kraft-d); }
.sheet h2 + .crumbs { margin-top: -6px; }

/* ---------- Fotos al crear una cosa: tira con miniaturas ---------- */
.photostrip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
.pthumb { position: relative; flex: none; width: 66px; height: 66px; padding: 0; border-radius: 14px; border: 2px solid var(--line); background: var(--t-sand); overflow: hidden; }
.pthumb:first-child { border-color: var(--ink); }
.pthumb img { width: 100%; height: 100%; object-fit: cover; }
.pthumb__main { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--kraft); color: #2B1D12; display: inline-flex; align-items: center; justify-content: center; }
.pthumb__main svg { width: 12px; height: 12px; fill: currentColor; }
.bigphoto { display: flex; justify-content: center; background: var(--kraft-l); border-radius: 16px; overflow: hidden; max-height: 46dvh; }
.bigphoto img { max-width: 100%; max-height: 46dvh; object-fit: contain; }
.photoacts .btn { min-width: 0; flex: 1 1 40%; }
.btn--danger-text { color: var(--pin-text); }

/* ---------- Cabecera de tres líneas y pestañas (explorar.js): marca · migas · título; se encoge al hacer scroll sin ocultar nada ---------- */
/* Las medidas van en variables: expandida ≈ 216 px con migas y título, encogida ≈ 151 px. En horizontal (poca altura) va siempre encogida.
   refine-navigation-v5: la fila de la marca mide 60 px y los botones de 44 px van centrados en ella, así que siempre quedan 8 px por debajo
   y, con --pt, al menos 8 px por encima (10 px en la barra compacta); a los lados, el relleno de 20 px de la cabecera. */
.exhead {
  --pt: 6px; --pb: 10px; --brand-h: 60px; --logo: 40px; --brand-fs: 22px; --crumb-h: 36px; --title-h: 54px; --title-fs: 32px; --info: 40px;
  position: absolute; top: 0; left: 0; right: 0; z-index: 22; background: var(--paper);
  padding: calc(var(--pt) + env(safe-area-inset-top)) 20px var(--pb); box-shadow: 0 1px 0 transparent; transition: box-shadow .18s ease;
}
.exhead[data-compact="1"] {
  --pt: 2px; --pb: 2px; --brand-h: 60px; --logo: 26px; --brand-fs: 17px; --crumb-h: 28px; --title-h: 30px; --title-fs: 22px; --info: 30px;
  box-shadow: 0 1px 0 var(--line), 0 8px 14px -8px rgba(43,29,18,.25);
}
@media (max-height: 520px) {
  .exhead { --pt: 2px; --pb: 2px; --brand-h: 60px; --logo: 26px; --brand-fs: 17px; --crumb-h: 28px; --title-h: 30px; --title-fs: 22px; --info: 30px; }
}
/* Inicio de Activos: marca grande (logo 52 px, «Mis cosas» 32 px) que se encoge de forma continua con --p (0 = arriba, 1 = a 60 px de scroll o más).
   Sin transiciones: el tamaño sigue al dedo. De 92 px pasa a una barra de 64 px (2 + 60 + 2): los botones con 10 px arriba y abajo. */
.exhead[data-home="1"] {
  --pt: calc(18px - 16px * var(--p, 0)); --pb: calc(10px - 8px * var(--p, 0)); --brand-h: calc(64px - 4px * var(--p, 0)); --logo: calc(52px - 26px * var(--p, 0));
  --brand-fs: calc(32px - 14px * var(--p, 0));
}
@media (max-width: 374px) { .exhead[data-home="1"] { --logo: calc(44px - 18px * var(--p, 0)); --brand-fs: calc(27px - 9px * var(--p, 0)); } }   /* a 360 px la marca grande, las bandejas y la nube caben juntas */
.exhead[data-home="1"] .minibrand, .exhead[data-home="1"] .minibrand svg, .exhead[data-home="1"] .exhead__brand { transition: none; }
@media (max-height: 520px) { .exhead[data-home="1"] { --pt: 2px; --pb: 2px; --brand-h: 60px; --logo: 26px; --brand-fs: 18px; } }   /* en horizontal, siempre compacta */
.view--ex { padding-top: calc(var(--exh, 110px) + 10px); scroll-padding-top: var(--exh, 110px); }
.exhead__brand, .exhead__crumbline, .exhead__title { transition: height .18s ease, margin-top .18s ease; }
.exhead__brand { display: flex; align-items: center; gap: 2px; height: var(--brand-h); }
.exhead__brand > svg, .exhead__crumbline > svg, .exhead__title > svg { width: 13px; height: 13px; flex: none; stroke-width: 2.8; color: var(--ink2); }
.minibrand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-title); font-weight: 700; font-size: var(--brand-fs); letter-spacing: -.4px; line-height: 1; text-decoration: none; color: var(--ink); border-radius: 12px; padding: 2px 4px 2px 0; transition: font-size .18s ease; }
.minibrand svg { width: var(--logo); height: var(--logo); flex: none; transition: width .18s ease, height .18s ease; }
.minibrand span { white-space: nowrap; }
.mainhead__right { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.sync-pill { min-height: 32px; }
.sync-pill__n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; }
.sync-pill[data-state="error"] .sync-pill__n { background: var(--on-pin); color: var(--pin); }
.sync-pill[data-state="ok"] { padding-left: 8px; padding-right: 8px; }
.sync-pill[data-state="ok"] svg { width: 18px; height: 18px; }
.exhead__crumbline { display: flex; align-items: center; gap: 2px; height: var(--crumb-h); overflow: hidden; }
.exhead__crumbs { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.exhead__crumbs::-webkit-scrollbar { display: none; }
.exhead__crumbs[data-overflow="1"] { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px); mask-image: linear-gradient(90deg, transparent 0, #000 28px); }   /* la miga del borde izquierdo se ve cortada: hay más */
.crumbs__track { display: flex; align-items: center; gap: 2px; flex: none; }   /* empiezan pegadas al › fijo; si no caben, la línea se desliza con el final a la vista (JS) */
.exhead__crumbs a { flex: none; max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-title); font-weight: 700; font-size: 15px; letter-spacing: -.2px; color: var(--ink); padding: 4px 1px; }
.exhead__crumbs svg { width: 11px; height: 11px; flex: none; stroke-width: 2.8; }
.exhead__title { display: flex; align-items: center; gap: 2px; height: var(--title-h); min-width: 0; }
.exhead__title .title { flex: 1; min-width: 0; font-size: var(--title-fs); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: font-size .18s ease; }
/* Icono de ficha del título: el mismo dibujo y la misma zona de toque (44 × 44) que el de las filas; los márgenes negativos no engordan la línea. */
.exhead__info { flex: none; width: 44px; height: 44px; margin: -7px -10px -7px 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink2); }
.exhead__info svg { width: 24px; height: 24px; stroke-width: 1.8; }
.exhead__info:hover { background: var(--kraft-l); color: var(--ink); }

/* ---------- Bandejas (refine-navigation-v2): icono arriba a la derecha, con selector y marcador de lo que hay por revisar ---------- */
.exhead__brand { position: relative; }
.traywrap { display: inline-flex; }
.traybtn { position: relative; padding: 0; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
/* refine-navigation-v4: arriba a la derecha solo el botón de bandejas y, en el inicio de cada bandeja, «Desplegar todo» a su izquierda; los dos son
   cuadrados iguales (44 × 44, radio 14, borde 1,5, icono de 22 px con trazo 2). La sincronización ya no está en la cabecera: vive en «Yo». */
.exhead .mainhead__right { gap: 8px; }
.exhead .traybtn, .exhead__brand .expandbtn { position: relative; width: 44px; height: 44px; min-height: 44px; padding: 0; gap: 0; justify-content: center; border-radius: 14px; border: 1.5px solid var(--edge); background: var(--card); color: var(--ink); }
.exhead .traybtn svg, .exhead__brand .expandbtn svg { width: 22px; height: 22px; stroke-width: 2; }
.traybtn[data-on="1"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.traybtn__n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pin); color: var(--on-pin); font-size: 11px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--paper); }
.traymenu { position: absolute; right: 0; top: calc(100% + 2px); z-index: 40; min-width: 220px; display: flex; flex-direction: column; padding: 6px; border-radius: 14px; border: 1.5px solid var(--edge); background: var(--card); box-shadow: 0 10px 24px rgba(43,29,18,.22); }
.trayopt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 700; }
.trayopt[aria-checked="true"] { background: var(--kraft-l); }
.trayopt svg { width: 20px; height: 20px; flex: none; }
.trayopt__name { flex: 1; min-width: 0; }
.exhead__crumbs a.crumb--tray { display: inline-flex; align-items: center; gap: 5px; max-width: none; color: var(--pin-text); }
.exhead__crumbs a.crumb--tray svg { width: 15px; height: 15px; stroke-width: 2.2; }

/* ---------- Filas de la lista (redesign-list-rows) ---------- */
/* Miniatura sin foto: cuadrado de color con la inicial (el icono de «sin imagen» ya no se usa en las listas). */
.ini { font-family: var(--font-title); font-weight: 700; font-size: 22px; line-height: 1; color: var(--ink); opacity: .78; user-select: none; -webkit-user-select: none; }
.tile__photo .ini { font-size: 34px; }
.thumb .ini { font-size: 24px; }
.treewrap .ini { font-size: calc(22px * var(--s, 1)); }
.has-photo > .ini { display: none; }
/* Líneas de aviso bajo el nombre: «◉ Sin foto» y «Falta el nombre» en el rojo apto para texto (contraste ≥ 4,5 : 1). */
/* Icono de ficha: columna fija en el borde derecho (no se sangra ni se encoge con la profundidad), 24 px visibles y zona de toque de 44 × 44. */
.treerow { padding-right: 4px; }
.treerow .infobtn { position: relative; right: auto; bottom: auto; flex-shrink: 0; margin: -10px 0 -10px auto; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink2); }
.treerow .infobtn svg { width: 24px; height: 24px; stroke-width: 1.8; }
.treerow .infobtn::after { content: none; }
.treerow .infobtn:hover { background: var(--kraft-l); color: var(--ink); border: 0; }
/* Línea del contador: texto a la izquierda y «Desplegar todo» a la derecha. */
.countrow { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.countrow #countline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* la frase del contador siempre en una línea */
.expandbtn { flex: none; width: 36px; min-height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1.5px solid var(--edge); background: var(--card); color: var(--ink); font-size: 13px; font-weight: 600; }
.expandbtn svg { width: 20px; height: 20px; }
.expandbtn:hover { background: var(--kraft-l); }
.expandnote { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--ink2); margin-top: 6px; }
.expandnote[hidden] { display: none; }
.linkbtn { border: 0; background: transparent; padding: 6px 4px; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; min-height: 32px; }
/* Contador del campo de nombre («46 / 60»). */
.count { display: block; text-align: right; font-size: 13px; color: var(--ink2); margin-top: 4px; }
.count[hidden] { display: none; }
.count--over { color: var(--pin-text); font-weight: 700; }


/* ---------- Pantalla de búsqueda (#/buscar) ---------- */
.searchhead { flex: none; position: relative; z-index: 21; padding: calc(10px + env(safe-area-inset-top)) 20px 8px; background: var(--paper); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.view--search { padding-top: 10px; }
.chiprow { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 1px 0 2px; }
.chiprow::-webkit-scrollbar { display: none; }
.chiprow__label { flex: none; font-size: 12px; font-weight: 700; color: var(--ink2); }
.chiprow__sep { flex: none; width: 1px; height: 22px; background: var(--line); }
.chip.chip--pick { flex: none; padding: 8px 14px; background: var(--card); border-color: var(--edge); color: var(--ink); white-space: nowrap; }
.chip.chip--pick.chip--on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip__txt { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
.grp { margin: 14px 0 6px; font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.grp__n { font-weight: 500; }
mark { background: var(--kraft-l); color: inherit; border-radius: 3px; padding: 0 1px; }
.recentlist { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.recent { display: flex; align-items: center; gap: 2px; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding-right: 4px; }
.recent__text { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 12px 14px; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchhint { margin-top: 14px; }
/* En los resultados la ruta es lo importante: puede ocupar dos líneas en vez de cortarse con «…» a la primera. */
.view--search .tile__meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.empty .btn { width: 100%; max-width: 320px; }
.empty strong { color: var(--ink); font-size: 17px; }
/* «Seleccionar varios» en la línea del contador: icono pequeño, sin texto. */

/* ---------- Yo, etiquetas, acceso e instalar (redesign-yo) ---------- */
.yosec > .eyebrow { margin: 6px 0 0; }
.rowlink { cursor: pointer; font: inherit; min-height: 48px; }
.rowlink svg { width: 18px; height: 18px; flex: none; color: var(--ink2); }
.datos__exp { display: block; margin-top: 2px; }   /* «Yo › Datos»: explicación y tamaño bajo cada acción (refine-navigation-v9) */
.datos__fila[disabled], [data-datos-filas][aria-busy="true"] .datos__fila { opacity: .6; }
.datos__aviso { font-weight: 700; color: var(--pin-text); }   /* «No permite restaurar»: en negrita y con el color de aviso (refine-navigation-v11) */
/* Hoja de modos e informe de «Restaurar desde una copia» (add-restore-modes; diseño abierto, se afina en la ronda D) */
.restmodo { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; }
.restmodo:has(input:checked) { border-color: var(--ink); }
.restmodo:has(input:disabled) { cursor: default; }
.restmodo:has(input:disabled) > .grow > .bold { color: var(--ink2); }
.restmodo input[type="radio"], .restmarca input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }
.restmodo [hidden], .restmodo__detalle[hidden] { display: none; }
.restmodo__detalle { display: flex; flex-direction: column; gap: 8px; padding: 0 4px 4px; }
.restlista, .restinforme { list-style: none; margin: 0; padding: 0; max-height: 36dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.restmarca { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.restinforme { gap: 4px; font-size: 14px; }
.restinforme li { overflow-wrap: anywhere; }
.taglink { display: flex; align-items: center; gap: 4px; min-height: 44px; text-decoration: none; color: inherit; flex-wrap: wrap; }
.pwrow { position: relative; display: block; }
/* refine-navigation-v9: el ojo va dentro del campo, a la derecha; el campo mide lo mismo que los demás */
.pwrow .input { width: 100%; padding-right: 52px; }
.pwtoggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 44px; height: 44px; display: inline-flex; align-items: center;
  justify-content: center; border: 0; background: transparent; color: var(--ink2); border-radius: 12px; cursor: pointer; padding: 0; }
.pwtoggle svg { width: 22px; height: 22px; }
.pwtoggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* add-account-profile: el nombre de «Yo» se edita tocándolo (parece texto, es un botón de 44 px) */
.yoname { display: block; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 18px; font-weight: 700; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.yoname:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.linkbtn { background: none; border: 0; padding: 10px 4px; min-height: 44px; color: var(--ink); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; align-self: center; }
.installcard { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 2px solid var(--ink); box-shadow: 0 8px 24px rgba(43,29,18,.3); max-width: 520px; margin: 0 auto; }
.installcard[hidden] { display: none; }
.installcard .grow { min-width: 180px; }
@media (prefers-reduced-motion: no-preference) { .installcard { animation: installin .25s ease-out; } }
@keyframes installin { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Ficha de una cosa (redesign-ficha): título fijo arriba al hacer scroll, con una miniatura que abre las fotos; sin barra inferior. */
.ficha { padding-bottom: 24px; }
.ftitle { position: sticky; top: 0; z-index: 5; display: flex; align-items: flex-start; gap: 12px; min-height: 60px; margin: 0 -20px; padding: 8px 20px; background: var(--paper); }
.ftitle__thumb { flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: none; cursor: pointer; }
.ftitle__thumb[hidden] { display: none; }
.ftitle__box { position: relative; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; color: var(--ink); }
.ftitle__box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ftitle__h { margin: 0; font-size: 28px; line-height: 1.15; overflow-wrap: anywhere; }
.ftitle__btn { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: text; overflow-wrap: anywhere; }
.ftitle__qty { font-size: 14px; height: 26px; min-width: 26px; padding: 0 9px; border-radius: 13px; vertical-align: middle; }
.notesbtn { display: block; width: 100%; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; min-height: 36px; cursor: text; }
.fbaja { width: 100%; min-height: 52px; margin-top: 8px; }
.fbaja:not(.btn--ghost) { background: transparent; color: var(--pin-text); border-color: var(--pin); }
.here { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--ok); color: var(--ink); font-weight: 700; }

/* ---------- Título del nivel como tarjeta de la cosa (refine-navigation-v3): miniatura (foto o inicial), nombre, «Ficha» y, debajo, el contador
   (que ocupa todo el ancho: «Desplegar todo» está arriba, junto a las bandejas, desde refine-navigation-v5). Al encogerse la cabecera queda en
   una línea de 47 px: miniatura de 28 px a 8 px de los bordes de la tarjeta, nombre y el icono de ficha, con 8 px de aire por debajo.
   Delante va una flecha hacia abajo (⌄, solo indicativa): el título es el nivel abierto y lo de dentro está debajo. Se alinea con la primera
   línea de la tarjeta (miniatura y nombre) con --lc-pt y --lc-thumb. ---------- */
.exhead__title.levelcard { --lc-pt: 8px; --lc-thumb: 48px; height: auto; align-items: flex-start; margin-top: 4px; transition: height .18s ease, margin .18s ease; }
.exhead__title.levelcard > svg.levelcard__arrow { stroke-width: 2.6; margin-top: calc(1.5px + var(--lc-pt) + var(--lc-thumb) / 2 - 6.5px); }
.exhead[data-compact="1"] .exhead__title.levelcard { --lc-pt: 8px; --lc-thumb: 28px; margin-bottom: 8px; }
.levelcard__card { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "thumb name ficha" "count count count"; align-items: center; column-gap: 10px; row-gap: 4px; padding: 8px 8px 6px 8px; margin-left: 2px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.levelcard__thumb { grid-area: thumb; position: relative; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: width .18s ease, height .18s ease; }
.levelcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.levelcard__thumb .ini { font-size: 24px; }
/* refine-navigation-v8: la miniatura es un botón que abre el visor; zona de toque de 44 px o más también encogida (márgenes negativos, como «Ficha») */
.levelcard__thumbbtn { grid-area: thumb; position: relative; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: inherit; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.exhead__title.levelcard .title { grid-area: name; font-size: calc(var(--title-fs) * .75); }
.exhead__info.levelcard__ficha { grid-area: ficha; width: auto; min-width: 44px; height: 44px; margin: 0; padding: 0 10px; gap: 4px; border: 1.5px solid var(--edge); border-radius: 12px; color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; }
.levelcard__count { grid-area: count; display: flex; align-items: center; gap: 8px; min-height: 32px; min-width: 0; }
.levelcard__count #countline { min-width: 0; overflow-wrap: anywhere; }
.exhead[data-compact="1"] .levelcard__card { padding: 8px 10px 8px 8px; row-gap: 0; }
.exhead[data-compact="1"] .levelcard__thumb { width: 28px; height: 28px; border-radius: 8px; }
.exhead[data-compact="1"] .levelcard__thumb .ini { font-size: 15px; }
.exhead[data-compact="1"] .levelcard__count, .exhead[data-compact="1"] .levelcard__fichat { display: none; }
.exhead[data-compact="1"] .exhead__info.levelcard__ficha { border-color: transparent; margin: -8px -6px; padding: 0; }
.exhead[data-compact="1"] .levelcard__thumbbtn { width: 44px; height: 44px; margin: -8px; }
@media (max-height: 520px) {
  .exhead__title.levelcard { --lc-thumb: 28px; }
  .levelcard__card { padding: 8px 10px 8px 8px; row-gap: 0; }
  .levelcard__thumb { width: 28px; height: 28px; }
  .levelcard__thumbbtn { width: 44px; height: 44px; margin: -8px; }
  .levelcard__count, .levelcard__fichat { display: none; }
}
/* ---------- Tira de fotos y foto en grande (add-photo-order: fotos/photo-strip) ---------- */
.strip .thumb { position: relative; }
.strip .pthumb__main svg { width: 12px; height: 12px; opacity: 1; }
.strip .stripadd { border: 2px dashed var(--kraft-d); background: var(--kraft-l); color: var(--ink); font-size: 24px; font-weight: 700; }
.strip .stripadd[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.strip [data-pid] { touch-action: pan-x; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.strip [data-pid].is-dragging { border-color: var(--kraft-d); transform: scale(1.08); box-shadow: 0 6px 16px rgba(0,0,0,.3); z-index: 1; }
.hero__nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); font-size: 26px; line-height: 1; align-items: center; justify-content: center; cursor: pointer; z-index: 1; }
.hero__nav--prev { left: 12px; } .hero__nav--next { right: 12px; }
.hero__nav:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .hero__nav { display: inline-flex; } }
.viewer__count { position: absolute; left: 12px; top: calc(38px + env(safe-area-inset-top)); transform: translateY(-50%); z-index: 2; padding: 4px 10px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 12px; font-weight: 700; }
.viewer .viewer__bar { flex-wrap: wrap; gap: 8px; }
.viewer .viewer__bar .btn { flex: 1 1 40%; }
.viewer .viewer__bar .btn:disabled { opacity: .45; }
/* Visor «solo ver + Ver ficha» de la tarjeta del nivel (refine-navigation-v8): sin fotos, la inicial enorme sobre su color */
.viewer__ini { width: min(78vw, 56vh, 420px); aspect-ratio: 1; border-radius: 28px; display: flex; align-items: center; justify-content: center; }
.viewer__ini .ini { font-size: clamp(120px, 40vw, 240px); opacity: .78; }
.viewer .viewer__bar--ver { justify-content: center; }
.viewer .viewer__bar--ver .btn { flex: 0 1 260px; }
.viewer__help { flex: 1 1 100%; margin: 0; text-align: center; color: var(--ink2); font-size: 14px; }
/* Foto de una fila en grande (explorar): el mismo cuadrado de la lista, centrado sobre fondo oscuro; sin barra ni «Ver ficha». */
.viewer--sq { background: rgba(0,0,0,.88); }
.viewer__sq { position: relative; width: min(92vw, 80vh, 560px); aspect-ratio: 1; border-radius: 20px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.viewer .viewer__sq img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.viewer__sq .ini { font-size: clamp(120px, 40vw, 240px); opacity: .78; }
.viewer__sq.has-photo .ini { display: none; }
.viewer--sq .viewer__sq .hero__nav { display: inline-flex; }   /* también en el móvil: las flechas avisan de que hay más fotos */
.viewer--sq .viewer__sq .hero__nav--prev { left: 8px; } .viewer--sq .viewer__sq .hero__nav--next { right: 8px; }
.viewer__strip--sq { width: min(92vw, 560px); margin-top: 14px; overflow-x: auto; flex: none; }
.viewer__strip--sq .viewer__rthumb { flex: 0 0 56px; }
@keyframes visorin { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .viewer--ver { animation: visorin .18s ease-out; } }

/* ---------- Selector de ubicación (add-new-item-flow, decisión 22): hoja alta, tarjetas de selección única y pie fijo ---------- */
.sheet--tall { height: calc(100dvh - 48px); max-height: none; overflow: hidden; padding-bottom: 0; gap: 0; }
.loc { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.loc__scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 8px 2px 14px; }
.loc__head h2 { margin: 0; }
.loc__sub { margin: 2px 0 0; color: var(--ink2); font-size: 15px; overflow-wrap: anywhere; }
.locopts { display: flex; flex-direction: column; gap: 10px; }
.loc__browse .crumbs { margin-top: 16px; }   /* aire sobre las migas al recorrer (refine-navigation-v9, decisión 15) */
.loclevel { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--edge); background: var(--card); }
.loclevel--on { border-color: var(--choice); background: var(--sel-plate); }
.loclevel__t { display: block; font-size: 20px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.loclevel__s, .loclevel__n { display: block; font-size: 14px; color: var(--ink2); overflow-wrap: anywhere; }
.loclevel--on .locopt__dot { background: var(--choice); border-color: var(--choice); }
.loclevel--on .locopt__dot svg { opacity: 1; }
.locopt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--edge); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.locopt--browse { border-style: dashed; border-width: 1.5px; }
.locopt[aria-checked="true"] { border: 2px solid var(--choice); border-style: solid; background: var(--sel-plate); }
.locopt[aria-disabled="true"] { opacity: .55; cursor: default; }
.locopt:focus-visible { outline: 3px solid var(--choice); outline-offset: 2px; }
.locopt__ico { flex: none; width: 44px; height: 44px; border-radius: 22px; background: var(--kraft-l); display: inline-flex; align-items: center; justify-content: center; }
.locopt__ico svg { width: 22px; height: 22px; }
.locopt__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.locopt__t { font-size: 16px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.locopt__s { font-size: 13px; color: var(--ink2); line-height: 1.3; overflow-wrap: anywhere; }
.locopt__dot { flex: none; width: 26px; height: 26px; border-radius: 13px; border: 2px solid var(--edge); display: inline-flex; align-items: center; justify-content: center; color: var(--paper); }
.locopt__dot svg { width: 15px; height: 15px; opacity: 0; }
.locopt[aria-checked="true"] .locopt__dot { background: var(--choice); border-color: var(--choice); }
.locopt[aria-checked="true"] .locopt__dot svg { opacity: 1; }
.locopt--browse[aria-checked="false"] .locopt__dot { display: none; }
.locopt__go { flex: none; color: var(--ink2); display: inline-flex; }
.locopt__go svg { width: 18px; height: 18px; }
.loc__browse { display: flex; flex-direction: column; gap: 12px; }
.loc__back { align-self: flex-start; padding-left: 0; }
.sheet--tall .rows { max-height: none; overflow: visible; }
.sheet--tall .rowitem { min-height: 56px; }
.sheet--tall .crumbs a { min-height: 32px; display: inline-flex; align-items: center; }
.loc__foot { flex: none; display: flex; flex-direction: column; gap: 10px; margin: 0 -20px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1.5px solid var(--line); background: var(--paper); }
.loc__dest { margin: 0; font-size: 14px; color: var(--ink2); line-height: 1.35; overflow-wrap: anywhere; }
.loc__dest b { color: var(--ink); }
.loc__foot .sheet__actions .btn { min-width: 0; }
.loc__foot .btn:disabled { opacity: .45; }

/* ---------- Cámara de la app (fotos/in-app-camera) ---------- */
.camara { position: fixed; inset: 0; z-index: 95; background: #000; display: flex; flex-direction: column; }
.camara__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; }
.camara__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }   /* la imagen entera, sin recortar */
/* Cuadrado guía 1:1 del icono (add-camera-square-guide): lo coloca camara.js sobre la imagen; esquinas, etiqueta y velo en dos franjas. */
.camara__guia { display: none; position: absolute; box-sizing: border-box; pointer-events: none; border: 1.5px dashed rgba(255, 255, 255, .9); }
.camara__velo { display: none; position: absolute; pointer-events: none; background: rgba(0, 0, 0, .28); }
.camara__guia i { position: absolute; width: 16px; height: 16px; border: 3px solid #fff; }
.camara__guia i:nth-child(1) { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.camara__guia i:nth-child(2) { right: -2px; top: -2px; border-left: 0; border-bottom: 0; }
.camara__guia i:nth-child(3) { left: -2px; bottom: -2px; border-right: 0; border-top: 0; }
.camara__guia i:nth-child(4) { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.camara__rotulo { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.camara__movil { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .55); color: #fff; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.camara__bar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); background: #000; color: #fff; }
.camara__close { justify-self: start; }
.camara__shutter { width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 5px; cursor: pointer; }
.camara__shutter span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.camara__shutter:active span { transform: scale(.92); }
.camara__count { justify-self: end; font-weight: 700; }

/* ---------- Ficha nueva (add-new-item-flow): misma ficha, en modo «nueva»; sube desde abajo ---------- */
.ficha--nueva .hero { flex-direction: column; justify-content: flex-start; aspect-ratio: 4 / 3; max-height: 360px; padding-top: calc(52px + env(safe-area-inset-top)); }
.ficha--nueva .hero .hero__ini { font-size: clamp(64px, 22vw, 120px); line-height: 1; }
.ficha--nueva .hero__add { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ficha--nueva .hero__add .btn { min-height: 48px; }
.ficha--nueva .hero__add .linkbtn { padding: 6px 4px; }
.ficha--nueva .hero img { position: absolute; inset: 0; }
.nameinput { font-family: var(--font-title); font-size: 24px; font-weight: 700; min-height: 54px; }
@media (prefers-reduced-motion: no-preference) { .view--nueva { animation: subir .26s ease-out; } }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.dupsheet .rowitem { align-items: flex-start; }
.dupsheet .dup__go { flex: none; align-self: center; }

/* Lo recién añadido, resaltado unos 3 s al volver a la lista (con «reducir movimiento», marca fija sin animación). */
.treerow.is-new { background: var(--sel-plate); box-shadow: inset 0 0 0 2px var(--choice); border-radius: 12px; }
@media (prefers-reduced-motion: no-preference) { .treerow.is-new { animation: recien 3s ease-out; } }
@keyframes recien { 0%, 70% { background: var(--sel-plate); } 100% { background: transparent; } }

/* ---------- Hojas superpuestas (explorar/sheet-pattern, refine-navigation-v7): «Nueva cosa», «Buscar» y «Yo» ----------
   Casi toda la ventana (borde superior a 56 px), esquinas de 24 px, asa de 44 × 5, borde de 1,5 px y sombra hacia arriba, sobre una
   capa oscura que deja ver la pantalla de debajo (inerte). Por encima de la botonera (30); por debajo del visor (60), los avisos (70) y
   las hojas pequeñas (80). Las pantallas de dentro se pintan en una columna: su .view se desplaza y su barra va fija abajo. */
.psheet-layer { position: fixed; inset: 0; z-index: 50; }
.psheet__scrim { position: absolute; inset: 0; background: rgba(20,12,6,.5); }
.psheet { position: absolute; top: 56px; bottom: 0; left: 0; right: 0; max-width: 720px; margin: 0 auto; background: var(--paper); color: var(--ink); border: 1.5px solid var(--edge); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -6px 24px rgba(20,12,6,.35); display: flex; flex-direction: column; overflow: hidden; outline: none; }
@media (prefers-reduced-motion: no-preference) { .psheet--rise { animation: psheet-up .22s ease-out; } }
@keyframes psheet-up { from { transform: translateY(100%); } to { transform: none; } }
.psheet__grab { flex: none; width: 44px; height: 5px; border-radius: 3px; background: var(--edge); margin: 8px auto 0; touch-action: none; }
.psheet__head { flex: none; display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 6px 10.5px 6px 20px; touch-action: none; }   /* «✕» a 12 px del borde exterior (la hoja tiene 1,5 px de borde) */
.psheet__head:has(.psheet__back:not([hidden])) { padding-left: 10.5px; }
.psheet__title { flex: 1; min-width: 0; margin: 0; font-family: var(--font); font-size: 20px; font-weight: 800; letter-spacing: -.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psheet__body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* Las pantallas dentro de la hoja: sin la zona segura de arriba ni el hueco de la botonera; la barra de abajo deja de ser fija. */
.psheet__body .view { flex: 1; min-height: 0; height: auto !important; margin-bottom: 0 !important; padding: 4px 18px 24px; }
.psheet__body .view > * { max-width: none; }
.psheet__body .actionbar { position: static; flex: none; max-width: none; margin: 0; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); }
.psheet__body .actionbar[hidden] { display: none; }
.psheet__body .searchhead { padding: 0 18px 8px; }
.psheet__body .ficha--nueva .hero { margin: 0 -18px; padding-top: 16px; border-radius: 0; }
.psheet__body .view--nueva { animation: none; }

/* ---------- Búsqueda: «Filtros (n)» y hoja de filtros (refine-navigation-v7) ---------- */
.filterrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.filterbtn { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1.5px solid var(--edge); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.filterbtn svg { width: 18px; height: 18px; }
.filterbtn--on { border-color: var(--choice); background: var(--sel-plate); }
.filterbtn__n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.filtersum { min-width: 0; font-size: 13px; line-height: 1.3; color: var(--ink2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.grp svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; stroke-width: 2; }
.sheet.sheet--filters { height: calc(100dvh - 56px); max-height: none; padding: 8px 0 0; gap: 0; overflow: hidden; border: 1.5px solid var(--edge); border-bottom: 0; }
.sheet--filters .sheet__grab { margin-bottom: 2px; }
.filters { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.filters__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 6px 10.5px 6px 20px; }
.filters__head h2 { margin: 0; font-family: var(--font); font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.filters__body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 18px 16px; display: flex; flex-direction: column; gap: 18px; }
.fblock__t { margin: 0 0 8px; font-family: var(--font); font-size: 13px; font-weight: 800; letter-spacing: .5px; color: var(--ink2); }
.fblock__t span { font-weight: 600; letter-spacing: 0; }
.fblock__hint { margin: 8px 0 0; font-size: 13px; line-height: 1.35; color: var(--ink2); }
.traycards { display: flex; gap: 8px; }
.traycard { flex: 1; min-width: 0; min-height: 96px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.traycard svg { width: 22px; height: 22px; }
.traycard__name { font-size: 14px; font-weight: 700; text-align: center; }
.traycard__n { font-size: 12px; color: var(--ink2); text-align: center; }
.traycard__check { visibility: hidden; color: var(--choice); }
.traycard__check svg { width: 16px; height: 16px; stroke-width: 3.2; }
.traycard[aria-checked="true"] { border-color: var(--choice); background: var(--sel-plate); }
.traycard[aria-checked="true"] .traycard__check { visibility: visible; }
.traycard[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.withincard { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); }
.withincard--on { border-color: var(--choice); background: var(--sel-plate); }
.withincard > svg { width: 22px; height: 22px; flex: none; }
.withincard .grow { min-width: 0; display: flex; flex-direction: column; }
.withincard__t { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.withincard__s { font-size: 12px; color: var(--ink2); line-height: 1.3; overflow-wrap: anywhere; }
.withincard .btn { flex: none; min-height: 44px; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchips .chip--pick { min-height: 44px; }
.filters__foot { flex: none; display: flex; gap: 10px; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1.5px solid var(--line); }
.filters__foot .btn { flex: 1; min-height: 52px; }
.filters__foot .btn:last-child { flex: 2; }

/* Versión mínima de cliente (pwa/min-client-version): franja fija «Hay una versión nueva…» con «Actualizar ahora». */
.updatebar { position: fixed; left: 0; right: 0; top: 0; z-index: 90; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--warn); color: var(--ink); border-bottom: 2px solid var(--ink); box-shadow: 0 4px 16px rgba(43,29,18,.25); }
.updatebar p { flex: 1 1 200px; margin: 0; font-weight: 600; }

/* refine-navigation-v9 · ficha y fotos ---------------------------------------------------------------------------------------- */
/* Criterio de recuadro (decisión 4): un bloque vacío es una fila discreta «＋ Añadir…», sin borde ni fondo de tarjeta. */
.addrow { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 2px; border: 0; background: none; color: var(--ink2); font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.addrow svg { width: 18px; height: 18px; flex: none; }
.addrow[aria-disabled="true"] { opacity: .5; cursor: default; }
.card .addrow { min-height: 40px; padding: 2px 0; }
.fbox:empty { display: none; }
/* Historial (decisión 6): una sola tarjeta; la cabecera-botón ya no lleva borde propio. */
.disclosure > span { min-width: 0; }
.fhist .history { border-top: 1.5px solid var(--line); padding-top: 10px; }
/* Código de barras en su tarjeta (decisión 5): el código en grande. */
.codein { font-size: 22px; font-weight: 700; letter-spacing: .5px; font-variant-numeric: tabular-nums; min-height: 52px; }
/* Cabecera sin fotos de la ficha creada (decisión 1): la inicial y, debajo, «Hacer foto» y «o elegir de la galería». */
.hero.hero--empty { aspect-ratio: auto; max-height: none; flex-direction: column; justify-content: center; gap: 6px; padding: calc(60px + env(safe-area-inset-top)) 16px 18px; }
.hero--empty .hero__ini { line-height: 1; }
.hero__add { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hero__add .btn { min-height: 48px; }
.hero__add .linkbtn { padding: 6px 4px; }
/* Visor: acciones en rejilla de 2 × 2 (decisión 2), todas del mismo ancho y alto, con el texto centrado. */
.viewer .viewer__bar--edit { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 48px; gap: 8px; }
.viewer .viewer__bar--edit .btn { width: 100%; height: 48px; min-height: 0; min-width: 0; margin: 0; justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Menú de una miniatura (decisión 3). */
.photomenu .rowitem:disabled { opacity: .45; cursor: default; }
.rowitem--danger { color: var(--pin-text); }
.rowitem--danger > svg { color: var(--pin); }
/* «N dentro» discreto (decisión 8): sin la pastilla oscura; la cantidad «× N» sigue como estaba. */
.badge.badge--soft { background: var(--card); color: var(--ink2); border: 1.5px solid var(--line); font-weight: 700; }
/* Banda compacta sin hueco (decisión 9, tarea 1.3): pegada, tapa también el relleno superior de la vista hasta el borde de la pantalla. */
.ftitle.is-stuck::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(16px + env(safe-area-inset-top)); background: var(--paper); }
/* La tira va pegada a la foto y al título (8 px en vez de 16): con 2 fotos a 390 px la banda queda pegada antes de bajar 300 px. */
.ficha > #hero + .stack:has([data-strip]) { margin-top: -8px; }
.ficha > #hero + .stack:has([data-strip]) + .ftitle { margin-top: -8px; }
.card > .stepper, .card > #qty { align-self: flex-start; }


/* refine-navigation-v9 · navegación y cierre (decisión 14) -------------------------------------------------------------------------
   Un único botón «✕» (cerrar: hojas altas, «Dar de baja», «¿Dónde lo dejas?», filtros, visor, barra de selección, cámara) y un único «‹»
   (volver: ficha, subpantallas de «Yo»): 44 × 44 px, redondo, sin borde, fondo kraft claro, icono de 22 px con trazo 2,4, a 12 px del
   borde de su contenedor y centrado en vertical con el título de su cabecera. */
.xbtn { flex: none; box-sizing: border-box; width: 44px; height: 44px; border-radius: 22px; border: 0; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: var(--kraft-l); cursor: pointer; }
.xbtn svg { width: 22px; height: 22px; stroke-width: 2.4; }
.xbtn[hidden] { display: none; }
.xbtn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.hero .hero__back { position: absolute; top: calc(16px + env(safe-area-inset-top)); left: 12px; z-index: 2; }
.actionbar .selbar__close { margin-right: -8px; }
@media (min-width: 860px) { .hero .hero__back { top: 16px; } }
/* Visor: la foto arriba y, debajo, una barra de botones como las de la app (fondo de papel, borde superior, botones normales de 48 px y
   zona segura), en vez de botones pequeños sobre un degradado encima de la foto. */
.viewer { flex-direction: column; }
.viewer > img { flex: 1 1 auto; min-height: 0; width: 100%; max-height: none; object-fit: contain; }
.viewer > .viewer__ini { margin: auto; }
.viewer .bar { position: static; flex: none; width: 100%; box-sizing: border-box; max-width: 720px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1.5px solid var(--line); border-radius: 20px 20px 0 0; }
.viewer .viewer__bar--edit { grid-auto-rows: 48px; gap: 10px; }
.viewer .viewer__bar .btn:disabled { opacity: .45; }
/* Primer nivel de cada bandeja (refine-navigation-v9): el resumen va pegado a la marca, como el de la tarjeta de un nivel; en el inicio de
   Activos, alineado con el texto «Mis cosas» y encogiéndose con la marca al hacer scroll. */
.exhead__home { display: contents; }
.exhead__count { display: flex; align-items: center; height: var(--count-h, 22px); margin-top: -2px; overflow: hidden; transition: height .18s ease; }
.exhead__count #countline { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exhead[data-home="1"] .exhead__count { --count-h: calc(22px - 22px * var(--p, 0)); margin-top: -6px; padding-left: calc(var(--logo) + 8px); opacity: calc(1 - var(--p, 0)); transition: none; }
.exhead[data-compact="1"]:not([data-home="1"]) .exhead__count { height: 0; }
/* Laboratorio «Cabecera del nivel 0: Tarjeta»: marca y resumen en una tarjeta como la del título de un nivel. */
html[data-lab-cabecera0="tarjeta"] .exhead__home { display: block; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 0 8px 6px 10px; margin: 2px -4px 0; }
/* El margen negativo y el relleno inferior se encogen con --p (como la altura del resumen): encogida, la tarjeta deja los mismos 8 px bajo los botones que arriba. */
html[data-lab-cabecera0="tarjeta"] .exhead[data-home="1"] .exhead__home { padding-bottom: calc(6px - 6px * var(--p, 0)); }
html[data-lab-cabecera0="tarjeta"] .exhead[data-home="1"] .exhead__home .exhead__count { margin-top: calc(-6px + 6px * var(--p, 0)); }
html[data-lab-cabecera0="tarjeta"] .exhead[data-compact="1"]:not([data-home="1"]) .exhead__home { padding-bottom: 0; }
/* refine-navigation-v9 (cuentas/yo-screen): «Sincronizar» centrado y a todo el ancho de su tarjeta (hasta 320 px); lo pendiente, plegado. */
.yosync__btn { align-self: center; width: 100%; max-width: 320px; justify-content: center; }
.yosync__pend > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.yosync__pend ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
/* «Yo › SEGURIDAD › Actividad reciente de tu cuenta» (add-security-notice-reserve). El punto de «Yo» reutiliza el de sincronización. */
.actividad { display: flex; flex-direction: column; gap: 8px; }
.actividad__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.actividad__lista li[data-nuevo="1"] { font-weight: 600; }
.actividad__nuevo { min-height: 0; padding: 1px 8px; font-size: 11px; }
/* refine-navigation-v9 (cuentas/login-screen): «Iniciar sesión» es la acción principal; «Crear cuenta por primera vez», secundaria y separada */
.login__alta { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1.5px solid var(--line); text-align: center; }
.login__o { text-align: center; margin: 0; }
/* add-google-sign-in: el botón oficial de Google (un iframe de Google) centrado en su hueco; alto fijo para que no salte al aparecer. */
.login__google { display: flex; justify-content: center; min-height: 44px; }
/* add-admin-invitations («Yo › ADMINISTRACIÓN»): botones de 44 px y estados. El aire sobre el teclado para «Enviar invitación» lo da ya
   teclado.js (refine-navigation-v10), como en el resto de formularios: sin el hueco fijo de 40 vh al final. */
.adm .btn--sm { min-height: 44px; }
.adm__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm__who, .adm__note, .adm__link, .adm__para, #inv-creada-para, #alta-para { overflow-wrap: anywhere; }
.adm__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.adm__item { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1.5px solid var(--line); }
.adm__item:last-child { border-bottom: 0; padding-bottom: 0; }
.adm__new { border-color: var(--ink); }
.adm__code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 22px; font-weight: 700; letter-spacing: 2px; overflow-wrap: anywhere; }
.adm__st { min-height: 28px; padding: 4px 10px; }
.adm__st--pending { background: var(--t-sky); }
.adm__st--used { background: var(--t-sage); }
.adm__st--expired { background: var(--t-stone); }
.adm__st--revoked { background: var(--t-rose); }
/* refine-invitations-list: estado de la cuenta creada y secciones plegables de la lista */
.adm__cta--active { background: var(--t-mint); }
.adm__cta--disabled { background: var(--t-mustard); }
.adm__cta--deleted { background: var(--t-stone); }
.adm__item .adm__who { min-width: min(100%, 14em); }   /* con dos etiquetas, bajan ellas y no se parte el correo */
.adm__sec { border-top: 1.5px solid var(--line); }
.adm__sec:first-child { border-top: 0; }
.adm__sum { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; }
.adm__sum::-webkit-details-marker { display: none; }
.adm__sum::after { content: "▸"; color: var(--ink2); transition: transform .15s; }
.adm__sec[open] > .adm__sum::after { transform: rotate(90deg); }
.adm__sec > div > .adm__item:first-child { padding-top: 4px; }
/* add-invitation-requests: estados de las solicitudes e interruptor «Aceptar solicitudes» (44 px de alto para el dedo) */
.adm__st--approved { background: var(--t-sage); }
.adm__st--rejected { background: var(--t-rose); }
.adm__switch { position: relative; flex: none; width: 56px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.adm__switch::before { content: ""; position: absolute; left: 4px; right: 4px; top: 9px; height: 26px; border-radius: 13px; background: var(--line); border: 1.5px solid var(--edge); transition: background .15s; }
.adm__switch::after { content: ""; position: absolute; left: 9px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink2); transition: transform .15s, background .15s; }
.adm__switch[aria-checked="true"]::before { background: var(--ok-dot); border-color: var(--ok-dot); }
.adm__switch[aria-checked="true"]::after { transform: translateX(22px); background: var(--on-pin); }
.adm__switch:disabled { opacity: .6; cursor: default; }
.adm__switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }

/* refine-navigation-v10 · cámara: revisión de la foto (decisión 1) ---------------------------------------------------------------
   Tras disparar se ve la foto quieta (en lugar del vídeo, que sigue en marcha debajo) y la barra pasa a «✕» · «Repetir» · «Usar foto». */
.camara [hidden] { display: none !important; }
.camara.is-review .camara__stage { display: none; }
.camara.is-review .camara__bar { display: flex; align-items: center; gap: 10px; }
.camara.is-review .camara__bar .btn { flex: 1; min-width: 0; min-height: 48px; }
.camara .camara__again { background: transparent; color: #fff; border-color: #fff; }

/* refine-navigation-v10 · visor: «Reordenar» (decisión 2) --------------------------------------------------------------------------
   Barra normal: «★ Hacer principal» y «Reordenar» en una fila y «Quitar esta foto» debajo, a todo el ancho. Modo «Reordenar»: toda la
   tira a la vez (hasta 6 miniaturas de igual tamaño, máximo 52 px), la elegida con borde de 3 px, y «‹» «›» «Listo» en una fila. */
.viewer .viewer__bar--edit .viewer__del { grid-column: 1 / -1; }
.viewer .viewer__bar--reorder { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.viewer__rtitle { margin: 0; font-size: 14px; color: var(--ink2); text-align: center; }
.viewer__rtitle b { color: var(--ink); }
.viewer__strip { display: flex; justify-content: center; gap: 8px; }
.viewer__rthumb { position: relative; flex: 0 1 52px; min-width: 0; aspect-ratio: 1; padding: 0; border-radius: 12px; border: 2px solid var(--line); background: var(--t-sand); overflow: hidden; cursor: pointer; }
.viewer__rthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewer__rthumb[aria-current="true"] { border: 3px solid var(--choice); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--choice); }
.viewer__rthumb .pthumb__main { position: absolute; left: 2px; top: 2px; }
.viewer__rthumb .pthumb__main svg { width: 12px; height: 12px; }
.viewer__rrow { display: flex; gap: 10px; }
.viewer .viewer__rrow .btn { min-height: 48px; }
.viewer .viewer__rrow .viewer__arrow { flex: 0 0 64px; padding: 0; font-size: 26px; line-height: 1; }
.viewer .viewer__rrow .viewer__done { flex: 1; }

/* refine-navigation-v10 · ficha: relleno inferior justo (decisión 4). La ficha no tiene botonera flotante encima: bajo «Dar de baja»
   quedan 24 px más la zona segura (antes 128 px: los 104 de la botonera de .view más los 24 de .ficha). */
#fi.view { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
#fi > .ficha { padding-bottom: 0; }

/* refine-navigation-v10 · hoja «Dar de baja» (decisión 5) -------------------------------------------------------------------------
   Cabecera, parte de arriba (ilustración, motivos, unidades y fecha) y pie fijos; solo se desplaza la parte de abajo (nota, avisos y
   «Contiene»), separada por una línea. Los motivos, en una rejilla de columnas iguales que llena cada fila (--cols lo calcula acciones.js).
   La ilustración se reduce a escala (alto y ancho los pone acciones.js) o se oculta (.is-gone) si la parte de abajo no llegaría a 96 px. */
.baja__top { flex: none; display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 12px; }
.baja__fixed { display: flex; flex-direction: column; gap: 14px; }
.baja__top .baja__anim { margin: 0 auto; }
.baja__anim.is-gone { display: none; }
.sheet--baja .baja__scroll { border-top: 1.5px solid var(--line); margin: 0 -20px; padding: 14px 22px 16px; gap: 16px; }
.baja__motivos { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; }
.baja__motivos .chip--pick { min-width: 0; min-height: 44px; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; padding: 6px 8px; }
.baja__hint { margin-top: 8px; }
.baja__inside { gap: 8px; margin: 0; }
.baja__inside .fblock__t { margin: 0; }
.baja__count { margin: 0; font-size: 18px; font-weight: 700; }
.baja__none, .baja__what { margin: 0; font-size: 15px; line-height: 1.4; }
.baja__what { color: var(--ink2); }
/* fix-give-up-contents: resumen fijo encima de los botones; con cosas dentro, toda la línea lleva a «Contiene» */
.baja__sum { color: var(--ink); }
.baja__sum[hidden] { display: none; }
.baja__sum.is-tap { cursor: pointer; }
.baja__sum .baja__sumgo { min-height: 0; padding: 0 2px; font-size: inherit; font-weight: 700; align-self: auto; }
/* fix-give-up-contents: con «Borrar del todo» los márgenes se ajustan para que la tarjeta «Contiene» se vea entera sin desplazar (360 × 740) */
.baja.is-err .baja__top { padding-bottom: 8px; }
.baja.is-err .baja__warn { margin-top: 8px; padding: 12px 14px; gap: 6px; }
.sheet--baja .baja.is-err .baja__scroll { padding-top: 8px; }

/* refine-navigation-v10 · selector de ubicación en esquema (decisión 6) ------------------------------------------------------------
   Lo de dentro del nivel actual, con sangría (8 + 22 px) y una línea guía de 2 px que sale de debajo de la tarjeta del nivel (o del rótulo
   «Mis cosas») y baja hasta el centro de la última fila, con un conector horizontal hasta cada fila. */
.locroot { font-size: 16px; font-weight: 700; line-height: 1.25; padding: 2px 0 0 4px; }
.loctree { margin: 10px 0 0 8px; padding-left: 22px; }
.loctree > .rowitem { position: relative; }
.loctree__v { position: absolute; left: -16px; top: 0; bottom: 0; width: 2px; background: var(--edge); }
.loctree > .rowitem:first-child > .loctree__v { top: -10px; }        /* el hueco con la tarjeta: la línea sale de debajo de ella */
.loctree > .rowitem:last-child > .loctree__v { bottom: 50%; }         /* la última fila corta la línea en su centro */
.loctree__h { position: absolute; left: -16px; top: calc(50% - 1px); width: 12px; height: 2px; background: var(--edge); }

/* refine-navigation-v10 · «✕» alineada con el contenido (decisión 7) --------------------------------------------------------------
   Su borde derecho coincide con el de las tarjetas y botones de su hoja o barra (antes quedaba 8 px más fuera, a 12 px del borde). */
.sheethead { margin-right: 0; }
.sheethead > .xbtn { margin-right: 2px; }   /* el cuerpo de «¿Dónde lo dejas?» y «Dar de baja» tiene 2 px de relleno lateral */
.psheet__head { padding-right: 18px; }        /* + 1,5 px de borde = 19,5 px, como el contenido de las pantallas de dentro (18 + 1,5) */
.filters__head { padding-right: 18px; }
.actionbar .selbar__close { margin-right: 0; }
.viewer .viewer__close { right: 20px; }       /* el relleno de la barra del visor */
.viewer__count { left: 20px; }

/* refine-navigation-v10 · barra de selección con el aire de las hojas (decisión 8): esquinas superiores de 20 px, contorno de 1,5 px y
   sombra hacia arriba como las hojas superpuestas, 10 px entre filas y botones, botones de 48 px con radio de 14 px y la fila del recuento a 44 px. */
.actionbar--col { gap: 10px; padding: 10px 20px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0; box-shadow: 0 0 0 1.5px var(--edge), 0 -6px 18px rgba(20,12,6,.18); }   /* contorno de 1,5 px como sombra: no mueve el contenido */
.actionbar--col > .row { gap: 10px; min-height: 44px; align-items: center; }
.actionbar--col .btn--sm { min-height: 48px; border-radius: 14px; }
.psheet__body .actionbar--col { padding: 10px 18px calc(16px + env(safe-area-inset-bottom)); }
@media (min-width: 860px) { .actionbar--col { padding: 12px max(40px, calc((100% - 1120px) / 2)) 16px; } }

/* refine-navigation-v10 · aire sobre el teclado (decisión 9, teclado.js): mientras se escribe, el contenedor con desplazamiento termina en
   un hueco de 24 px para que el último control pueda quedar por encima del borde. En la hoja «Dar de baja», con el teclado abierto se
   desplaza la hoja entera (la parte de arriba deja de ser fija: con la ventana encogida no cabría con la nota a la vista). */
.kb-spacer { flex: none; height: 24px; }
html.kb-open .sheet--baja .baja { overflow-y: auto; }
html.kb-open .sheet--baja .baja__scroll { flex: none; overflow: visible; }
html.kb-open .sheet--baja .baja__top .baja__anim { display: none; }
html.kb-open .sheet--baja .sheethead { position: sticky; top: 0; z-index: 2; background: var(--paper); padding-top: 8px; }
html.kb-open .sheet--baja .baja__foot { position: sticky; bottom: 0; z-index: 2; }

/* add-release-notes · aviso «Novedades» y «Yo › Novedades» -----------------------------------------------------------------------
   El aviso es una hoja pequeña con la cabecera («Novedades» y «✕») y «Entendido» fijos; si no cabe, se desplaza solo la lista. */
.sheet.sheet--novedades { overflow: hidden; }
.sheet--novedades .sheethead { padding-bottom: 0; }
.nov__lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; margin: 0 -20px; padding: 2px 20px 4px; }
.nov__pie { flex: none; }
.nov { display: flex; flex-direction: column; gap: 6px; }
.nov__t { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.nov__puntos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.45; color: var(--ink2); overflow-wrap: anywhere; }
.nov__card { gap: 18px; }
.nov__card .nov + .nov { border-top: 1.5px solid var(--line); padding-top: 14px; }

/* ---------- refine-navigation-v11: encuadre de las fotos (fotos/square-framing) ---------- */
/* Cabecera de la ficha: la caja de la foto (.hero__frame) recorta; la <img> la coloca ficha.js con el encuadre (con la foto entera) o, mientras
   enseña la miniatura (ya cuadrada), object-fit: cover. La forma se elige en el Laboratorio (por defecto, panorámica: la de siempre). */
.hero__frame { position: absolute; inset: 0; overflow: hidden; }
.hero__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-lab-cabecera-ficha="cuadrada"] .ficha:not(.ficha--nueva) .hero:not(.hero--empty) { aspect-ratio: 1 / 1; max-height: none; }
html[data-lab-cabecera-ficha="compacta"] .ficha:not(.ficha--nueva) .hero:not(.hero--empty) { aspect-ratio: auto; height: min(40vh, 100vw); max-height: none; }
html[data-lab-cabecera-ficha="compacta"] .ficha:not(.ficha--nueva) .hero:not(.hero--empty) .hero__frame { inset: 0 auto; left: 50%; transform: translateX(-50%); height: 100%; aspect-ratio: 1 / 1; }
/* Visor: la foto entera con su giro; girada 90/270, visor.js le da al hueco el ancho y el alto cruzados. */
.viewer img[data-rot="90"] { transform: rotate(90deg); }
.viewer img[data-rot="180"] { transform: rotate(180deg); }
.viewer img[data-rot="270"] { transform: rotate(270deg); }
/* Barra del visor: «★ Hacer principal» · «Reordenar» · «Encuadrar» en una fila y «Quitar esta foto» debajo. */
.viewer .viewer__bar--edit { grid-template-columns: 1fr 1fr 1fr; }
.viewer .viewer__bar--edit .btn { font-size: 13px; padding-left: 6px; padding-right: 6px; }
/* Editor de encuadre: pantalla completa, fondo oscuro, el cuadrado del ancho de la pantalla. */
.cropper { position: fixed; inset: 0; z-index: 96; background: #000; color: #fff; display: flex; flex-direction: column; }
.cropper__top { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top)) 12px 8px 16px; }
.cropper__title { font-weight: 700; }
.cropper__close { color: #fff; }
.cropper__stage { position: relative; flex: 1; width: 100%; min-height: 0; overflow: hidden; touch-action: none; background: #000; cursor: grab; }   /* toda la zona: la foto se ve entera, con la guía del visor de la cámara */
.cropper__img { position: absolute; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.cropper__help { margin: 8px 16px 0; text-align: center; font-size: 13px; opacity: .8; }
.cropper__bar { display: flex; gap: 8px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
.cropper__bar .btn { flex: 1; min-height: 48px; }
.cropper__bar .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .7); background: transparent; }
.cropper__bar .cropper__z { flex: 0 0 52px; font-size: 22px; }
.cropper__bar .btn:disabled { opacity: .4; }

/* Revisión de la cámara: la foto se encuadra y se gira antes de usarla (el rechazo es «Repetir», por eso no hay ✕). */
.camara__crop { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 10px; background: #000; color: #fff; }
.camara__cropbox { position: relative; flex: 1; width: 100%; min-height: 0; overflow: hidden; touch-action: none; background: #000; cursor: grab; }
.camara__guia--rev { display: block; }
.camara__ayuda { margin: 0; font-size: 13px; opacity: .8; text-align: center; }
.camara.is-review .camara__close { display: none; }
.camara .camara__rotar { background: transparent; color: #fff; border-color: #fff; }

/* Laboratorio «Etiquetas en las filas»: chips pequeños bajo el nombre. «desliza» = todas en una línea que se desplaza de lado; «dos» = 2 y «+N». */
.rowtags { display: flex; align-items: center; gap: 5px; margin-top: 2px; min-width: 0; }
.rowtags--desliza { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-right: 20px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
.rowtags--desliza::-webkit-scrollbar { display: none; }
.rowtags--dos { overflow: hidden; }
.rowtag { flex: 0 0 auto; font-size: 11.5px; font-weight: 500; line-height: 17px; padding: 0 8px; border-radius: 999px; background: var(--t-sand); white-space: nowrap; color: var(--ink); }
.rowtags--dos .rowtag { flex: 0 1 auto; min-width: 0; max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.rowtags__more { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--ink2); }
.rowtag--c0 { background: var(--t-sage); } .rowtag--c1 { background: var(--t-mustard); } .rowtag--c2 { background: var(--t-sky); }
.rowtag--c3 { background: var(--t-rose); } .rowtag--c4 { background: var(--t-sand); } .rowtag--c5 { background: var(--t-lilac); }
.rowtag--c6 { background: var(--t-mint); } .rowtag--c7 { background: var(--t-peach); } .rowtag--c8 { background: var(--t-periwinkle); } .rowtag--c9 { background: var(--t-stone); }

/* ---------- add-share-readonly: «Compartidas conmigo» (quien recibe) ---------- */
.trayopt--sep { margin-top: 4px; border-top: 1px solid var(--edge); border-radius: 0 0 10px 10px; }
.shinv { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--edge); background: var(--card); margin-bottom: 12px; }
.shinv__t { font-weight: 700; overflow-wrap: anywhere; }
.shinv__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.shgrp { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; }
.shgrp__av { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--kraft-l); color: var(--ink); flex: none; }
.shgrp__n { font-weight: 700; overflow-wrap: anywhere; }
.shgrp__s { font-size: 13px; color: var(--ink2); }
.shgrp__e { font-size: 13px; color: var(--ink2); overflow-wrap: anywhere; }
.shinv__mail, .showner__mail { overflow-wrap: anywhere; }
.showner__mail { display: block; font-size: 13px; color: var(--ink2); }
.levelcard__acts .showner__mail { flex-basis: 100%; margin-top: -4px; }
.shstatus { font-size: 13px; color: var(--ink2); margin: 4px 0 8px; }
.showner { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink2); }
.shpriv .tile__name { font-style: italic; color: var(--ink2); }
.shlock svg { width: 16px; height: 16px; vertical-align: -3px; }
.shro { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink2); }
.shro svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.shfrom { font-size: 12px; font-weight: 700; color: var(--ink2); white-space: nowrap; }
.shempty { color: var(--ink2); }
.levelcard__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 2px; }
.levelcard__acts .showner { flex-basis: 100%; }
.exhead[data-compact="1"] .levelcard__acts { display: none; }
.levelcard__card > .levelcard__thumb { grid-area: thumb; }

/* ---------- add-share-readonly: quien comparte («Compartir…», «Compartido por mí», «Ver como») ---------- */
.cphead { display: flex; align-items: center; gap: 12px; }
.cphead__t { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.shimpact { font-size: 14px; background: var(--kraft-l); border-radius: 10px; padding: 10px 12px; }
.shacc { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1.5px solid var(--line); }
.shacc:last-child { border-bottom: 0; }
.shacc__who { display: flex; align-items: center; gap: 10px; }
.shacc__n, .shacc__mail { overflow-wrap: anywhere; }
.shacc__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.shchip { flex: none; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--ok); color: var(--ink); white-space: nowrap; }
.shchip[data-status="pendiente"] { background: var(--share-pending-bg); color: var(--share-pending); border: 1px dashed var(--share-pending); }
.shchip[data-status="pausa"], .shchip[data-status="rechazada"], .shchip[data-status="dejada"], .shchip[data-status="caducada"] { background: var(--kraft-l); color: var(--ink2); }
.shtree { display: flex; flex-direction: column; }
.shtree__row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-left: calc(var(--d, 0) * 14px); border-bottom: 1px solid var(--line); }
.shtree__row:last-child { border-bottom: 0; }
.shtree__name { min-width: 0; overflow-wrap: anywhere; }
.shtree__name--priv { font-style: italic; color: var(--ink2); }
.shcheck { cursor: pointer; }
.shcheck input { width: 22px; height: 22px; flex: none; accent-color: var(--ink); }
.shmarks { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.shmark { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink2); }
.shmark svg { width: 16px; height: 16px; flex: none; }
.sheet__actions--col { flex-direction: column; }
.sheet__actions--col .btn { flex: none; width: 100%; }
.pvbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 700; }
.pvbar .grow { min-width: 0; overflow-wrap: anywhere; }
.pvbar__exit { flex: none; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1.5px solid var(--paper); background: transparent; color: var(--paper); font: inherit; font-weight: 700; cursor: pointer; }
.pvbar__exit:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
/* La franja (unos 64 px, fija abajo) no tapa la última fila ni «Dejar de ver»: la vista deja ese hueco al final. */
.view.view--pv { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.shmark--unknown { font-weight: 500; }
/* En escritorio, la franja va con el contenido (centrada y con su ancho), no de lado a lado de la ventana. */
@media (min-width: 860px) {
  .pvbar { left: 50%; right: auto; width: min(720px, calc(100% - 80px)); transform: translateX(-50%); border-radius: 14px 14px 0 0; }
}

/* Instancia BETA (js/beta.js): franja fija arriba, discreta; no empuja el layout y respeta el área segura. */
#beta-banda { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: calc(16px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); box-sizing: border-box; background: var(--ink, #2b1d12); color: var(--paper, #f6eee1); font-size: 11px; line-height: 16px; letter-spacing: .08em; text-align: center; opacity: .85; pointer-events: none; }

/* rework-share-access: marcas de compartido en las filas, tarjeta «Acceso», comentarios y avisos */
.treerow--share { border-left: 4px solid var(--share); }
.treerow--pending { border-left: 4px dashed var(--share-pending); }
.shlabels { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
.shlabel--pending { color: var(--share-pending); background: var(--share-pending-bg); border: 1px dashed var(--share-pending); padding: 0 7px; font-weight: 600; }
.shlabel { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--share); background: var(--share-bg); border-radius: 999px; padding: 1px 8px; }
.shlabel svg { width: 13px; height: 13px; flex: none; }
.shlabel--private { color: var(--ink2); background: var(--line); }
.accrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.accrow__main { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1.5px solid var(--edge); border-radius: 12px; background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.accrow__main:hover { border-color: var(--ink2); }
.accrow__main:focus-visible { outline: 3px solid var(--choice); outline-offset: 2px; }
.accrow__main svg { width: 18px; height: 18px; flex: none; color: var(--ink2); }
.locopt[disabled] { opacity: .55; cursor: default; }
.cmt { padding: 8px 10px; border-radius: 12px; background: var(--paper); border: 1.5px solid var(--line); }
.cmt__txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.avisoitem { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1.5px solid var(--line); }
.avisoitem[data-unread="1"] .bold::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pin); margin-right: 6px; }

/* add-item-cession: el sitio vacío que deja una cuenta cerrada (hueco): translúcido y difuminado */
.treerow--hueco { opacity: .55; filter: blur(.4px) saturate(.6); border-style: dashed; }
.treerow--hueco:hover, .treerow--hueco:focus-within { opacity: .85; filter: none; }