/* Andes · la casa — the channel manager as its own app (/casa/<hotel>, sample: /casa/demo).
   Warm paper, the sky of El Chaltén's hour across the top with Andes' cloud drifting, one clear colour per channel
   (the hotel recognises Booking blue, Expedia yellow, Airbnb pink at a glance), the hotel's own buildings drawn as
   small glyphs. Fraunces for what matters (greetings, numbers, names), Space Grotesk for the rest. */

:root {
  --papel: #f3efe7; --papel-2: #ebe5da; --hoja: #fffdf9; --tinta: #263332; --tinta-2: #525c59; --gris: #8a8e88; --suave: #dcd5c8; --linea: #e8e2d6;
  --glaciar: #5f8a7c; --glaciar-2: #e4ece7; --cielo-c: #6f86a0; --alba: #c99180; --miel: #c2a05a; --musgo: #7d9a74; --aviso: #b0614c;
  --booking: #4c6787; --expedia: #c2a05a; --airbnb: #b8777e; --directa: #5f8a7c; --manual: #8a80a8; --otro: #9a9d98;
  --google: #6b93a3; --agencia: #8f8a62;
  --boton: #2f4542; --verde-t: #4c7567;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif; --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --suelto: cubic-bezier(.22, 1, .36, 1); --r: 12px;
  --sombra: 0 1px 0 rgba(23, 37, 42, .04), 0 10px 30px -18px rgba(60, 44, 14, .28);
  --c1: #c7dcea; --c2: #eef1ee; /* the sky, set by the hour: soft, never loud */
}
body[data-cielo="alba"] { --c1: #ecccc0; --c2: #e6e6ef; }
body[data-cielo="dia"] { --c1: #b7d2e6; --c2: #ebf0ee; }
body[data-cielo="tarde"] { --c1: #e9c8b2; --c2: #e8dde6; }
body[data-cielo="noche"] { --c1: #b3bcd6; --c2: #e5e5ee; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--papel); }
body { margin: 0; color: var(--tinta); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--glaciar-2); }
button { font: inherit; color: inherit; }
a { color: inherit; }
.num, .cifra { font-variant-numeric: lining-nums tabular-nums; }

/* ════════ shell ════════ */
.app { position: relative; display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.riel { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 26px 18px 20px; background: linear-gradient(180deg, transparent 0, transparent 300px, rgba(235, 229, 218, .55) 520px); border-right: 1px solid rgba(38, 51, 50, .07); z-index: 5; }
.marca { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); text-decoration: none; }
.marca img { width: 40px; height: auto; }

.casas { margin: 24px 0 8px; display: grid; gap: 6px; }
.casa-b { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center; padding: 10px 10px; border-radius: 10px; transition: background 300ms var(--suelto); }
.casa-b:hover { background: rgba(255, 253, 248, .6); }
.casa-b.on { background: rgba(255, 253, 249, .82); box-shadow: 0 1px 0 rgba(38, 51, 50, .04), 0 8px 24px -18px rgba(60, 50, 30, .3); }
.casa-b .glifo { grid-row: span 2; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--verde-t); background: var(--glaciar-2); }
.casa-b:nth-child(2) .glifo { color: #55697f; background: #e5eaf0; }
.casa-b .glifo svg { width: 24px; height: 24px; }
.casa-b b { font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.15; font-variation-settings: "SOFT" 100; }
.casa-b small { font-size: 12px; color: var(--gris); }

.menu { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.menu button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: var(--tinta-2); font-size: 15px; transition: background 260ms var(--suelto), color 260ms var(--suelto); }
.menu button svg { width: 20px; height: 20px; flex: none; opacity: .8; }
.menu button:hover { background: rgba(255, 253, 248, .55); color: var(--tinta); }
.menu button.on { background: rgba(255, 253, 249, .85); color: var(--tinta); box-shadow: 0 1px 0 rgba(38, 51, 50, .04), 0 6px 18px -14px rgba(60, 50, 30, .35); }
.menu button.on svg { color: var(--glaciar); }
.menu button.on svg { opacity: 1; }
.menu button { font-weight: 400; }
.menu button .cuenta { margin-left: auto; min-width: 22px; padding: 0 6px; height: 20px; border-radius: 6px; background: #f1e3dc; color: #9a5644; font-size: 12px; display: grid; place-items: center; }
.menu .titulo-m { padding: 18px 12px 6px; font-size: 12px; color: var(--gris); }
.menu button:focus-visible, .casa-b:focus-visible { outline: 2px solid var(--glaciar); outline-offset: 2px; }

.vivo { margin-top: auto; padding: 14px 12px 4px; border-top: 1px solid var(--linea); font-size: 12.5px; color: var(--tinta-2); line-height: 1.45; }
.vivo b { font-weight: 500; color: var(--tinta); }
.punto { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--glaciar); vertical-align: 0; animation: late 2.8s ease-out infinite; }
.punto.mal { background: var(--aviso); animation: none; }
@keyframes late { 0% { box-shadow: 0 0 0 0 rgba(95, 138, 124, .4); } 75%, 100% { box-shadow: 0 0 0 9px rgba(95, 138, 124, 0); } }
.vivo .salir { all: unset; cursor: pointer; display: block; margin-top: 10px; color: var(--gris); }
.vivo .salir:hover { color: var(--tinta); }

main { position: relative; z-index: 1; min-width: 0; padding: 30px clamp(18px, 4vw, 56px) 110px; }
.cielo { position: absolute; inset: 0 0 auto 0; height: 380px; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 55%, var(--papel) 100%); transition: background 3s ease; }
.cielo img { position: absolute; top: 46px; left: 0; width: 620px; height: auto; opacity: .7; mix-blend-mode: soft-light; filter: brightness(1.35); animation: nube 170s linear infinite; }
.cielo img + img { top: 130px; width: 380px; opacity: .4; animation-duration: 230s; animation-delay: -110s; }
@keyframes nube { from { transform: translateX(-640px); } to { transform: translateX(110vw); } }
@media (prefers-reduced-motion: reduce) { .cielo img { animation: none; transform: translateX(50vw); } }

.cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 28px; margin: 6px 0 30px; max-width: 1240px; }
.cabeza .fecha { font-size: 14px; color: var(--tinta-2); margin: 0 0 6px; }
.cabeza h1 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 4.4vw, 56px); line-height: 1; letter-spacing: -.02em; font-variation-settings: "SOFT" 100; }
.cabeza .lema { margin: 12px 0 0; max-width: 54ch; font-size: 17px; color: var(--tinta-2); }
.cabeza .lema b { color: var(--tinta); font-weight: 500; }
.cabeza .acciones-c { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }
#vista { max-width: 1240px; }
.entra { animation: entra 560ms var(--suelto) both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .entra { animation: none; } }

/* buttons: ink for the main action, paper for the rest */
.b { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px; background: var(--boton); color: #fff; font-size: 14.5px; font-weight: 500; transition: transform 200ms var(--suelto), background 260ms var(--suelto), box-shadow 260ms var(--suelto); }
.b:hover { background: #3a524e; box-shadow: 0 8px 20px -14px rgba(38, 51, 50, .55); }
.b:active { transform: scale(.98); }
.b.claro { background: var(--hoja); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--suave); }
.b.claro:hover { box-shadow: inset 0 0 0 1px var(--tinta-2); background: #fff; }
.b.verde { background: var(--glaciar); }
.b.verde:hover { background: #52786b; }
.b[disabled] { opacity: .5; pointer-events: none; }
.b:focus-visible { outline: 2px solid var(--glaciar); outline-offset: 2px; }
.b svg { width: 18px; height: 18px; }
.chico { height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }

/* surfaces */
.sup { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--sombra); }
.bloque { margin-top: 26px; }
.bloque > h2, .t2 { margin: 0 0 14px; font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.2; font-variation-settings: "SOFT" 100; display: flex; align-items: baseline; gap: 12px; }
.t2 small { font-family: var(--sans); font-size: 13px; color: var(--gris); font-weight: 400; }
.gris { color: var(--gris); }
.nota { font-size: 13px; color: var(--gris); margin: 10px 0 0; line-height: 1.5; }
.grilla-2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 1000px) { .grilla-2 { grid-template-columns: 1fr; } }

/* channel stamp: a small square with the channel's letter, then its name */
.sello { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-2); white-space: nowrap; }
.sello i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: 11.5px; color: #fff; background: var(--k); flex: none; }
.sello.solo { gap: 0; }
[data-canal="booking"] { --k: var(--booking); --kt: #fff; }
[data-canal="expedia"] { --k: var(--expedia); --kt: #fff; }
[data-canal="airbnb"] { --k: var(--airbnb); --kt: #fff; }
[data-canal="directa"] { --k: var(--directa); --kt: #fff; }
[data-canal="manual"] { --k: var(--manual); --kt: #fff; }
[data-canal="otro"] { --k: var(--otro); --kt: #fff; }
[data-canal="google"] { --k: var(--google); --kt: #fff; }
[data-canal="agencia"] { --k: var(--agencia); --kt: #fff; }
.sello i { font-size: 11px; letter-spacing: -.02em; }

/* ════════ Hoy ════════ */
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cifras > div { padding: 20px 22px 22px; position: relative; }
.cifras > div + div { border-left: 1px solid var(--linea); }
@media (max-width: 900px) { .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cifras > div:nth-child(3) { border-left: 0; } .cifras > div:nth-child(n+3) { border-top: 1px solid var(--linea); } }
.cifras .et { font-size: 13px; color: var(--tinta-2); }
.cifras .cifra { display: block; margin-top: 4px; font-family: var(--serif); font-weight: 300; font-size: 46px; line-height: 1; letter-spacing: -.02em; }
.cifras .cifra small { font-size: 18px; color: var(--gris); letter-spacing: 0; margin-left: 4px; }
.caras { display: flex; margin-top: 12px; min-height: 26px; }
.caras span { width: 26px; height: 26px; margin-right: -6px; border-radius: 50%; border: 2px solid var(--hoja); background: var(--k); color: var(--kt); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; }
.mini { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 12px; }
.mini i { flex: 1; border-radius: 2px; background: var(--glaciar); opacity: .85; min-height: 2px; }

/* the board of the house: one tile per unit */
.tablero { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.unidad { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex-direction: column; min-height: 132px; padding: 14px 14px 13px; border-radius: var(--r); background: var(--hoja); border: 1px solid var(--linea); box-shadow: var(--sombra); overflow: hidden; transition: transform 300ms var(--suelto), box-shadow 300ms var(--suelto); }
.unidad:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(23, 37, 42, .04), 0 18px 36px -20px rgba(60, 44, 14, .38); }
.unidad::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--k, transparent); opacity: .85; }
.unidad .cab-u { display: flex; align-items: center; gap: 9px; }
.unidad .gl { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--k, var(--glaciar)) 14%, #fff); color: color-mix(in srgb, var(--k, var(--glaciar)) 80%, #000); }
.unidad .gl svg { width: 20px; height: 20px; }
.unidad b { font-family: var(--serif); font-weight: 400; font-size: 17px; font-variation-settings: "SOFT" 100; }
.unidad .quien { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unidad .que { font-size: 12.5px; color: var(--gris); }
.unidad .marca-u { position: absolute; top: 14px; right: 12px; font-size: 11.5px; font-weight: 500; padding: 2px 7px; border-radius: 6px; }
.unidad.llega .marca-u { background: var(--glaciar-2); color: var(--verde-t); }
.unidad.sale .marca-u { background: #f4e6df; color: #9a5644; }
.unidad.libre { background: repeating-linear-gradient(135deg, var(--hoja) 0 10px, #fbf7ee 10px 20px); box-shadow: none; }
.unidad.libre .gl { background: #f1ece1; color: var(--gris); }
.unidad.libre .quien { color: var(--tinta-2); font-weight: 400; }

.pedidos-l { list-style: none; margin: 0; padding: 0; }
.pedidos-l li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; padding: 16px 18px; }
.pedidos-l li + li { border-top: 1px solid var(--linea); }
.pedidos-l b { font-weight: 500; }
.pedidos-l p { margin: 3px 0 0; font-size: 13px; color: var(--gris); }
.pedidos-l .acc { display: flex; gap: 8px; }

/* the feed of what happened */
.feed { list-style: none; margin: 0; padding: 6px 0; }
.feed li { display: grid; grid-template-columns: 52px 26px minmax(0, 1fr); gap: 0 10px; padding: 11px 18px; align-items: start; }
.feed li.nuevo { animation: llega 1.6s var(--suelto); }
@keyframes llega { 0% { background: color-mix(in srgb, var(--k, var(--glaciar)) 22%, transparent); } 100% { background: transparent; } }
.feed .hora { font-size: 12.5px; color: var(--gris); padding-top: 2px; font-variant-numeric: tabular-nums; }
.feed .ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--k, var(--papel-2)); color: var(--kt, var(--tinta-2)); font-size: 11.5px; font-weight: 600; }
.feed .ic svg { width: 15px; height: 15px; }
.feed .tx { font-size: 14px; line-height: 1.4; }
.feed .tx small { display: block; color: var(--gris); font-size: 12.5px; margin-top: 2px; }
.feed .tx .ok { color: var(--verde-t); }
.feed .vacio { display: block; color: var(--gris); font-family: var(--serif); font-style: italic; }

/* the next two weeks, stacked by channel */
.semanas { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 8px; align-items: end; height: 190px; padding: 22px 20px 12px; }
.semanas .col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.semanas .pila { width: 100%; max-width: 30px; display: flex; flex-direction: column-reverse; border-radius: 6px; overflow: hidden; background: #f0ece4; height: 100%; }
.semanas .pila i { display: block; background: var(--k); opacity: .85; height: 0; transition: height 1.2s var(--suelto); }
.semanas .dia { margin-top: 8px; font-size: 11.5px; color: var(--gris); text-align: center; line-height: 1.2; }
.semanas .dia b { display: block; font-family: var(--serif); font-weight: 400; font-size: 15px; color: var(--tinta); }
.semanas .col.finde .dia b { color: var(--cielo-c); }
.semanas .pct { position: absolute; top: -18px; font-size: 11px; color: var(--tinta-2); opacity: 0; transition: opacity 240ms; }
.semanas .col:hover .pct { opacity: 1; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0 20px 18px; }

/* ════════ Calendario ════════ */
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.cal-bar h2 { margin: 0 10px 0 0; font-family: var(--serif); font-weight: 300; font-size: 30px; text-transform: capitalize; letter-spacing: -.01em; }
.cal-bar .seg { display: inline-flex; background: var(--hoja); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--suave); padding: 3px; }
.cal-bar .seg button { all: unset; cursor: pointer; padding: 6px 12px; border-radius: 7px; font-size: 13.5px; color: var(--tinta-2); }
.cal-bar .seg button.on { background: var(--glaciar-2); color: var(--tinta); }
.cal-ayuda { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tinta-2); margin: 0 0 14px; }
.cal-ayuda svg { width: 18px; height: 18px; color: var(--glaciar); flex: none; }
.cal { overflow: auto; max-height: calc(100vh - 220px); scrollbar-width: thin; }
.cal-g { display: grid; grid-template-columns: 196px repeat(var(--dias), minmax(52px, 1fr)); min-width: calc(196px + var(--dias) * 52px); user-select: none; -webkit-user-select: none; }
@media (max-width: 700px) { .cal-g { grid-template-columns: 112px repeat(var(--dias), 54px); min-width: 0; } }
.cc { position: sticky; top: 0; z-index: 4; background: var(--hoja); text-align: center; padding: 10px 0 8px; font-size: 11.5px; color: var(--gris); border-bottom: 1px solid var(--linea); line-height: 1.25; }
.cc b { display: block; font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--tinta); }
.cc.finde { background: #f7f4ee; }
.cc.finde b { color: var(--cielo-c); }
.cc.hoy b { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto; border-radius: 50%; background: var(--glaciar); color: #fff; }
.c-esq { position: sticky; top: 0; left: 0; z-index: 6; background: var(--hoja); border-bottom: 1px solid var(--linea); }
.c-tipo { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 16px 14px 8px; position: sticky; left: 0; font-family: var(--serif); font-size: 18px; font-variation-settings: "SOFT" 100; }
.c-tipo .gl { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--glaciar-2); color: var(--verde-t); }
.c-tipo .gl svg { width: 19px; height: 19px; }
.c-tipo small { font-family: var(--sans); font-size: 12.5px; color: var(--gris); }
.c-nom { position: sticky; left: 0; z-index: 3; background: var(--hoja); padding: 0 14px; display: flex; align-items: center; font-size: 13.5px; color: var(--tinta-2); border-top: 1px solid #f1ece2; height: 40px; }
.c-nom.sub { font-size: 12px; color: var(--gris); height: 34px; }
.c-carril { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; height: 40px; border-top: 1px solid #f1ece2; position: relative; }
.c-carril .fondo { grid-row: 1; height: 100%; border-left: 1px solid #f4efe6; }
.c-carril .fondo.finde { background: #f7f4ee; }
.c-carril .fondo.hoy { background: color-mix(in srgb, var(--glaciar) 7%, transparent); }
.res { grid-row: 1; z-index: 1; align-self: center; height: 30px; margin: 0 3px; padding: 0 10px; display: flex; align-items: center; gap: 7px; border-radius: 8px; background: color-mix(in srgb, var(--k) 17%, #fffdf9); color: var(--tinta); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; cursor: pointer;
  box-shadow: inset 3px 0 0 var(--k); transition: transform 220ms var(--suelto), filter 220ms; animation: crece 700ms var(--suelto) both; transform-origin: left center; }
.res:hover { background: color-mix(in srgb, var(--k) 26%, #fffdf9); }
.res span { overflow: hidden; text-overflow: ellipsis; }
.res em { font-style: normal; color: var(--gris); font-weight: 400; }
.res.pedido { background: #fffdf9; box-shadow: inset 3px 0 0 var(--k), inset 0 0 0 1px color-mix(in srgb, var(--k) 55%, transparent); }
.res.corta { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.res.recien { animation: aparece 1.4s var(--suelto) both; }
@keyframes crece { from { opacity: 0; transform: scaleX(.6); } }
@keyframes aparece { 0% { opacity: 0; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 8px color-mix(in srgb, var(--k) 22%, transparent); } 100% { transform: none; } }
.c-celda { height: 34px; border-left: 1px solid #f4efe6; border-top: 1px solid #f1ece2; display: grid; place-items: center; font-size: 12.5px; cursor: cell; position: relative; transition: background 200ms; touch-action: pan-x pan-y; }
.c-celda.venta b { font-family: var(--serif); font-weight: 400; font-size: 15px; }
.c-celda.venta.cero b { color: var(--aviso); }
.c-celda.venta.cerrada { background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(176, 97, 76, .1) 5px 6px); }
.c-celda.precio { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.c-celda.precio small { position: absolute; bottom: 1px; font-size: 9.5px; color: var(--gris); }
.c-celda.finde { background: #f7f4ee; }
.c-celda.hoy { background: color-mix(in srgb, var(--glaciar) 7%, transparent); }
.c-celda:hover { background: var(--glaciar-2); }
.c-celda.elegida { background: color-mix(in srgb, var(--glaciar) 26%, #fff); box-shadow: inset 0 -2px 0 var(--glaciar); }
.c-fin { grid-column: 1 / -1; height: 10px; border-top: 1px solid var(--linea); }

/* ════════ Reservas ════════ */
.herr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.herr input[type="search"] { font: inherit; height: 42px; padding: 0 14px 0 40px; border: 0; border-radius: 10px; background: var(--hoja) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%237d8380" stroke-width="1.8" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4-4"/></svg>') 12px center / 18px no-repeat; box-shadow: inset 0 0 0 1px var(--suave); flex: 0 1 340px; min-width: 220px; }
.herr input[type="search"]:focus { outline: none; box-shadow: inset 0 0 0 2px var(--glaciar); }
.filtro-c { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro-c button { all: unset; cursor: pointer; height: 34px; padding: 0 12px 0 8px; display: inline-flex; align-items: center; border-radius: 9px; background: var(--hoja); box-shadow: inset 0 0 0 1px var(--linea); font-size: 13px; transition: box-shadow 200ms, background 200ms; }
.filtro-c button.todos { padding-left: 12px; }
.filtro-c button.on { box-shadow: inset 0 0 0 1.5px var(--glaciar); background: #fafcfa; }
.herr .b { margin-left: auto; }
.mes-r { margin: 30px 0 10px; font-family: var(--serif); font-weight: 400; font-size: 22px; text-transform: capitalize; display: flex; align-items: baseline; gap: 10px; }
.mes-r:first-of-type { margin-top: 4px; }
.mes-r small { font-family: var(--sans); font-size: 13px; color: var(--gris); text-transform: none; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: grid; grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) 150px 110px; gap: 16px; align-items: center; padding: 12px 18px 12px 12px; cursor: pointer; transition: background 200ms; }
.lista li + li { border-top: 1px solid var(--linea); }
.lista li:hover { background: #fbf8f1; }
.lista .fecha-r { width: 52px; height: 56px; border-radius: 10px; background: color-mix(in srgb, var(--k) 12%, #fff); box-shadow: inset 0 3px 0 var(--k); display: grid; place-items: center; align-content: center; line-height: 1; }
.lista .fecha-r b { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.lista .fecha-r small { font-size: 11px; color: var(--tinta-2); margin-top: 3px; }
.lista .quien b { font-weight: 500; }
.lista .quien small, .lista .hab small { display: block; color: var(--gris); font-size: 12.5px; }
.lista .hab { font-size: 14px; color: var(--tinta-2); }
.lista .monto { text-align: right; font-family: var(--serif); font-size: 17px; }
.lista .monto small { display: block; font-family: var(--sans); font-size: 11.5px; color: var(--gris); }
.lista .pend { display: inline-block; margin-left: 8px; font-size: 12px; color: #9a5644; background: #f4e6df; padding: 1px 7px; border-radius: 6px; }
.lista .canc b { text-decoration: line-through; color: var(--gris); }
@media (max-width: 860px) { .lista li { grid-template-columns: 58px minmax(0, 1fr) auto; } .lista .hab, .lista .sello-c { display: none; } }

/* ════════ Conexiones ════════ */
.hub { position: relative; padding: 10px 10px 0; overflow: hidden; }
.hub > svg { display: block; width: 100%; height: auto; }
.hub .linea { fill: none; stroke: var(--linea); stroke-width: 2; }
.hub .linea-v { fill: none; stroke: var(--k); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; animation: corre 2.6s linear infinite; opacity: .5; }
@keyframes corre { to { stroke-dashoffset: -22; } }
.hub .nodo rect { fill: var(--hoja); stroke: var(--linea); }
.hub .nodo .sq { fill: var(--k); stroke: none; }
.hub .nodo .let { fill: var(--kt); font: 600 22px var(--sans); text-anchor: middle; dominant-baseline: central; }
.hub .nodo .nom { fill: var(--tinta); font: 400 21px var(--serif); }
.hub .nodo .est { fill: var(--verde-t); font: 13px var(--sans); }
.hub .nodo .est.no { fill: var(--gris); }
.hub .centro rect { fill: var(--boton); }
.hub .centro text { fill: #fff; text-anchor: middle; }
.hub .centro .n1 { font: 400 24px var(--serif); }
.hub .centro .n2 { font: 13px var(--sans); fill: #bccbc5; }
.hub .pulso { fill: none; stroke: var(--glaciar); stroke-width: 2; opacity: 0; }
.hub .pulso.va { animation: pulso 1.2s var(--suelto); }
@keyframes pulso { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.hub .paquete { fill: var(--k); }
.hub .cerrado { font: 500 13px var(--sans); fill: var(--verde-t); opacity: 0; }
.hub .cerrado.va { animation: aviso-c 2.8s var(--suelto) both; }
@keyframes aviso-c { 0% { opacity: 0; transform: translateY(6px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.probar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 20px; border-top: 1px solid var(--linea); }
.probar p { margin: 0; font-size: 14px; color: var(--tinta-2); flex: 1 1 280px; }
.canales-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .canales-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .canales-g { grid-template-columns: 1fr; } }
.canal-t { position: relative; padding: 18px 18px 16px; overflow: hidden; }
.canal-t::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--k); opacity: .85; }
.canal-t .top { display: flex; align-items: center; gap: 10px; }
.canal-t .top i { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--k); color: var(--kt); font-style: normal; font-weight: 600; }
.canal-t .top b { font-family: var(--serif); font-weight: 400; font-size: 19px; }
.canal-t .ok { margin: 10px 0 0; font-size: 13px; color: var(--verde-t); display: flex; align-items: center; gap: 6px; }
.canal-t .ok.no { color: var(--gris); }
.canal-t dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin: 14px 0 0; font-size: 13.5px; }
.canal-t dt { color: var(--gris); }
.canal-t dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.canal-t .grande { font-family: var(--serif); font-size: 26px; margin-top: 12px; }
.enlace { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 18px; }
.enlace code { font: 13px ui-monospace, Menlo, monospace; color: var(--tinta-2); word-break: break-all; flex: 1 1 260px; }

/* ════════ Números ════════ */
.tres-n { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tres-n > div { padding: 22px; }
.tres-n > div + div { border-left: 1px solid var(--linea); }
@media (max-width: 800px) { .tres-n { grid-template-columns: 1fr; } .tres-n > div + div { border-left: 0; border-top: 1px solid var(--linea); } }
.tres-n .cifra { display: block; font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; margin-top: 6px; }
.tres-n p { margin: 8px 0 0; font-size: 13px; color: var(--gris); line-height: 1.45; }
.tres-n .verde { color: var(--verde-t); }
.reparto { display: flex; height: 18px; border-radius: 9px; overflow: hidden; margin: 22px 22px 0; background: #f1ece1; }
.reparto i { display: block; background: var(--k); width: 0; transition: width 1.1s var(--suelto); }
.tabla-c { list-style: none; margin: 18px 0 0; padding: 0 0 6px; }
.tabla-c li { display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(0, 2fr) 80px 120px 130px; gap: 14px; align-items: center; padding: 13px 22px; font-size: 14px; }
.tabla-c li + li { border-top: 1px solid var(--linea); }
.tabla-c .barra-c { height: 8px; border-radius: 4px; background: #f1ece1; overflow: hidden; }
.tabla-c .barra-c i { display: block; height: 100%; background: var(--k); border-radius: 4px; width: 0; transition: width 1.1s var(--suelto); }
.tabla-c .n { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-c .n small { display: block; font-size: 11.5px; color: var(--gris); }
.tabla-c .sin { color: var(--verde-t); }
@media (max-width: 860px) { .tabla-c li { grid-template-columns: 1fr auto; } .tabla-c .barra-c, .tabla-c .n.noch, .tabla-c .n.com { display: none; } }
.meses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: end; height: 230px; padding: 26px 22px 14px; }
.meses .col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.meses .pila { width: 100%; max-width: 56px; display: flex; flex-direction: column-reverse; border-radius: 7px; overflow: hidden; height: 0; transition: height 1.1s var(--suelto); }
.meses .pila i { display: block; background: var(--k); }
.meses .m { margin-top: 8px; font-size: 12.5px; color: var(--gris); text-transform: capitalize; }
.meses .v { font-size: 12px; color: var(--tinta-2); margin-bottom: 6px; font-variant-numeric: tabular-nums; }

/* ════════ Programas ════════ */
.progs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.prog { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.prog .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.prog .ic svg { width: 24px; height: 24px; }
.prog b { font-family: var(--serif); font-weight: 400; font-size: 20px; margin-top: 6px; }
.prog p { margin: 0; font-size: 14px; color: var(--tinta-2); }
.prog .inc { margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--verde-t); }
.chat { margin-top: 6px; display: grid; gap: 6px; font-size: 13px; }
.chat span { max-width: 88%; padding: 7px 10px; border-radius: 10px; background: #f1ece1; }
.chat span.yo { justify-self: end; background: #d9f6e4; }

/* ════════ side sheet ════════ */
.velo { position: fixed; inset: 0; z-index: 40; background: rgba(23, 37, 42, .22); opacity: 0; transition: opacity 360ms ease; }
.velo.on { opacity: 1; }
.hoja-l { position: fixed; z-index: 41; top: 10px; right: 10px; bottom: 10px; width: min(460px, calc(100vw - 20px)); overflow-y: auto; background: var(--hoja); border-radius: 16px; padding: 26px 28px 40px;
  transform: translateX(110%); transition: transform 560ms var(--suelto); box-shadow: 0 30px 80px -30px rgba(23, 37, 42, .45); }
.hoja-l.on { transform: none; }
@media (max-width: 600px) { .hoja-l { top: auto; left: 0; right: 0; bottom: 0; width: 100vw; max-height: 90vh; border-radius: 18px 18px 0 0; padding: 22px 20px 34px; transform: translateY(105%); } }
.hoja-l .x { all: unset; cursor: pointer; position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--tinta-2); }
.hoja-l .x:hover { background: var(--papel); }
.hoja-l .x svg { width: 18px; height: 18px; }
.hoja-l h2 { margin: 6px 40px 4px 0; font-family: var(--serif); font-weight: 300; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; }
.hoja-l .sub { margin: 0; color: var(--tinta-2); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.hoja-l .estado-h { display: inline-block; font-size: 12.5px; padding: 2px 8px; border-radius: 6px; background: var(--glaciar-2); color: var(--verde-t); }
.hoja-l .estado-h.pedido { background: #f4e6df; color: #9a5644; }
.hoja-l .estado-h.cancelada { background: #eee; color: var(--gris); }
.hoja-l dl { display: grid; grid-template-columns: 112px 1fr; gap: 10px 14px; margin: 24px 0 0; font-size: 14px; }
.hoja-l dt { color: var(--gris); }
.hoja-l dd { margin: 0; }
.hoja-l label { display: block; font-size: 13px; color: var(--tinta-2); margin-top: 16px; }
.hoja-l input, .hoja-l select, .hoja-l textarea { width: 100%; font: inherit; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; margin-top: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--suave); color: var(--tinta); }
.hoja-l textarea { height: auto; min-height: 84px; padding: 10px 12px; }
.hoja-l input:focus, .hoja-l select:focus, .hoja-l textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--glaciar); }
.hoja-l .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.hoja-l .acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hoja-l .error { color: var(--aviso); font-size: 13.5px; margin: 12px 0 0; min-height: 1em; }
.hoja-l hr { border: 0; border-top: 1px solid var(--linea); margin: 26px 0 0; }
.paso { display: inline-flex; align-items: center; margin-top: 6px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--suave); }
.paso button { all: unset; cursor: pointer; width: 44px; height: 44px; text-align: center; font-size: 20px; color: var(--tinta-2); border-radius: 10px; }
.paso button:hover { background: var(--papel); }
.paso output { min-width: 50px; text-align: center; font-family: var(--serif); font-size: 22px; }
.rapido { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.envio { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: #f6f3ec; font-size: 13px; color: var(--tinta-2); align-items: center; }

/* toast */
.aviso-t { position: fixed; left: 50%; bottom: 26px; z-index: 60; transform: translate(-50%, 30px); opacity: 0; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: var(--boton); color: #fff; font-size: 14px; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .5); transition: transform 420ms var(--suelto), opacity 420ms; display: flex; gap: 10px; align-items: center; }
.aviso-t.on { transform: translate(-50%, 0); opacity: 1; }
.aviso-t i { width: 8px; height: 8px; border-radius: 50%; background: var(--glaciar); }

/* login */
.entrar { max-width: 420px; margin: 12vh auto; padding: 30px; }
.entrar h1 { font-family: var(--serif); font-weight: 300; font-size: 34px; margin: 0 0 8px; }
.entrar label { display: block; margin-top: 16px; font-size: 13px; color: var(--tinta-2); }
.entrar input { width: 100%; font: inherit; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; margin-top: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--suave); }

/* demo ribbon */
.cinta-demo { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 253, 248, .72); font-size: 13px; color: var(--tinta-2); max-width: 1240px; }
.cinta-demo b { font-weight: 500; color: var(--tinta); }

/* ════════ phones ════════ */
.abajo { display: none; }
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .riel, .casas { min-width: 0; }
  .casas { flex: 1 1 auto; }
  .riel { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px; border-right: 0; border-bottom: 1px solid rgba(38, 51, 50, .07); background: rgba(243, 239, 231, .9); backdrop-filter: blur(10px); }
  .riel .marca span, .riel .menu, .riel .vivo { display: none; }
  .riel .marca img { width: 34px; }
  .casas { margin: 0; grid-auto-flow: column; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .casa-b { grid-template-columns: 30px auto; padding: 6px 10px 6px 6px; }
  .casa-b .glifo { width: 30px; height: 30px; border-radius: 8px; }
  .casa-b .glifo svg { width: 18px; height: 18px; }
  .casa-b b { font-size: 14px; white-space: nowrap; }
  .casa-b small { display: none; }
  main { padding: 20px 16px 110px; }
  .cabeza { margin-bottom: 22px; }
  .cabeza .acciones-c { margin-left: 0; }
  .abajo { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 253, 248, .94); backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--linea); }
  .abajo button { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: 11px; color: var(--gris); border-radius: 10px; position: relative; }
  .abajo button svg { width: 22px; height: 22px; }
  .abajo button.on { color: var(--tinta); }
  .abajo button.on svg { color: var(--glaciar); }
  .abajo .cuenta { position: absolute; top: 2px; left: 55%; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #f1e3dc; color: #9a5644; font-size: 10px; display: grid; place-items: center; }
  .cal { max-height: none; }
  .semanas { gap: 4px; padding: 20px 10px 10px; }
  .semanas .dia { font-size: 10px; }
  .semanas .dia b { font-size: 13px; }
  .feed li { grid-template-columns: 44px 24px minmax(0, 1fr); padding: 10px 12px; }
  .pedidos-l li { grid-template-columns: 1fr; }
}

/* more channels and agencies (Conexiones) */
.mas-c { list-style: none; margin: 0; padding: 4px 0; }
.mas-c li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 18px; }
.mas-c li + li { border-top: 1px solid var(--linea); }
.mas-c i { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: 12.5px; background: #ece8df; color: var(--tinta-2); }
.mas-c li[data-canal] i { background: var(--k); color: var(--kt); }
.mas-c b { font-weight: 500; display: block; }
.mas-c small { display: block; font-size: 12.5px; color: var(--gris); }
.mas-c em { font-style: normal; font-size: 12px; color: var(--gris); }
.mas-c .n-ag { font-size: 13px; color: var(--tinta-2); grid-column: 3 / -1; text-align: right; }
@media (max-width: 560px) { .mas-c li { grid-template-columns: 34px minmax(0, 1fr) auto; } .mas-c em { display: none; } }

/* ── 27/10: the whole booking system ── */

/* the stay's account in the booking sheet */
.hoja-l h3 { margin: 28px 0 8px; font-family: var(--serif); font-weight: 400; font-size: 20px; font-variation-settings: "SOFT" 100; display: flex; align-items: baseline; gap: 10px; }
.hoja-l h3 small { font-family: var(--sans); font-size: 12.5px; color: var(--gris); }
.renglones { list-style: none; margin: 0; padding: 0; font-size: 14px; border-top: 1px solid var(--linea); }
.renglones li { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.renglones li span { color: var(--tinta-2); min-width: 0; }
.renglones li span small { display: block; color: var(--gris); font-size: 12px; }
.renglones li b { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.renglones li.pago b { color: var(--verde-t); }
.renglones li.pendiente b { color: var(--gris); font-weight: 400; }
.renglones li.saldo { border-bottom: 0; padding-top: 12px; }
.renglones li.saldo span { color: var(--tinta); font-weight: 500; }
.renglones li.saldo b { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.renglones li.saldo.cero b { color: var(--verde-t); }
.renglones .quitar { all: unset; cursor: pointer; font-size: 12px; color: var(--gris); margin-left: 8px; border-bottom: 1px solid var(--suave); }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 2px 8px; border-radius: 6px; background: var(--papel); color: var(--tinta-2); }
.chip.ok { background: var(--glaciar-2); color: var(--verde-t); }
.mini { margin-top: 14px; padding: 4px 16px 16px; border-radius: 12px; background: var(--papel); }
.mini label { margin-top: 12px !important; }
.mini .acc { margin-top: 14px !important; }
.mini .enlace-p { margin-top: 12px; font-size: 13px; word-break: break-all; background: #fff; padding: 10px 12px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--suave); }
.huesped-f { padding: 2px 0 12px; border-bottom: 1px dashed var(--suave); }
.huesped-f:last-of-type { border-bottom: 0; }
.huesped-f p { margin: 12px 0 0; font-size: 12.5px; color: var(--gris); }
.hoja-l .tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 10px; }
.hoja-l .check { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--tinta); }
.hoja-l .check input { width: 18px; height: 18px; margin: 0; box-shadow: none; accent-color: var(--glaciar); }
.hoja-l .grupo-h { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }

/* housekeeping: each unit and how it is */
.tablero.limpieza .unidad { min-height: 116px; }
.unidad[data-l="sucia"] { --k: var(--alba); }
.unidad[data-l="limpia"] { --k: var(--glaciar); }
.unidad[data-l="revisada"] { --k: var(--cielo-c); }
.unidad[data-l="fuera"] { --k: var(--otro); background: repeating-linear-gradient(135deg, var(--hoja) 0 10px, #f3f0ea 10px 20px); }
.unidad .estado-l { position: absolute; top: 14px; right: 12px; font-size: 11.5px; font-weight: 500; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--k) 16%, #fff); color: color-mix(in srgb, var(--k) 75%, #000); }
.unidad .urge { color: #9a5644; font-weight: 500; }
.estados-b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.estados-b button { all: unset; cursor: pointer; box-sizing: border-box; padding: 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--suave); font-size: 14.5px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.estados-b button i { width: 10px; height: 10px; border-radius: 50%; background: var(--k); }
.estados-b button.on { box-shadow: inset 0 0 0 2px var(--k); }
.cuenta-l { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--tinta-2); }
.cuenta-l b { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--tinta); margin-right: 4px; }

/* settings */
.ajustes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .ajustes { grid-template-columns: 1fr; } }
.ajustes .sup { padding: 20px 22px 18px; }
.ajustes h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 21px; font-variation-settings: "SOFT" 100; }
.ajustes .que { margin: 4px 0 0; font-size: 13.5px; color: var(--gris); }
.ajustes .filas { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--linea); }
.ajustes .filas li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.ajustes .filas li span small { display: block; color: var(--gris); font-size: 12.5px; }
.ajustes .filas li.apagada { opacity: .5; }
.ajustes .acc-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ajustes .estado-a { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 14px; }
.ajustes .estado-a i { width: 8px; height: 8px; border-radius: 50%; background: var(--glaciar); }
.ajustes .estado-a.no i { background: var(--suave); }
.clave-nueva { margin-top: 18px; padding: 16px; border-radius: 12px; background: var(--glaciar-2); font-size: 14px; }
.clave-nueva code { display: block; margin: 8px 0 10px; font-size: 17px; letter-spacing: .04em; word-break: break-all; color: var(--tinta); }

/* numbers: the month in a few figures */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis > div { padding: 18px 20px 20px; }
.kpis > div + div { border-left: 1px solid var(--linea); }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis > div:nth-child(odd) { border-left: 0; } .kpis > div:nth-child(n+3) { border-top: 1px solid var(--linea); } }
.kpis .et { font-size: 13px; color: var(--tinta-2); }
.kpis .cifra { display: block; margin-top: 4px; font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.1; white-space: nowrap; }
.kpis .cifra small { font-size: 15px; color: var(--gris); margin-left: 3px; }
.kpis p { margin: 4px 0 0; font-size: 12.5px; color: var(--gris); }
.paises { list-style: none; margin: 0; padding: 6px 20px 14px; columns: 2; column-gap: 28px; font-size: 14px; }
.paises li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--linea); break-inside: avoid; }
.paises li b { font-weight: 500; font-variant-numeric: tabular-nums; }
.bajar { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px 18px; }