/* CRPOS — estilos.
 * Medidas, colores y jerarquía tomados de los recursos decodificados con REA del APK
 * de Square POS 7.28 (checkout_*, navigation_bar_*, money_keypad, tab_container).
 * Hoja original: no usa fuentes, íconos ni imágenes de Square. */
:root {
  --ink: #101010; --ink2: #666666; --title: #323A42; --body: #66717A;
  --fill: #F0F0F0; --tabbg: #F2F2F2; --sec: #F2F4F5; --press: #D5D7D9;
  --div: #D5D7D9; --row-div: #E6E6E6; --gray: #909AA1;
  --crit: #CC0023; --ok: #00B23B; --warn: #FF9F40;
  --backdrop: rgba(0, 0, 0, .7);
  --paper: #fff; /* superficie base: el tema Atlas la remapea (claro/oscuro) */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* teléfono (values/) */
  --row: 56px; --bar: 56px; --head: 64px; --pad: 16px; --nav: 66px;
  --t-display: 44px; --t-display2: 32px; --t-heading: 24px; --t-heading2: 18px;
  --t-body: 16px; --t-body2: 14px; --t-label: 16px; --t-label2: 14px;
  --key: 26px; --tile-abbr: 37px;
}
.app.tab, .tab-ov {
  /* tablet (values-sw600dp/) */
  --row: 64px; --bar: 72px; --head: 72px; --pad: 24px; --nav: 56px;
  --t-display: 48px; --t-display2: 40px; --t-heading: 26px; --t-heading2: 22px;
  --t-body: 18px; --t-body2: 16px; --t-label: 18px; --t-label2: 16px;
  --key: 34px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font: 400 var(--t-body)/1.4 var(--font); }
body { overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input, select { font: inherit; color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
svg.i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.i.f { fill: currentColor; stroke: none; }

/* ---------- Esqueleto: cuerpo + barra de navegación (navigation_bar_container) ---------- */
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-top: env(safe-area-inset-top); }
.nbody { flex: 1; min-height: 0; position: relative; overflow: hidden; background: var(--paper); }
.navbar { flex: none; display: flex; height: calc(var(--nav) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--div); background: var(--paper); }
.navbar .ni { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 0 10px; color: var(--ink2); font-size: 10px; font-weight: 500; }
.navbar .ni.on { color: var(--ink); }
.navbar .ni .bdg { position: absolute; transform: translate(12px, -10px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--crit); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
.navbar .ni .ic { position: relative; display: flex; }
.app.tab .navbar { justify-content: center; }
.app.tab .navbar .ni { flex: 0 1 auto; flex-direction: row; gap: 8px; padding: 0 20px; font-size: 14px; }
.app.tab .navbar .me { margin-left: auto; margin-right: 24px; align-self: center; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; flex: none; }
.avatar.lg { width: 48px; height: 48px; font-size: 18px; }
.offline { flex: none; padding: 8px var(--pad); background: var(--sec); color: var(--title); font-size: var(--t-body2); text-align: center; border-bottom: 1px solid var(--div); }

/* ---------- Proceso de pago ---------- */
.co { position: absolute; inset: 0; display: flex; flex-direction: column; }
.co.tabl { flex-direction: row; }
.co-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.co-content { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.vdiv { width: 1px; background: var(--div); flex: none; }
.cartp { width: 320px; flex: none; display: flex; flex-direction: column; min-height: 0; background: var(--paper); }
.co-buttons { flex: none; background: var(--paper); padding: 8px var(--pad) var(--pad); display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--row-div); }

/* Segmentado Teclado / Surtido / Favoritos (tab_container: 40dp, radio 7/6, relleno 2) */
.segw { flex: none; padding: 12px 16px; display: flex; justify-content: center; }
.seg { display: flex; width: 100%; max-width: 500px; height: 40px; padding: 2px; border-radius: 7px; background: var(--tabbg); }
.seg button { flex: 1; border-radius: 6px; color: var(--body); font-size: var(--t-label2); font-weight: 500; text-align: center; transition: background .15s, color .15s; }
.seg button.on { background: var(--paper); color: var(--title); box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 0 1px rgba(0, 0, 0, .12); }

/* Botones (checkout_button: alto = fila, título label medium, subtítulo body_2) */
.cb { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: var(--row); padding: 0 var(--pad); border-radius: 6px; font-size: var(--t-label); font-weight: 500; line-height: 1.2; text-align: center; }
.cb small { font-size: var(--t-body2); font-weight: 400; opacity: .8; margin-top: 2px; }
.cb.pri { background: var(--ink); color: #fff; }
.cb.pri:active { background: #333; }
.cb.sec { background: var(--sec); color: var(--ink); }
.cb.sec:active { background: var(--press); }
.cb.ghost { color: var(--ink); }
.cb.crit { color: var(--crit); background: var(--sec); }
.cb[disabled] { background: var(--sec); color: var(--gray); cursor: default; }
.cbrow { display: flex; gap: 8px; }
.cbrow .cb { flex: 1; }

/* Teclado (money_keypad = amount_field + common_keypad) */
.kp { height: 100%; display: flex; flex-direction: column; }
.kp-amt { flex: none; padding: 8px var(--pad) 0; text-align: right; }
.kp-val { font-size: var(--t-display); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-val.zero { color: var(--gray); }
.kp-notebtn { flex: none; display: block; width: 100%; padding: 6px var(--pad) 12px; text-align: right; color: var(--ink2); font-size: var(--t-body2); }
.kp-notebtn b { font-weight: 500; color: var(--ink); }
.kp-grid { flex: 1; min-height: 216px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; border-top: 1px solid var(--row-div); }
.kp-grid button { display: flex; align-items: center; justify-content: center; font-size: var(--key); font-weight: 400; border-right: 1px solid var(--row-div); border-bottom: 1px solid var(--row-div); }
.kp-grid button:nth-child(3n) { border-right: 0; }
.kp-grid button:active { background: var(--fill); }
.kp-grid button.fn { font-size: calc(var(--key) * .8); color: var(--ink); }

/* Filas (checkout_list_row: 56/64, miniatura cuadrada, divisor desde el texto) */
.list { display: flex; flex-direction: column; }
.row { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-height: var(--row); padding: 0 var(--pad); text-align: left; }
.row:active, .row.hl { background: var(--fill); }
.row::after { content: ""; position: absolute; left: var(--pad); right: 0; bottom: 0; height: 1px; background: var(--row-div); }
.row.thumbed::after { left: calc(var(--pad) + var(--row) + 16px); }
.row .thumb { width: var(--row); height: var(--row); margin-left: calc(var(--pad) * -1); flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--t-heading); font-weight: 600; }
.row .thumb.lt { background: var(--fill); color: var(--ink); }
.row .rt { flex: 1; min-width: 0; font-size: var(--t-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .rt small { display: block; font-size: var(--t-body2); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .rv { flex: none; font-size: var(--t-body); color: var(--ink2); text-align: right; }
.row .rv.ink { color: var(--ink); }
.row .acc { flex: none; color: var(--gray); display: flex; }
.row .lead { flex: none; display: flex; color: var(--ink); }
.row .acc svg.i { width: 20px; height: 20px; }
.row.crit .rt { color: var(--crit); }
.row.dis { opacity: .45; pointer-events: none; }
.grp { padding: 20px var(--pad) 8px; font-size: var(--t-body2); font-weight: 600; color: var(--ink); }
.rowhead { display: flex; align-items: center; gap: 8px; min-height: var(--row); padding: 0 var(--pad) 0 4px; border-bottom: 1px solid var(--row-div); font-size: var(--t-heading2); font-weight: 600; }
.ib { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink); flex: none; }
.ib:active { background: var(--fill); }

/* Búsqueda */
.search { display: flex; align-items: center; gap: 12px; margin: 0 var(--pad) 8px; padding: 0 12px; height: 48px; border-radius: 6px; background: var(--sec); color: var(--ink2); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: var(--t-body); }
.search input::placeholder { color: var(--ink2); }

/* Favoritos (grid tile: tarjeta con elevación, abreviatura 37 sp, etiqueta 40 dp) */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 8px 8px; }
.app.tab .tiles { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; padding: 0 16px 16px; }
.tile { display: flex; flex-direction: column; background: var(--paper); border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .22), 0 0 1px rgba(0, 0, 0, .14); }
.tile:active { transform: scale(.98); }
.tile .tp { aspect-ratio: 1 / .78; display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--tile-abbr); font-weight: 700; letter-spacing: -.01em; }
.tile .tl { height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 4px; color: var(--title); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .tl span { overflow: hidden; text-overflow: ellipsis; }
.empty { padding: 48px var(--pad); text-align: center; color: var(--ink2); font-size: var(--t-body); }
.empty b { display: block; color: var(--ink); font-size: var(--t-heading2); font-weight: 600; margin-bottom: 4px; }

/* ---------- Venta actual (cart_header + filas) ---------- */
.cart { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--paper); }
.cart-h { position: relative; flex: none; display: flex; align-items: center; gap: 4px; min-height: var(--head); padding: 0 4px 0 var(--pad); border-bottom: 1px solid var(--row-div); }
.cart-h.x { padding-left: 4px; }
.cart-h h2 { flex: 1; margin: 0; font-size: var(--t-heading2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-h h2 small { display: block; font-size: var(--t-body2); font-weight: 400; color: var(--ink2); }
.cart-b { flex: 1; min-height: 0; overflow: auto; }
.cl { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; width: 100%; padding: 14px var(--pad); text-align: left; }
.cl::after { content: ""; position: absolute; left: var(--pad); right: 0; bottom: 0; height: 1px; background: var(--row-div); }
.cl:active { background: var(--fill); }
.cl .n { font-size: var(--t-body); color: var(--ink); }
.cl .n i { font-style: normal; color: var(--ink2); margin-left: 6px; }
.cl .v { font-size: var(--t-body); color: var(--ink); text-align: right; }
.cl .s { grid-column: 1 / -1; font-size: var(--t-body2); color: var(--ink2); margin-top: 2px; }
.tot { padding: 8px 0; }
.tot .tr { display: flex; justify-content: space-between; gap: 12px; padding: 6px var(--pad); font-size: var(--t-body2); color: var(--ink2); }
.tot .tr.big { padding-top: 10px; font-size: var(--t-heading2); font-weight: 600; color: var(--ink); }
.tot .tr.paid { color: var(--ok); }
.cart-f { flex: none; padding: 12px var(--pad) var(--pad); display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--row-div); }
.menu { position: absolute; top: calc(var(--head) - 8px); right: 8px; z-index: 5; min-width: 240px; padding: 8px 0; background: var(--paper); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18), 0 0 1px rgba(0, 0, 0, .2); }
.menu button { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 16px; white-space: nowrap; font-size: var(--t-body); text-align: left; }
.menu button:active { background: var(--fill); }
.menu button.crit { color: var(--crit); }
.menu-catch { position: fixed; inset: 0; z-index: 4; }

/* Hoja inferior del teléfono (checkout_sheet_container + backdrop 70 %) */
.backdrop { position: absolute; inset: 0; background: var(--backdrop); z-index: 6; }
.sheet { position: absolute; inset: 0; z-index: 7; background: var(--paper); display: flex; flex-direction: column; }
.sheet.anim { animation: up .22s cubic-bezier(.2, .8, .2, 1); }
.backdrop.anim { animation: fade .22s; }
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Secciones: Transacciones, Notificaciones, Más ---------- */
.pg { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pg-h { flex: none; display: flex; align-items: center; min-height: var(--bar); padding: 0 var(--pad); border-bottom: 1px solid var(--row-div); }
.pg-h h1 { margin: 0; font-size: var(--t-heading); font-weight: 600; }
.pg-b { flex: 1; min-height: 0; overflow: auto; }
/* Tablet: lista maestra (~¼) a la izquierda + detalle, como el álbum de iPad. Selección por relleno. */
.md { position: absolute; inset: 0; display: flex; }
.md-l { position: relative; flex: none; width: clamp(300px, 25%, 360px); border-right: 1px solid var(--div); }
.md-r { position: relative; flex: 1; min-width: 0; }
.md-l [aria-current="page"] { background: var(--sec); }
.md.md-informes .md-l [aria-current="page"], .md.md-informes .md-l .clist [aria-current="page"] * { background: var(--ink); color: #fff; }
.md-l .gbar { background: var(--paper); border-bottom: 0; }
.md-r.top .cbar > [data-x="back"], .md-r.top .gbar > [data-x="back"], .md-r.top .fbk { visibility: hidden; }
.app.tab .pg-h > .cb { flex: none; width: auto; margin-left: auto; min-height: 40px; padding: 0 20px; }
.md { flex: 1; min-height: 0; display: flex; }
.md > .ml { width: 380px; flex: none; overflow: auto; border-right: 1px solid var(--div); }
.md > .mr { flex: 1; min-width: 0; overflow: auto; }
.mecard { display: flex; align-items: center; gap: 16px; padding: 20px var(--pad); border-bottom: 1px solid var(--row-div); }
.mecard div { flex: 1; min-width: 0; }
.mecard b { display: block; font-size: var(--t-heading2); font-weight: 600; }
.mecard small { color: var(--ink2); font-size: var(--t-body2); }
.mecard .cb { width: auto; min-height: 40px; font-size: var(--t-body2); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gray); margin-right: 8px; vertical-align: middle; }
.dot.on { background: var(--ok); }

/* ---------- Pantallas superpuestas ---------- */
.ov-bg { position: fixed; inset: 0; z-index: 22; background: var(--paper); display: flex; }
.ov-bg.center { background: var(--backdrop); align-items: center; justify-content: center; padding: 24px; }
.ov { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--paper); }
.ov-bg.center .ov { flex: none; width: 100%; max-width: 560px; max-height: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, .3); }
.ov-bg.center .ov.wide { max-width: 820px; height: 100%; }
.ov-bg.anim .ov { animation: up .22s cubic-bezier(.2, .8, .2, 1); }
.ov-bg.center.anim .ov { animation: pop .18s ease-out; }
.ov-bg.center.anim { animation: fade .18s; }
@keyframes pop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.tb { flex: none; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; min-height: var(--bar); padding-right: 8px; border-bottom: 1px solid var(--row-div); }
.tb h1 { margin: 0; text-align: center; font-size: var(--t-heading2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb .ib { margin-left: 4px; }
.tb .end { min-width: 48px; min-height: 48px; padding: 0 8px; font-size: var(--t-label); font-weight: 500; color: var(--ink); text-align: right; }
.tb .end[disabled] { color: var(--gray); }
.tb .sp { width: 48px; }
.ov-b { flex: 1; min-height: 0; overflow: auto; }
.ov-f { flex: none; padding: 12px var(--pad) calc(var(--pad) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--row-div); }
.sh { padding: 24px var(--pad) 8px; display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-body); font-weight: 600; }
.sh small { font-size: var(--t-body2); font-weight: 400; color: var(--ink2); }
.radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--gray); flex: none; position: relative; }
.radio.on { border-color: var(--ink); }
.radio.on::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); }
.check { width: 22px; height: 22px; border-radius: 4px; border: 2px solid var(--gray); flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.check.on { background: var(--ink); border-color: var(--ink); }
.check svg.i { width: 16px; height: 16px; stroke-width: 3; }
.stepper { display: inline-flex; align-items: center; border-radius: 6px; background: var(--sec); }
.stepper button { width: 48px; height: 44px; font-size: 22px; text-align: center; }
.stepper span { min-width: 40px; text-align: center; font-size: var(--t-body); font-weight: 500; }
.field { display: block; padding: 16px var(--pad) 0; }
.field > span { display: block; margin-bottom: 6px; font-size: var(--t-body2); color: var(--ink2); }
.field input, .field select { width: 100%; height: var(--row); padding: 0 14px; border: 1px solid var(--div); border-radius: 6px; background: var(--paper); font-size: var(--t-body); outline: 0; }
.field input:focus, .field select:focus { border-color: var(--ink); }
.field input.big { font-size: var(--t-display2); font-weight: 500; text-align: right; }

/* Cobro: forma de pago, efectivo, tarjeta */
.tdh { padding: 32px var(--pad) 24px; text-align: center; border-bottom: 1px solid var(--row-div); }
.tdh .a { font-size: var(--t-display); font-weight: 500; line-height: 1.1; }
.tdh .s { margin-top: 6px; color: var(--ink2); font-size: var(--t-body2); }
.tdh .paidl { margin-top: 10px; font-size: var(--t-body2); color: var(--ok); }
.reader { margin: 36px auto 20px; width: 132px; height: 132px; border-radius: 50%; background: var(--sec); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.reader svg.i { width: 56px; height: 56px; stroke-width: 1.4; }
.reader.spin { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.94); opacity: .7; } }
.cardmsg { text-align: center; padding: 0 var(--pad); }
.cardmsg b { display: block; font-size: var(--t-heading2); font-weight: 600; }
.cardmsg span { display: block; margin-top: 6px; color: var(--ink2); font-size: var(--t-body2); }
.demo-note { margin: 12px var(--pad); padding: 10px 12px; border-radius: 6px; background: var(--sec); color: var(--title); font-size: 13px; text-align: center; }

/* Recibo (receipt_selection_view) */
.rc { max-width: 480px; margin: 0 auto; padding: 40px var(--pad) 24px; text-align: center; }
.rc .okc { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.rc .okc svg.i { width: 32px; height: 32px; stroke-width: 2.4; }
.rc h1 { margin: 0; font-size: var(--t-display2); font-weight: 600; line-height: 1.15; }
.rc .of { margin-top: 6px; color: var(--ink2); font-size: var(--t-body); }
.rc .q { margin: 36px 0 12px; font-size: var(--t-body); font-weight: 500; }
.rc .stack { display: flex; flex-direction: column; gap: 8px; }
.rc .field { padding: 0 0 12px; text-align: left; }
.tab-ov .rc { max-width: 680px; }
.tab-ov .rc .stack, .tab-ov .rc .field, .tab-ov .rc .demo-note { max-width: 432px; margin-left: auto; margin-right: auto; }

/* Inicio de sesión (código de acceso) */
.login { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
.login .mark { width: 56px; height: 56px; border-radius: 12px; }
.login .bn { margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--ink2); }
.login h1 { margin: 22px 0 0; font-size: var(--t-heading); font-weight: 600; text-align: center; }
.login .pins { display: flex; gap: 16px; margin: 24px 0 10px; }
.login .pd { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); }
.login .pd.on { background: var(--ink); }
.login .msg { min-height: 22px; font-size: var(--t-body2); color: var(--ink2); }
.login .msg.err { color: var(--crit); }
.login .pad { display: grid; grid-template-columns: repeat(3, 80px); gap: 12px 28px; margin-top: 18px; }
.login .pad button { width: 80px; height: 64px; border-radius: 8px; font-size: 28px; text-align: center; }
.login .pad button:active { background: var(--fill); }

/* Detalle de transacción */
.txd .tdh { border-bottom: 0; padding-bottom: 8px; }
.txd .meta { padding: 0 var(--pad) 16px; text-align: center; color: var(--ink2); font-size: var(--t-body2); border-bottom: 1px solid var(--row-div); }
.txd .acts { padding: 16px var(--pad); }

/* Toast oscuro (snackbar) */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav) + 150px); transform: translate(-50%, 12px); z-index: 60; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#root.tab ~ .toast { bottom: auto; top: 28px; }

/* ---------- Panel del dueño (admin.js) en clave Square ---------- */
.ov-admin .atabs { display: none; }
.apane { padding: 8px var(--pad) 24px; font-size: var(--t-body2); }
.apane h4 { margin: 24px 0 8px; font-size: var(--t-body); font-weight: 600; }
.apane .muted { color: var(--ink2); }
.apane .kicker { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.apane .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 6px; background: var(--sec); font-size: var(--t-body2); font-weight: 500; }
.apane .btn.primary { background: var(--ink); color: #fff; }
.apane .btn.block { display: flex; width: 100%; margin-top: 12px; min-height: var(--row); font-size: var(--t-label); }
.apane .btn[disabled] { color: var(--gray); background: var(--sec); }
.apane .link { color: var(--ink); text-decoration: underline; font-size: var(--t-body2); }
.apane .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); border-top: 1px solid var(--row-div); border-left: 1px solid var(--row-div); margin-top: 8px; }
.apane .kpi { padding: 14px; border-right: 1px solid var(--row-div); border-bottom: 1px solid var(--row-div); }
.apane .kpi span { display: block; color: var(--ink2); font-size: 13px; }
.apane .kpi b { display: block; margin-top: 4px; font-size: var(--t-heading2); font-weight: 600; }
.apane .tbl { width: 100%; border-collapse: collapse; }
.apane .tbl th { padding: 8px 6px; border-bottom: 1px solid var(--div); color: var(--ink2); font-weight: 500; font-size: 13px; text-align: left; }
.apane .tbl td { padding: 10px 6px; border-bottom: 1px solid var(--row-div); }
.apane .tbl td:last-child, .apane .tbl th:last-child { text-align: right; }
.apane .bar { display: grid; grid-template-columns: 52px 1fr 92px; gap: 8px; align-items: center; padding: 4px 0; }
.apane .bl { color: var(--ink2); font-size: 13px; }
.apane .bt { height: 10px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.apane .bt i { display: block; height: 100%; background: var(--ink); }
.apane .bv { text-align: right; }
.apane .field { padding: 12px 0 0; }
.apane .field label { display: block; margin-bottom: 6px; color: var(--ink2); }
.apane .field input, .apane .newp input, .apane .newp select, .apane .prow input, .apane .prow select, .apane .ask input { height: 48px; padding: 0 12px; border: 1px solid var(--div); border-radius: 6px; background: var(--paper); font-size: var(--t-body2); outline: 0; min-width: 0; }
.apane .field input { width: 100%; }
.apane input:focus, .apane select:focus { border-color: var(--ink); }
.apane .status { margin: 12px 0 0; font-weight: 500; }
.apane .status.ok { color: var(--ok); }
.apane .status.bad { color: var(--crit); }
.apane .rule { border: 0; border-top: 1px solid var(--row-div); margin: 20px 0; }
.apane .prow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--row-div); }
.apane .prow.off { opacity: .5; }
.apane .prow .pname { flex: 1 1 160px; }
.apane .pvar { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); font-size: 13px; }
.apane .pvar input { width: 96px; }
@media (max-width: 599px) {
  .apane .prow .pname { flex: 1 1 100%; }
  .apane .pvar { flex: 1 1 calc(50% - 8px); }
  .apane .pvar { min-width: 0; }
  .apane .pvar input { flex: 1; width: 0; }
  .apane .prow .link { margin-left: auto; }
}
.apane .newp { display: grid; grid-template-columns: 1fr; gap: 8px; }
.apane .quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.apane .quick button { min-height: 40px; padding: 0 14px; border-radius: 6px; background: var(--sec); font-size: 14px; }
.apane .ins { margin: 8px 0 0; padding-left: 18px; }
.apane .ins li { margin: 6px 0; }
.apane .qa { margin: 10px 0; }
.apane .qa .q { font-weight: 500; }
.apane .qa .a { color: var(--ink2); margin-top: 2px; }
.apane .ask { display: flex; gap: 8px; }
.apane .ask input { flex: 1; }
.app.tab ~ #layer .apane .newp, .tab-ov .apane .newp { grid-template-columns: 2fr 1fr 1fr auto; }

/* Recibo impreso */
.print-receipt { display: none; }
@media print {
  body { overflow: visible; }
  body > *:not(#printArea) { display: none !important; }
  .print-receipt { display: block; width: 72mm; margin: 0 auto; font: 12px/1.35 ui-monospace, Menlo, Consolas, monospace; color: #000; }
  .print-receipt .c { text-align: center; }
  .print-receipt .r { display: flex; justify-content: space-between; gap: 8px; }
  .print-receipt hr { border: 0; border-top: 1px dashed #000; margin: 6px 0; }
  .print-receipt b { font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- v4: calce con capturas de Square en el Pixel (REA, 13-oct-2026) ---------- */
.app.phone .kp-amt { text-align: left; padding: 24px var(--pad) 0; }
.app.phone .kp-val { font-size: 56px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.kp-nw { padding: 12px var(--pad) 20px; }
.kp-nw .kp-notebtn { display: inline-block; width: auto; padding: 8px 16px; border: 1px solid var(--div); border-radius: 999px; color: var(--ink); font-size: var(--t-body2); font-weight: 500; text-align: left; }
.app.phone .kp-grid { margin: 0 var(--pad); border: 1px solid var(--div); border-radius: 8px; overflow: hidden; }
.app.phone .kp-grid button { font-size: 28px; font-weight: 500; border-color: var(--div); }
.app.phone .kp-grid button:nth-last-child(-n+3) { border-bottom: 0; }
.app.phone .kp-grid button.fn:last-child { color: var(--gray); }
.app.phone .co-buttons { border-top: 0; padding-top: 12px; }
.cb.pill { border-radius: 999px; background: var(--ink); color: #fff; }
.cb.pill[disabled] { background: var(--fill); color: var(--gray); }
.cb.link { min-height: 36px; color: var(--ink); font-size: var(--t-body2); }
.row .thumb { background: #666; color: #fff; }
.row .thumb svg.i { width: 28px; height: 28px; }
.row .thumb.ab { background: #E5E5E5; color: var(--ink2); font-size: 18px; font-weight: 600; }
.app.phone .search { background: none; margin: 0; border-radius: 0; height: var(--row); border-bottom: 1px solid var(--row-div); padding: 0 var(--pad); }
.newitem { display: block; padding: 20px var(--pad); color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tile { box-shadow: none; background: var(--fill); border-radius: 8px; }
.tile .tp { background: none; color: var(--ink); }
.tile .tl { color: var(--ink); }
.tile.ghost { aspect-ratio: 1 / 1; }
.fav-empty { padding: 32px var(--pad); text-align: center; color: var(--ink2); }
.fav-empty > svg.i { width: 40px; height: 40px; color: var(--ink); }
.fav-empty b { display: block; margin: 12px 0 4px; color: var(--ink); font-size: var(--t-heading2); }
.fav-empty p { margin: 0 auto 24px; max-width: 300px; font-size: var(--t-body2); }
.fav-empty .tiles { padding: 0; }
.app.phone .navbar { border-top: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
.app.phone .navbar .ni { margin: 0 2px; border-radius: 12px; font-size: 10px; line-height: 1.15; text-align: center; padding: 6px 0; }
.app.phone .navbar .ni.on { background: var(--fill); color: var(--ink); }
.app.phone .seg button.on { box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.app.phone .kp-amt { padding-top: 64px; }
.app.phone .kp-nw { padding: 40px var(--pad) 16px; }
.app.phone .kp-nw .kp-notebtn { display: block; width: 100%; text-align: center; border-radius: 6px; padding: 12px; }
.app.phone .kp-grid button { font-size: 22px; }
.app.phone .navbar .ni span:last-child { max-width: 100%; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; }
/* ---------- v5: medidas en dp sacadas de la comparación REA (compare-web-screenshots) ---------- */
.app.phone .kp { display: flex; flex-direction: column; height: 100%; }
.app.phone .kp-amt { flex: 1; display: flex; align-items: center; padding: 0 var(--pad); }
.app.phone .kp-val { font-size: 72px; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.app.phone .kp-nw { flex: none; padding: 0 var(--pad) 16px; }
.app.phone .kp-nw .kp-notebtn { height: 48px; padding: 0 12px; border-color: #ececec; font-size: 16px; }
.app.phone .kp-grid { flex: none; min-height: 0; grid-auto-rows: 78px; border-color: #ececec; }
.app.phone .kp-grid button { border-color: #ececec; font-size: 24px; font-weight: 500; }
.app.phone .co-buttons { padding: 17px var(--pad) 16px; }
.app.phone .cb.pill { min-height: 56px; border-radius: 999px; font-size: 16px; font-weight: 600; }
.app.phone .cb.pill[disabled] { background: var(--fill); color: var(--ink); }
.app.phone .navbar { height: 85px; padding: 5px 2px 6px; }
.app.phone .navbar .ni { margin: 0 1px; padding: 0; gap: 6px; border-radius: 6px; color: var(--ink); }
.app.phone .navbar .ni.on { background: #efefef; }
.app.phone .navbar .ni span:last-child { font-size: 11px; font-weight: 500; color: var(--ink); }
.app.phone .navbar .ni svg.i { width: 26px; height: 26px; }
.app.phone .segw { padding: 13px var(--pad) 0; }
.app.phone .seg { max-width: none; height: 38px; }
.app.phone .navbar { border-top: 1px solid #ececec; }
.app.phone .navbar .ni { flex: 1 1 0; min-width: 0; }
.app.phone .cb.pill { font-weight: 500; }
.app.phone .segw { padding-bottom: 13px; }
.app.phone .search { height: 60px; gap: 16px; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; color: #6a6a6a; font-size: 16px; }
.app.phone .search svg.i { width: 26px; height: 26px; color: var(--ink); stroke-width: 2.4; }
.row.thumbed::after { left: var(--row); background: #d5d7d9; }
.row .rt { font-weight: 500; }
.row .acc { color: var(--ink); }
.row .thumb.ab { background: #9da2a6; color: #fff; font-size: 22px; font-weight: 400; }
.libroot { min-height: 100%; background: #f2f4f5; }
.libroot .list { background: var(--paper); }
.libroot .list + .list { margin-top: 16px; }
.libroot .newitem { text-align: center; text-decoration: none; font-weight: 500; }
.co-main { position: relative; }
.gtip { position: absolute; left: 16px; right: 16px; bottom: 105px; z-index: 5; display: flex; align-items: flex-start; gap: 14px; padding: 16px 12px 16px 12px; border-radius: 8px; background: #232323; color: #fff; font-size: 16px; line-height: 1.32; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.gtip > svg.i { flex: none; width: 24px; height: 24px; margin-top: 3px; }
.gtip span { flex: 1; }
.gtip .ib { flex: none; width: 32px; height: 32px; margin: -2px 0 0; color: #fff; }
.app.tab .gtip { left: auto; right: 24px; width: 380px; bottom: 24px; }
.app.phone .navbar .ni span:last-child { font-size: 10.5px; letter-spacing: -.02em; }
/* ---------- v5b: Transacciones y Más medidos contra Square (REA s07/s08) ---------- */
.tx-h { border-bottom: 0; min-height: 0; padding-top: 22px; padding-bottom: 14px; }
.tx-h h1 { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.txsearch { flex: none; display: flex; align-items: center; gap: 12px; height: 50px; margin: 6px var(--pad) 12px; padding: 0 16px; border: 1px solid #d0d0d0; border-radius: 999px; }
.txsearch svg.i { width: 24px; height: 24px; color: var(--ink); stroke-width: 2.2; }
.txsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.txday { margin: 0 var(--pad); padding: 12px 0 10px; border-bottom: 1px solid #8f8f8f; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.txlist .txr { min-height: 100px; margin: 0 var(--pad); padding: 0; width: calc(100% - 2 * var(--pad)); border-bottom: 1px solid #ececec; }
.txlist .txr:first-of-type, .txlist .txr.hl { margin: 0 4px; width: calc(100% - 8px); padding: 0 12px; border-radius: 8px; }
.txlist .txr .lead { width: 70px; justify-content: flex-start; padding-left: 12px; }
.txlist .txr .lead svg.i { width: 32px; height: 32px; }
.txlist .txr .rt b { display: block; font-size: 19px; font-weight: 600; }
.txlist .txr .rt small { color: var(--ink); font-size: 16px; }
.txlist .txr .rv { color: var(--ink); font-size: 18px; }
.app.phone .txlist .txr:first-of-type { background: #f6f6f6; }
.mpage { position: relative; padding-bottom: 260px; }
.mhead { display: flex; align-items: flex-start; gap: 16px; padding: 20px var(--pad) 0; }
.mhead > div { flex: 1; }
.mhead h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.22; letter-spacing: -.01em; }
.mhead p { margin: 26px 0 0; font-size: 18px; }
.mav { flex: none; width: 60px; height: 60px; border: 0; border-radius: 50%; background: var(--fill); display: grid; place-items: center; }
.mav .avatar { width: 40px; height: 40px; font-size: 15px; }
.minfo { display: flex; gap: 14px; margin: 26px var(--pad) 0; padding: 18px 16px 22px; border: 1px solid #d6d6d6; border-radius: 12px; background: var(--fill); font-size: 17px; line-height: 1.55; }
.minfo > svg.i { flex: none; width: 26px; height: 26px; }
.minfo b { display: block; font-weight: 600; }
.minfo a { display: block; margin-top: 14px; color: var(--ink); font-weight: 600; text-decoration: underline; }
.mmode { display: flex; align-items: center; gap: 14px; width: calc(100% - 2 * var(--pad)); margin: 12px var(--pad) 0; padding: 16px; border: 0; border-radius: 12px; background: var(--fill); text-align: left; font: inherit; color: var(--ink); }
.mmode .mmi { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; background: var(--paper); }
.mmode .rt { flex: 1; font-size: 16px; font-weight: 600; }
.mmode .rt small { display: block; color: var(--ink2); font-size: 14px; font-weight: 400; }
.mlist { margin-top: 12px; }
.mpromo { position: sticky; bottom: 8px; display: block; margin: 16px var(--pad) 0; padding: 20px 20px 22px; border-radius: 4px; background: #000; color: #fff; font-size: 17px; }
.mpromo b { display: block; max-width: 80%; font-size: 21px; line-height: 1.6; }
.mpromo span { display: block; margin-top: 6px; color: #c8c8c8; line-height: 1.5; }
.mpromo .ib { position: absolute; top: 12px; right: 12px; color: #fff; }
.copromo { position: absolute; left: 16px; right: 16px; bottom: 104px; z-index: 5; margin: 0; padding: 20px 16px 16px; border-radius: 8px; }
.copromo b { font-size: 20px; line-height: 1.3; }
.copromo span { margin-top: 4px; font-size: 16px; }
.copromo .cb { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 16px; border-radius: 999px; background: var(--paper); color: #000; font-size: 16px; font-weight: 600; }
.app.tab .copromo { left: auto; right: 24px; width: 380px; bottom: 24px; }
.mout { display: block; width: calc(100% - 2 * var(--pad)); margin: 24px var(--pad) 8px; }
.mpromo .cb { display: flex; align-items: center; justify-content: center; min-height: 60px; margin-top: 16px; border-radius: 999px; background: var(--paper); color: #000; text-decoration: none; font-weight: 600; }
.mpg { position: relative; }
.mpage { padding-bottom: 290px; }
.mpromo { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 4; margin: 0 var(--pad); }
.mpromo b { font-size: 19px; line-height: 1.55; font-weight: 600; }
.mpromo span { font-size: 16px; }
.mhead h1 { font-size: 23px; font-weight: 600; line-height: 1.5; }
.mhead p { margin-top: 18px; font-size: 16px; }
.mav { background: var(--fill); }
.mav .avatar { background: none; color: var(--ink); font-size: 18px; }
.mav svg { width: 24px; height: 24px; }
.minfo { font-size: 16px; line-height: 1.6; }
.minfo b { font-size: 16px; }
.mmode .rt { font-size: 15px; }
.mmode .rt small { font-size: 13.5px; }
.app.tab .mpromo { left: auto; width: 420px; right: 24px; }
.mpg { height: 100%; min-height: 0; overflow: hidden; }
.mhead h1 { max-width: 280px; }
.minfo { line-height: 1.5; padding-bottom: 18px; }
.minfo a { margin-top: 10px; }
.mmode { padding: 12px 16px; }
.mpromo { bottom: 18px; }

/* ---------- Servicio de barra (modo restaurante) ---------- */
.ov-bg.bsheet { background: var(--backdrop); align-items: flex-end; }
.ov-bg.bsheet .ov { flex: none; width: 100%; max-height: 88%; border-radius: 24px 24px 0 0; overflow: auto; }
.ov-bg.bsheet.anim .ov { animation: up .22s cubic-bezier(.2, .8, .2, 1); }
.msheet { padding: 0 var(--pad) 24px; }
.msheet .grab { display: block; width: 52px; height: 5px; margin: 10px auto 22px; border-radius: 3px; background: #bdbdbd; }
.msh { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.msh h1 { flex: 1; min-width: 0; margin: 0; font-size: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.msh .cb { flex: none; width: auto; min-height: 48px; padding: 0 22px; border-radius: 24px; }
.msheet .list { margin: 0; }
.row.mopt { align-items: flex-start; padding: 20px 0; }
.row.mopt .lead { margin-top: 18px; }
.row.mopt .rt { font-size: 17px; font-weight: 500; white-space: normal; }
.row.mopt .rt small { display: block; margin-top: 4px; color: var(--ink2); font-size: 15px; font-weight: 400; line-height: 1.45; white-space: normal; }
.row.mopt .radio { align-self: center; }
.svc { display: flex; flex-wrap: nowrap; gap: 8px; padding: 12px var(--pad) 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; min-width: 0; padding: 0 12px; border: 1px solid #d6d6d6; white-space: nowrap; border-radius: 20px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; }
.chip svg.i { width: 18px; height: 18px; }
.seath { padding: 14px var(--pad) 4px; color: var(--ink2); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cl .s.fired { color: #1f7a3a; }
.ord-h { display: flex; align-items: center; gap: 12px; }
.ord-h h1 { flex: 1; }
.ord-h .cb { flex: none; width: auto; min-height: 44px; padding: 0 20px; border-radius: 22px; }
.txr .rv small { display: block; color: var(--ink2); font-size: 13px; font-weight: 400; text-align: right; }
.txr .rv b { display: block; text-align: right; }
.txd .acts { display: flex; gap: 10px; }
.txd .acts .cb { flex: 1; }
.msh .cb.mplus { width: 48px; padding: 0; border-radius: 50%; background: var(--fill); color: var(--ink); display: grid; place-items: center; }
.msh .cb.mplus svg { width: 24px; height: 24px; }
.mlist .row.mr { min-height: 56px; }
.mlist .row.mr .rt { font-size: 17px; font-weight: 500; }
.minfo .lnk { display: block; margin-top: 14px; color: var(--ink); font-weight: 600; text-decoration: underline; }
.mpromo button.cb { width: 100%; border: 0; font: inherit; font-weight: 600; }
/* v6b: medidas de s10/s11 */
.mmode .rt, .mmode .rt { font-weight: 500; }
.mmode .mmi svg.i { width: 22px; height: 22px; }
.mlist { margin-top: 16px; }
.ov-bg.bsheet .ov { overflow: visible; }
.ov-bg.bsheet .ov > .grab { position: absolute; top: -16px; left: 50%; margin: 0 0 0 -26px; display: block; width: 52px; height: 5px; border-radius: 3px; background: #bdbdbd; }
.msheet { padding-top: 22px; }
.row.mopt { padding: 16px 0; border-bottom: 1px solid var(--row-div); }
.row.mopt::after, .row.mopt::before { display: none !important; }
.row.mopt .rt { line-height: 1.35; }
.row.mopt .rt small { font-size: 14px; line-height: 1.4; margin-top: 3px; }
.row.mopt .lead svg.i { width: 26px; height: 26px; }
.row.mopt .radio.on { border-color: var(--ink); background: var(--ink); }
.row.mopt .radio.on::after { inset: 5px; background: var(--paper); }
.ov-bg.bsheet .ov { position: relative; }
.msheet { padding-bottom: 76px; }
.msheet .msh { margin-bottom: 20px; }
.ov-bg.bsheet { background: rgba(0,0,0,.8); }
.mpromo .cb, .mpromo button.cb { font-weight: 500; }
/* ================= v7: s15–s32 (carrito Estándar, detalle, Notificaciones, Banco, Más y subpáginas) ================= */
.app.phone .backdrop.sq { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.8); }
.app.phone .sheet.sq { position: fixed; left: 0; right: 0; top: 73px; bottom: 0; z-index: 21; border-radius: 16px 16px 0 0; }
.sheet.sq > .grab { position: absolute; top: -12px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: #858585; }
.cart.std { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cart.std .cart-b { flex: 1; min-height: 0; overflow: auto; }
.cart-h.sq { position: relative; display: flex; align-items: center; height: 72px; padding: 0 12px; border: 0; }
.cart-h.sq h2 { flex: 1; text-align: center; font-size: 16px; font-weight: 500; margin: 0; }
.cart-h.sq .sp { width: 48px; flex: none; }
.ib.xs { width: 48px; height: 48px; display: grid; place-items: center; }
.ib.xs > span { width: 32px; height: 32px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; }
.ib.xs svg.i { width: 18px; height: 18px; }
.cart.std .band { display: block; width: 100%; height: 38px; background: #f2f3f4; font-size: 13px; font-weight: 700; text-align: center; color: var(--ink); }
.addcli { display: flex; align-items: center; gap: 16px; width: calc(100% - 32px); margin: 17px 16px 12px; height: 56px; padding: 0 12px 0 8px; border-radius: 8px; background: #f2f3f4; text-align: left; }
.addcli .cc { width: 40px; height: 40px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; flex: none; }
.addcli .rt { flex: 1; font-size: 16px; font-weight: 500; }
.addcli > svg.i { color: var(--ink2); }
.sl { position: relative; display: grid; grid-template-columns: 1fr auto; width: 100%; padding: 14px 16px; text-align: left; }
.sl .n { font-size: 16px; font-weight: 500; }
.sl .v { font-size: 16px; }
.sl .s { grid-column: 1 / -1; color: var(--ink2); font-size: 14px; }
.sl::after { content: ""; position: absolute; left: 16px; bottom: 0; width: 32px; border-top: 1px solid var(--row-div); }
.adisc { display: block; padding: 18px 16px; font-size: 16px; color: var(--ink); text-align: left; }
.cart.std .tot { padding: 4px 16px; }
.cart.std .cart-f { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.cb.sqp { height: 56px; min-height: 56px; border-radius: 6px; font-size: 16px; font-weight: 500; }
.cb.sqp[disabled] { background: var(--fill); color: #a5a5a5; }
.asbg { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.8); display: flex; flex-direction: column; justify-content: flex-end; }
.asbg > .grab { align-self: center; width: 40px; height: 6px; border-radius: 3px; background: #858585; margin-bottom: 8px; }
.as { background: var(--paper); border-radius: 24px 24px 0 0; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.as .cb.pill { height: 48px; min-height: 48px; border-radius: 999px; background: var(--fill); border: 0; color: var(--ink); font-size: 16px; font-weight: 500; }
.ulnk { align-self: center; margin-top: 10px; padding: 8px 12px; text-decoration: underline; font-size: 16px; font-weight: 500; color: var(--ink); background: none; }
/* detalle de transacción s24 */
.gbar { display: flex; align-items: center; gap: 4px; height: 47px; padding: 0 16px; background: var(--tabbg); border-bottom: 1px solid #e0e0e0; flex: none; }
.gbar .ib { width: 40px; height: 40px; margin-left: -12px; display: grid; place-items: center; }
.gbar h1 { flex: 1; margin: 0; font-size: 16px; font-weight: 500; }
.gbar.w { background: var(--paper); }
.tdx { padding: 18px 0 32px; }
.tdx .cb.gb { display: flex; align-items: center; justify-content: center; width: calc(100% - 64px); margin: 0 32px 16px; height: 48px; min-height: 48px; border-radius: 6px; background: #f2f3f4; border: 1px solid #dcdcdc; color: var(--ink); font-size: 16px; font-weight: 500; }
.tsec { display: flex; flex-direction: column; gap: 2px; padding: 28px 16px 10px; border-bottom: 1px solid var(--row-div); }
.tsec b { font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.tsec span { color: var(--ink2); font-size: 14px; }
.trw { display: flex; align-items: center; gap: 16px; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--row-div); }
.trw.it { min-height: 64px; }
.trw .ti { display: flex; color: var(--ink); }
.trw .rt { flex: 1; min-width: 0; font-size: 16px; }
.trw .rt small { display: block; color: var(--ink2); font-size: 14px; font-style: italic; }
.trw .rv { font-size: 16px; }
.trw .rv.g { color: var(--ink2); }
.trw .th { width: 48px; height: 48px; flex: none; display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 600; border-radius: 4px; }
.trw .th.sl8 { background: #8a959e; }
.trw.big .rt, .trw.big .rv { font-weight: 700; }
/* Notificaciones s15/s16 */
.sseg { display: flex; margin: 8px 16px 12px; padding: 4px; border-radius: 999px; background: var(--fill); }
.sseg button { flex: 1; height: 40px; border-radius: 999px; font-size: 16px; font-weight: 500; color: var(--ink); text-align: center; display: flex; align-items: center; justify-content: center; }
.sseg button.on { background: var(--paper); }
.nov { display: block; width: 100%; padding: 16px; border-bottom: 1px solid var(--row-div); text-align: left; }
.nov-t { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: 13px; margin-bottom: 6px; }
.ndot { width: 8px; height: 8px; border-radius: 50%; background: #006aff; }
.nov b { display: block; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.nov p { margin: 0; color: var(--ink2); font-size: 14px; line-height: 1.45; }
.ncard { display: flex; flex-direction: column; gap: 6px; margin: 8px 16px; padding: 24px 20px; border: 1px solid #d0d0d0; border-radius: 8px; text-align: center; }
.ncard b { font-size: 16px; }
.ncard span { color: var(--ink2); font-size: 14px; line-height: 1.45; }
/* Servicios bancarios s17 */
.bk-h { display: flex; align-items: center; justify-content: space-between; }
.cir { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--fill); display: grid; place-items: center; color: var(--ink); }
.utabs { display: flex; gap: 22px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--row-div); }
.utabs button { flex: none; height: 44px; font-size: 15px; color: var(--ink2); border-bottom: 2px solid transparent; }
.utabs button.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.bkb { background: #f7f7f7; padding: 16px 0 24px; }
.bcard { margin: 0 16px 16px; padding: 20px 16px; background: var(--paper); border: 1px solid #e6e6e6; border-radius: 10px; }
.bcard h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.bcard .bn { font-size: 15px; font-weight: 500; }
.bamt { font-size: 32px; font-weight: 700; margin-top: 10px; }
.bsub { color: var(--ink2); font-size: 14px; margin-bottom: 16px; }
.bdis { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border-radius: 999px; background: var(--fill); color: #a5a5a5; font-size: 15px; font-weight: 500; overflow: hidden; white-space: nowrap; }
.bdis span { overflow: hidden; text-overflow: ellipsis; }
.brow { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; text-align: left; }
.brow .rt { flex: 1; font-size: 16px; }
.brow .rt small { display: block; color: var(--ink2); font-size: 14px; }
.bico { width: 40px; height: 40px; border-radius: 6px; background: #101010; color: #fff; display: grid; place-items: center; flex: none; }
.bico.lt { background: var(--fill); color: var(--ink); }
.bcard .ulnk { display: block; margin: 8px 0 0; padding: 4px 0; align-self: auto; }
.bp { margin: 0; color: var(--ink2); }
/* Más s26 */
.mbdg { position: absolute; left: 14px; top: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #006aff; color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; }
.mlist .row.mr .lead { position: relative; }
.cb.pers { display: flex; align-items: center; justify-content: center; line-height: 1; width: calc(100% - 32px); margin: 16px 16px 24px; height: 48px; min-height: 48px; border-radius: 999px; background: var(--fill); border: 0; color: var(--ink); font-size: 16px; font-weight: 500; }
/* Informes s27 / Ventas s28 */
.clist { display: flex; flex-direction: column; }
.crow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 32px 0 16px; border-bottom: 1px solid var(--row-div); text-align: left; }
.clist .crow { padding: 0 16px; }
.crow .rt { flex: 1; font-size: 16px; }
.crow .rv { color: var(--ink2); font-size: 15px; }
.crow svg.i { color: var(--ink2); }
.clist.g .crow { min-height: 56px; }
.ipromo { position: relative; margin: 24px 16px; padding: 24px 20px 20px; border-radius: 12px; background: #f7f7f7; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ipromo .xc { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; background: var(--paper); }
.ipromo .illu { width: 120px; height: 104px; }
.ipromo b { font-size: 18px; font-weight: 700; }
.ipromo p { margin: 0; color: var(--ink2); font-size: 14px; line-height: 1.45; }
.ipromo .cb.pill { width: 100%; height: 48px; min-height: 48px; border-radius: 999px; font-size: 16px; font-weight: 500; }
.gbar .ib.sm { margin: 0 -12px 0 0; }
.rhead { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--tabbg); }
.rhead b { font-size: 16px; }
.rhead span, .rhead u { color: var(--ink2); font-size: 14px; }
.rsh { display: flex; align-items: center; justify-content: space-between; padding: 20px 16px 6px; font-size: 12px; font-weight: 500; }
.rsh .ib { width: 32px; height: 32px; }
.rgrid { display: grid; grid-template-columns: 1fr 1fr; margin: 0 16px; border-bottom: 1px solid var(--row-div); }
.rcl { display: flex; flex-direction: column; gap: 4px; padding: 16px 8px 16px 0; }
.rcl + .rcl { padding-left: 16px; border-left: 1px solid var(--row-div); }
.rcl b { font-size: 26px; font-weight: 500; }
.rcl span { color: var(--ink2); font-size: 14px; }
.rday { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 16px; color: var(--ink2); font-size: 13px; }
.rday.v b { color: var(--ink); font-size: 20px; font-weight: 500; }
/* Clientes s29 */
.cpg { display: flex; padding: 16px; min-height: 100%; }
.ccard { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; border: 1px solid #d0d0d0; border-radius: 8px; text-align: center; }
.ccard .illu.cli { width: 64px; height: 64px; }
.ccard b { font-size: 18px; font-weight: 700; }
.ccard p { margin: 0; color: var(--ink2); font-size: 14px; line-height: 1.45; }
.cbtns { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 8px; }
.cbtns .cb.pill { height: 48px; min-height: 48px; border-radius: 999px; font-size: 16px; font-weight: 500; }
.cbtns .cb.sec { background: var(--fill); border: 0; color: var(--ink); }
/* Pedidos s30 */
.oph { display: flex; align-items: center; gap: 10px; padding: 16px 16px 8px; }
.ophl { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 18px; font-weight: 700; text-decoration: underline; text-align: left; }
.ophl span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cb.acc2 { width: 88px; height: 48px; min-height: 48px; border-radius: 999px; background: var(--fill); border: 0; color: var(--ink); font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 14px; }
.opf { display: flex; gap: 8px; padding: 8px 16px; }
.sqb { width: 48px; height: 48px; flex: none; border-radius: 8px; border: 1px solid #d0d0d0; display: grid; place-items: center; }
.opst { flex: 1; display: flex; flex-direction: column; justify-content: center; height: 48px; padding: 0 12px; border: 1px solid #d0d0d0; border-radius: 8px; }
.opst span { color: var(--ink2); font-size: 12px; }
.opst b { font-size: 15px; font-weight: 500; }
.opempty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 160px 32px 0; text-align: center; }
.opempty b { font-size: 16px; }
.opempty span { color: var(--ink2); font-size: 14px; line-height: 1.45; }
/* Ajustes s31 / Proceso de pago s32 */
.ajmode { display: flex; align-items: center; gap: 16px; width: calc(100% - 32px); margin: 16px; min-height: 72px; padding: 0 16px; border: 1px solid #d0d0d0; border-radius: 8px; text-align: left; }
.ajmode .rt { flex: 1; font-size: 16px; font-weight: 500; }
.ajmode .rt small { display: block; color: var(--ink2); font-size: 14px; font-weight: 400; }
.alist { display: flex; flex-direction: column; padding: 0 16px; }
.arow { display: block; width: 100%; min-height: 56px; text-align: left; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--row-div); }
.cbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; }
.cbar h1 { flex: 1; margin: 0; text-align: center; font-size: 18px; font-weight: 700; }
.cbar .sp { width: 48px; }
.ajg { margin: 12px 16px 4px; font-size: 18px; font-weight: 700; }
/* Guía s25 */
.gh { display: flex; align-items: center; justify-content: space-between; padding: 16px; }
.gh h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.15; }
.gh .ulnk { margin: 0; flex: none; }
.gsec { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 16px 4px; }
.gsec b { font-size: 18px; }
.gsec span { color: var(--ink2); font-size: 14px; }
.gsec.adv { padding-top: 28px; }
.gi { display: flex; align-items: flex-start; gap: 16px; width: 100%; padding: 14px 16px; text-align: left; }
.gi .gic { display: flex; padding-top: 2px; }
.gi .rt { flex: 1; min-width: 0; }
.gi .rt b { display: block; font-size: 16px; font-weight: 500; }
.gi .rt small { display: block; color: var(--ink2); font-size: 14px; margin-top: 2px; }
.gi.done .rt b { color: var(--ink2); }
.gi .gx { display: flex; color: var(--ink2); }
/* v7b: ajustes por la comparación REA */
.cart-h.sq { height: 85px; padding-top: 20px; }
.ib.xs > span { width: 24px; height: 24px; }
.ib.xs svg.i { width: 14px; height: 14px; }
.cart.std .cart-f { border-top: 0; }
.cb.sqp { font-weight: 600; }
.app.phone .as .cb.pill, .app.phone .cb.pers, .app.phone .cbtns .cb.pill, .app.phone .ipromo .cb.pill, .app.phone .cb.acc2 { height: 46px; min-height: 46px; }
.tdx { padding: 40px 32px 32px; }
.tdx .cb.gb { width: 100%; margin: 0 0 16px; border-radius: 0; }
.tsec { padding: 52px 0 10px; }
.tdx .tsec + .trw, .tdx .tsec { border-bottom: 1px solid var(--row-div); }
.tsec span { font-size: 13px; font-weight: 500; }
.tdx .trw { padding: 0; min-height: 48px; }
.tdx .trw.it { min-height: 48px; }
.tdx .trw .th { border-radius: 0; align-self: stretch; height: 48px; }
.tdx .trw .rt { font-weight: 500; }
.tdx .tsec:nth-of-type(n+2) { padding-top: 40px; }
.gbar.w { height: 56px; border-bottom: 1px solid #d0d0d0; }
.rhead { align-items: center; text-align: center; gap: 2px; padding: 14px 16px; border-bottom: 1px solid #d0d0d0; }
.rhead span, .rhead u { color: var(--ink); }
.pg-b > .utabs { gap: 0; padding: 0; }
.pg-b > .utabs button { flex: 1 0 auto; padding: 0 12px; height: 52px; font-size: 17px; color: var(--ink); font-weight: 500; }
.pg-b > .utabs button.on { font-weight: 500; border-bottom-width: 3px; }
.rsh { padding: 40px 16px 20px; font-weight: 600; }
.rgrid { padding: 40px 0 36px; }
.rgrid .rcl { text-align: left; align-items: flex-start; padding: 0 8px 0 0; border: 0 !important; justify-content: flex-start; }
.rgrid .rcl b { font-size: 30px; font-weight: 400; color: #3a3f44; line-height: 1.1; }
.rgrid .rcl span { font-size: 14px; }
.rday { padding: 6px 16px; font-weight: 600; }
.clist:not(.g) { padding-top: 16px; }
.clist:not(.g) .crow { min-height: 48px; padding: 0 32px; border: 0; }
.clist:not(.g) .crow .rt { font-weight: 500; color: #3a3f44; }
.ipromo { margin: 24px 16px; padding: 32px 16px 16px; text-align: left; align-items: stretch; }
.ipromo .illu { align-self: center; width: 160px; height: 150px; }
.ipromo b { text-align: center; }
.ipromo p { font-size: 16px; color: var(--ink); padding: 0 16px; }
.ipromo .xc { width: 48px; height: 48px; top: 16px; right: 16px; background: #ececec; }
.app.phone .ipromo .cb.pill { align-self: center; width: auto; padding: 0 36px; margin-top: 16px; }
.gh h1 { font-size: 26px; }
.gi { padding: 18px 0; margin: 0 16px; width: calc(100% - 32px); gap: 12px; border-bottom: 1px solid var(--row-div); }
.gsec + .gi { border-top: 0; }
.txsearch { height: 40px; }
.rhead { padding: 8px 16px 10px; gap: 0; line-height: 1.35; }
.pg-b > .utabs button { height: 40px; font-size: 16px; }
.rsh { padding-top: 32px; }
.cpg { padding: 0 1px 1px; }
.ccard { padding: 24px 32px; }
.ccard p { max-width: 302px; color: var(--ink); font-size: 16px; }
.cbtns { flex-direction: row; justify-content: center; gap: 8px; }
.app.phone .cbtns .cb.pill { width: auto; flex: none; padding: 0 22px; }
.rgrid { padding: 26px 0 22px; }

/* ---------- Flujos (flujos.js): pantallas apiladas medidas sobre f03–f37 ---------- */
.fl-ov { position: relative; min-width: 0; max-width: 100%; }
.fl-ov .flw, .fl-ov .flc, .fl-sh, .flf { min-width: 0; }
.ov-bg.fl-clear { background: transparent; }
.ov.fl-ghost { background: transparent; box-shadow: none; pointer-events: none; }
.ov.fl-ghost > * { pointer-events: auto; }
.flw { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--paper); }
.flb { flex: none; display: flex; align-items: center; gap: 12px; min-height: 80px; padding: 0 var(--pad); }
.flb h1 { flex: 1; min-width: 0; margin: 0; font-size: 20px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flb .sp { width: 96px; flex: none; }
.flsave { width: auto; min-width: 96px; min-height: 48px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 600; flex: none; }
.flsave[disabled] { background: var(--fill); color: #8f8f8f; }
.flc { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--pad) calc(32px + env(safe-area-inset-bottom)); }
.tab-ov .flw:not(.flsh) .flc { padding-left: max(var(--pad), calc((100% - 640px) / 2)); padding-right: max(var(--pad), calc((100% - 640px) / 2)); }
.flt { margin: 4px 0 12px; font-size: 28px; font-weight: 700; line-height: 1.2; }
.fl-sbg { position: fixed; inset: 0; z-index: 29; background: var(--backdrop); animation: fade .18s; }
.fl-sh { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column; max-height: 90%; border-radius: 16px 16px 0 0; overflow: hidden; background: var(--paper); animation: up .22s cubic-bezier(.2, .8, .2, 1); }
.tab-ov .fl-sh { left: 50%; right: auto; top: 50%; bottom: auto; width: min(560px, 92vw); max-height: 86%; border-radius: 12px; transform: translate(-50%, -50%); animation: none; }
.flw.flsh .flc { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.flw.flsh .flb > .sp { display: none; }
.flw.flsh .flb > h1:has(+ .sp) { text-align: left; }

/* Campos con borde (f03): la etiqueta sube cuando hay valor */
.flf { position: relative; display: flex; align-items: center; gap: 8px; min-height: 64px; margin-top: 16px; padding: 0 16px; border: 1px solid #c8c8c8; border-radius: 8px; background: var(--paper); }
.flf:focus-within { border-color: var(--ink); }
.flf input, .flf select, .flf textarea { flex: 1; min-width: 0; height: 62px; padding: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--ink); }
.flf input::placeholder, .flf textarea::placeholder { color: #6f6f6f; }
.flfl { display: none; position: absolute; top: 9px; left: 16px; font-size: 12px; color: var(--ink2); pointer-events: none; }
.flfl.up, .flf:has(input:not(:placeholder-shown)) .flfl { display: block; }
.flf:has(.flfl.up) input, .flf:has(input:not(:placeholder-shown)) input, .flf.sel select, .flf.unit .flv { padding-top: 18px; }
.flf.ta { align-items: stretch; padding: 0; }
.flf.ta textarea { height: auto; min-height: 132px; padding: 16px; resize: vertical; font-family: inherit; line-height: 1.4; }
.flf.sel select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.flf.sel svg.i { position: absolute; right: 14px; color: var(--ink2); pointer-events: none; }
.flf.unit .flv { flex: 1; font-size: 16px; }
.flf.big input { height: 78px; font-size: 32px; font-weight: 600; }
.flhelp { margin: 8px 0 0; font-size: 14px; color: var(--ink2); line-height: 1.45; }
.flin { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; white-space: nowrap; flex: none; }
.flin svg.i { width: 22px; height: 22px; }
.fllink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.fllink u { text-underline-offset: 3px; }
.fllink.spark { text-decoration: none; }
.flline { display: flex; align-items: center; gap: 8px; }
.flline > .flf { flex: 1; }
.flline.two > .flf.pr, .flline.three > .flf.pr { flex: 0 0 34%; }
.flline > .flf + .flhelp { display: none; }
.flx { width: 40px; height: 40px; margin-top: 16px; }
.flx svg.i { width: 18px; height: 18px; }

/* Textos, separadores y bloques */
.flh { margin: 0; padding-top: 4px; font-size: 20px; font-weight: 600; }
.flp { margin: 8px 0 0; font-size: 16px; color: var(--ink2); line-height: 1.45; }
.flp.pad { padding: 0 var(--pad); }
.flsep { height: 8px; margin: 28px 0 24px; border-radius: 2px; background: var(--fill); }
.flpill { display: inline-flex; width: auto; min-height: 48px; margin-top: 16px; padding: 0 24px; border-radius: 999px; font-size: 16px; font-weight: 500; }
.flpill.crit { color: #fff; background: var(--crit); }
.fllist { display: flex; flex-direction: column; margin-top: 8px; }
.flgrp { padding: 20px 0 6px; font-size: 14px; font-weight: 600; }
.flgrp2 { display: flex; flex-direction: column; padding: 20px var(--pad) 6px; }
.flgrp2 b { font-size: 16px; font-weight: 600; }
.flgrp2 span { font-size: 14px; color: var(--ink2); }
.flempty { padding: 40px var(--pad); text-align: center; color: var(--ink2); font-size: 15px; }
.flempty b { display: block; margin-bottom: 6px; font-size: 18px; color: var(--ink); }
.flcard { margin: 16px var(--pad) 0; padding: 20px; border: 1px solid var(--row-div); border-radius: 12px; text-align: center; }
.flc .flcard { margin: 16px 0 0; }
.flcard.left { text-align: left; }
.flcard b { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; }
.flcard p { margin: 8px 0 0; font-size: 15px; color: var(--ink2); line-height: 1.45; }
.flk { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.fldel { display: flex; align-items: center; width: 100%; min-height: 56px; color: var(--crit); font-size: 16px; font-weight: 500; }
.flbtns { display: flex; gap: 8px; margin-top: 24px; }
.flbtns .flpill { flex: 1; margin: 0; }
.flinfo { font-size: 15px; color: var(--ink2); line-height: 1.5; }
.flinfo p { margin: 0 0 12px; }
.flinfo b { color: var(--ink); }
.flinfo ul { margin: 0 0 12px; padding-left: 20px; }
.flkv { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 var(--pad); border-bottom: 1px solid var(--row-div); font-size: 15px; }
.flc .flkv { padding: 0; }
.flkv span { color: var(--ink2); }
.flkv b { font-weight: 500; text-align: right; }
.flcli { display: flex; align-items: center; gap: 16px; padding: 8px 0 16px; }
.flcli b { display: block; font-size: 20px; font-weight: 600; }
.flcli span:not(.avatar) { font-size: 14px; color: var(--ink2); }
.flcrea { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 16px var(--pad) 0; }
.flc .flcrea { margin: 16px 0 0; }
.flstock { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; margin-top: 12px; font-size: 16px; }
.flstock .fllink { margin: 0; }
.fllow { color: var(--crit) !important; }
.fllp { padding-bottom: 32px; }
.flsearch { margin: 8px 0 12px; }

/* Filas: chevrón, interruptor, radio y casilla */
.flrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--row); padding: 8px 0; border-bottom: 1px solid var(--row-div); text-align: left; }
.flrow .rt { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; }
.flrow .rt small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--ink2); line-height: 1.35; }
.flrow .rv { flex: none; font-size: 15px; color: var(--ink2); }
.flrow > svg.i { width: 20px; height: 20px; color: var(--gray); }
.flrow.dis { opacity: .45; pointer-events: none; }
.flrow .thumb { width: 40px; height: 40px; border-radius: 4px; flex: none; display: grid; place-items: center; font-size: 15px; font-weight: 600; background: #666; color: #fff; }
.flsw { position: relative; width: 44px; height: 26px; flex: none; border-radius: 13px; background: #c8c8c8; transition: background .15s; }
.flsw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); transition: transform .15s; }
.flsw.on { background: var(--ink); }
.flsw.on::after { transform: translateX(18px); }
.flrad { width: 22px; height: 22px; flex: none; border: 2px solid #9a9a9a; border-radius: 50%; }
.flrad.on { border: 7px solid var(--ink); }
.flchk { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 2px solid #9a9a9a; border-radius: 4px; color: #fff; }
.flchk.on { border-color: var(--ink); background: var(--ink); }
.flchk svg.i { width: 16px; height: 16px; stroke-width: 3; }

/* Mosaico del PDV (f03, f06, f07) */
.fltilebox { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0 8px; }
.fltilebox .flpill { margin: 0; width: 160px; min-height: 64px; padding: 0 16px; line-height: 1.3; }
.fltile { position: relative; width: 160px; height: 128px; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; background: var(--tabbg); }
.fltile .fltp { flex: 1; }
.fltl { position: absolute; left: 12px; right: 12px; bottom: 10px; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fltp { display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--tile-abbr); font-weight: 700; background-size: cover; background-position: center; }
.fltile .fltp:not([style*="background"]) { color: transparent; }
.fltile .fltp[style*="background"] + .fltl { color: #fff; }
.flseg { display: flex; gap: 4px; margin-top: 20px; padding: 4px; border-radius: 999px; background: var(--fill); }
.flseg button { flex: 1; min-height: 40px; border-radius: 999px; font-size: 15px; font-weight: 500; text-align: center; color: var(--ink2); }
.flseg button.on { background: var(--paper); color: var(--ink); }
.flseg.pad { margin: 8px var(--pad) 12px; }
.flcolors { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 12px; margin-top: 20px; }
.flcol { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.flcol.on { outline: 3px solid var(--ink); outline-offset: 2px; }
.flimgbtns { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.flimgbtns .flpill { width: 100%; margin: 0; cursor: pointer; }
.thumb.flimg { background-size: cover; background-position: center; }

/* Favoritos (f25–f29) */
.co-main.fl-fe .co-content { padding-top: 8px; }
.flfavh { position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 var(--pad); }
.flfavn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 18px; font-weight: 500; }
.flfavn svg.i { width: 20px; height: 20px; }
.flfavdone { position: absolute; right: var(--pad); width: auto; min-height: 44px !important; padding: 0 28px; }
.flfavpill { flex: none; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background: var(--paper); }
.app.phone .fltiles { grid-template-columns: repeat(2, 1fr); gap: 24px 24px; padding: 8px 24px 16px; }
.fltile0 { display: block; aspect-ratio: 1 / .62; border-radius: 4px; background: #f2f3f4; }
.fltiles .tile { aspect-ratio: auto; }
.fltile0.add { display: grid; place-items: center; color: var(--ink); }
.fltile0.add svg.i { width: 28px; height: 28px; stroke-width: 1.6; }
.fltile0.drop { outline: 2px dashed var(--ink); outline-offset: -2px; }
.fltile2 { position: relative; overflow: visible; }
/* Square: mosaico blanco con sombra, franja gris con la abreviatura en blanco y el nombre debajo. */
.fltile2 { background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, .22); border-radius: 2px; }
.fltile2 .fltp { aspect-ratio: 1 / .38; border-radius: 2px 2px 0 0; color: #fff; }
.fltile2 .fltp:not([style*="background:#"]) { background: #9aa0a6; }
.fltile2 .fltp[style*="background:#"] { color: #fff; }
.fltile2.picked { background: var(--press) !important; }
.flfx { position: absolute; top: -10px; left: -10px; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 1px solid var(--row-div); color: var(--ink); }
.flfx svg.i { width: 14px; height: 14px; stroke-width: 2.6; }

/* Personalizar el menú principal (f37) */
.flnav { display: flex; align-items: center; gap: 20px; width: 100%; min-height: 56px; border-bottom: 1px solid var(--row-div); font-size: 16px; font-weight: 500; text-align: left; }
.flnav .rt { flex: 1; }
.flnav.lock { color: #9a9a9a; }
.flnav.lock > svg.i:last-child { color: var(--ink); }
.flmin, .flplus { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ink); flex: none; }
.flplus { background: #d9d9d9; }
.flmin svg.i, .flplus svg.i { width: 16px; height: 16px; stroke-width: 2.6; }
.flnav.full { cursor: default; }
.flnav.full .flplus { opacity: .5; }

/* Agregar a favoritos (f27): barra simple, buscador plano, botones grises de crear */
.flb.pl { min-height: 56px; border-bottom: 1px solid var(--line, #e3e3e3); }
.flb.pl .cir { background: none; }
.flb.pl h1 { font-size: 18px; font-weight: 500; }
.flb .sp.pl { width: 48px; }
.flw:has(.flb.pl) .flc { padding: 0; }
.flfavadd { padding-bottom: 24px; }
.flsrch { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 var(--pad); background: var(--paper); border-bottom: 1px solid var(--line, #e3e3e3); }
.flsrch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; }
.flfavadd .list { margin-top: 0 !important; }
.flfavadd .list + .list { border-top: 1px solid var(--line, #e3e3e3); }
.flcbtns { display: flex; flex-direction: column; gap: 12px; padding: 16px var(--pad) 0; margin-top: 40px; background: var(--paper); border-top: 1px solid var(--line, #e3e3e3); }
.flcbtn { min-height: 48px; border-radius: 6px; background: var(--tabbg); font-size: 15px; font-weight: 500; }
.tab-ov .flw:has(.flb.pl) .flc { max-width: none; }

/* Descripción con formato (f03) */
.flf.rte { display: block; padding: 0; overflow: hidden; }
.rtein { min-height: 112px; padding: 16px; font-size: 16px; line-height: 1.45; outline: 0; overflow-wrap: anywhere; }
.rtein:empty::before { content: attr(data-ph); color: #8f8f8f; }
.rtein ul, .rtein ol { margin: 4px 0; padding-left: 24px; }
.rtein a { color: inherit; text-decoration: underline; }
.rtebar { display: flex; gap: 2px; padding: 4px 8px; background: var(--tabbg); overflow-x: auto; }
.rteb { flex: none; width: 40px; height: 40px; border-radius: 4px; color: #6f6f6f; font-size: 18px; font-family: Georgia, serif; }
.rteb:hover { background: #e6e6e6; }
.rteb.r-B { font-weight: 700; } .rteb.r-I { font-style: italic; } .rteb.r-U { text-decoration: underline; }
.rteb.r-T { text-decoration: line-through; }
.rteb .i { width: 22px; height: 22px; }
.flf.rte:focus-within { border-color: var(--ink); }

/* Filas de Más con subtítulo (f33–f35) */
.crow .rt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.crow .rt small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* f29: botón al pie y campo sin rótulo */
.flfoot { flex: none; padding: 12px var(--pad) calc(16px + env(safe-area-inset-bottom)); }
.flfoot .cb { width: 100%; min-height: 52px; border-radius: 6px; }
.flf.nolab .flfl { display: none; }
.flf.nolab + .flhelp { text-align: center; }
.flw:has(.flfoot) .flc { padding-left: var(--pad); padding-right: var(--pad); }

/* f30: prefijo de país en el teléfono */
.flpre { flex: none; padding-right: 12px; margin-right: 4px; border-right: 1px solid #e0e0e0; font-size: 16px; color: var(--ink); }

/* f32: En línea a pantalla completa */
.flpromo { padding: 8px var(--pad) 40px; }
.flpromo h2 { margin: 8px 0 12px; font-size: 22px; font-weight: 600; line-height: 1.3; }
.flpromo > p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.flphone { margin: 32px auto 0; width: min(76%, 300px); padding: 20px 16px 24px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 28px 28px 0 0; }
.flphone > b { display: block; font-size: 20px; font-weight: 600; }
.flk2 { display: block; margin: 16px 0 8px; font-size: 15px; font-weight: 600; }
.flpg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flpg > div { display: flex; flex-direction: column; min-width: 0; }
.flpg .tile0 { display: flex; aspect-ratio: 1; border-radius: 6px; overflow: hidden; }
.flpg .tile0 .fltp { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; color: #fff; background: #9da3a8; }
.flpg b { margin-top: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flpg small { font-size: 11px; color: var(--ink2); }

/* f33: Para tu negocio */
.flph2 { padding: 20px var(--pad) 4px; font-size: 22px; font-weight: 600; }
.flsech { margin: 0; padding: 14px var(--pad) 4px; font-size: 17px; font-weight: 600; }
.flirows { display: flex; flex-direction: column; padding: 0 var(--pad); }
.flirow { display: flex; align-items: center; gap: 14px; min-height: 80px; border-bottom: 1px solid var(--row-div); text-align: left; }
.flirow:last-child { border-bottom: 0; }
.flirow .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; font-weight: 600; }
.flirow .rt small { margin-top: 2px; font-size: 13.5px; font-weight: 400; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flirow .rv { font-size: 14px; color: var(--ink2); }
.flirow > svg:last-child { flex: none; color: #6f6f6f; }
.fli { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 8px; background: var(--tabbg); }
.fli svg { width: 28px; height: 28px; }
.fli.lg { width: 96px; height: 96px; border-radius: 48px; }
.fli.lg svg { width: 48px; height: 48px; }

/* f34: Recompensas & Recomendaciones */
.flrefh { display: flex; flex-direction: column; align-items: center; padding: 16px var(--pad) 24px; text-align: center; }
.flrefh b { margin-top: 16px; font-size: 17px; font-weight: 600; }
.flrefh p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; text-align: left; }

/* f35 / f36 */
.clist.flplain { padding: 4px var(--pad) 0; }
.clist.flplain .crow { min-height: 52px; padding: 0; border-bottom: 1px solid var(--row-div); }
.clist.flplain .crow .rt { color: var(--ink); }
.flband { padding: 16px var(--pad) 14px; background: var(--tabbg); border-bottom: 1px solid #ddd; font-size: 15px; color: var(--ink); }
.clist.flind { padding-top: 12px; }
.clist.flind .crow { min-height: 44px; padding: 0 var(--pad) 0 calc(var(--pad) + 12px); }
.clist.flind .crow .rt { color: var(--ink); }
.flf.pre .flfl { left: 112px; }
.flb .flcfg { flex: none; width: auto; min-height: 44px; padding: 0 20px; font-size: 15px; }
.flirow .rt { font-weight: 500; }
.flirow .t1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flb.pl h1 { font-size: 17px; }
.clist.flplain .crow > svg { color: #6f6f6f; }

/* v9 (REA, Pixel 420 dpi): ajustes medidos contra Square f29 y f37. */
@media (hover: none), (pointer: coarse) { * { scrollbar-width: none; } ::-webkit-scrollbar { display: none; } }
.flw:has(.flnav) .flt { margin-top: 10px; font-size: 25px; }
.flw:has(.flnav) .flp { color: var(--ink); line-height: 1.53; }
.flw:has(.flnav) .flgrp { padding-bottom: 0; }
.flw:has(.flnav) .flp + .flgrp { margin-top: 17px; }
.flw:has(.flf.nolab) .flfoot .cb { border-radius: 0; }
.flf.nolab { margin-left: var(--pad); margin-right: var(--pad); border-color: #c8c8c8; border-bottom: 2px solid var(--ink); border-radius: 0; background: var(--paper); }
.flnav.full .flplus { opacity: 1; }
/* v9f: casilla-atajo «Artículos» en favoritos (f28). */
.fltile2 .fltp.lib, .fltiles.edit .fltile2 .fltp.lib { background: #666; color: #fff; display: flex; align-items: center; justify-content: center; }
.fltile2 .fltp.lib .i { width: 42%; height: auto; max-height: 70%; stroke-width: 1.4; }
/* v9f: «Agregar a favoritos» (f27) — botones centrados y hoja blanca como Square. */
.flfavadd { background: var(--paper); min-height: 100%; }
.flcbtn { display: flex; align-items: center; justify-content: center; text-align: center; }

/* v11 · f31–f33 alineadas con la medición REA de Square (px CSS sobre 411×810) */
.flb.flbc { min-height: 0; margin: 0 -24px; padding-top: 16px; align-items: center; }
.flb.flbc .cir, .flb.flbc .cb.flcfg { min-height: 48px; height: 48px; }
.flb.flbc .cb.flcfg { margin-right: 8px; }
.flb.flbc .cir { width: 48px; }
/* Como en Square, la barra de la promo se desplaza con el contenido. */
.flpc { padding: 0 24px 40px; }
.flpc h2 { margin: 26px -20px 0 0; font-size: 25px; line-height: 32px; font-weight: 700; letter-spacing: -0.2px; }
.flpc > p { margin: 16px 0 0; font-size: 16px; line-height: 24px; letter-spacing: -0.15px; }
.flpc .flphone { margin: 46px 0 0 30px; width: 306px; padding: 41px 19px 0; border-radius: 40px 40px 0 0; }
.fllogo { display: flex; align-items: center; justify-content: center; width: 38px; height: 44px; border-radius: 10px; background: #f5893c; color: var(--ink); font-size: 17px; font-weight: 600; }
.flphone > b { margin-top: 6px; font-size: 26px; line-height: 32px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flhdl, .fldir { display: block; font-size: 11.5px; line-height: 18px; color: var(--ink2); }
.flhdl { margin-top: 2px; color: var(--ink); }
.flret { display: block; margin-top: 33px; font-size: 13.5px; line-height: 20px; font-weight: 600; }
.flphone .flk2 { display: flex; align-items: baseline; justify-content: space-between; margin: 29px 0 11px; font-size: 21px; line-height: 26px; font-weight: 700; }
.flk2 small { display: flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 400; color: var(--ink2); }
.flk2 small svg { width: 14px; height: 14px; }
.flphone .flpg { gap: 18px 8px; }
.flphone .flpg .tile0 { position: relative; border-radius: 8px; }
.flplus { position: absolute; top: 7px; right: 7px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); color: var(--ink); }
.flplus svg { width: 16px; height: 16px; }
.flphone .flpg b { margin-top: 5px; font-size: 12px; line-height: 15px; }
.flphone .flpg small { font-size: 12px; line-height: 17px; color: var(--ink); }
.flphone .flpg small + small { font-size: 11px; line-height: 16px; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.flinv { margin: 24px 32px 0; padding: 28px 32px 30px; border: 1px solid var(--div); border-radius: 12px; }
.flinvk { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 600; }
.flinvk svg { width: 16px; height: 16px; }
.flinv h2 { margin: 11px 0 0; font-size: 27px; line-height: 32px; font-weight: 700; }
.flinv .cb { width: 100%; min-height: 49px; margin-top: 13px; font-size: 16px; }
.flinv p { margin: 17px 0 0; font-size: 14px; line-height: 22px; color: var(--ink2); }
.flinv p.flinv2 { margin-top: 48px; color: var(--ink); }
.fllnk { display: block; padding: 0; font-size: 14px; line-height: 22px; font-weight: 600; text-align: left; }

.flph2 { padding-top: 24px; font-size: 25px; }
.flsech { padding-top: 6px; font-size: 18.5px; }
.flirow { gap: 12px; min-height: 97px; }
.fli { width: 64px; height: 64px; border-radius: 10px; }
.flirow .rt { font-size: 16.5px; }
.flirow .rt small { font-size: 14.5px; }
.flsel { float: right; display: flex; align-items: center; gap: 5px; height: 24px; margin-top: 31px; padding: 0 7px; border-radius: 12px; background: #ececec; }
.flsel svg { width: 13px; height: 13px; }
.flsel i { width: 1px; height: 12px; background: #c8c8c8; }
/* Página «Artículos» del teléfono (s20) */
.allh { position: relative; flex: none; display: flex; align-items: center; justify-content: center; height: 64px; }
.allh .ib { position: absolute; left: 8px; top: 8px; }
.allh h2 { margin: 0; font-size: 19px; font-weight: 500; }
.cb.pill small { display: block; font-size: inherit; font-weight: inherit; }
/* Editor de mosaico (f07): la etiqueta se ve en la vista previa; Imagen en filas con ícono. */
.fltile .fltp.lbl:not([style*="background"]) { display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 12px 34px; color: var(--ink); font-size: 30px; font-weight: 700; }
.flimgrows { margin-top: 12px; }
.flimgrows .row { display: flex; align-items: center; gap: 16px; min-height: 56px; cursor: pointer; }
.flimgrows .lead { display: grid; place-items: center; width: 24px; }
.flimgrows .row[disabled] { color: var(--ink3, #9a9a9a); }
/* v13 · cotejo con Square (s06/s10/s20): aviso compacto encima del botón, «Cerrar sesión» gris, «Crear artículo nuevo» centrado */
.app.phone .copromo { bottom: 104px; padding: 16px 16px 16px; }
.app.phone .copromo b { display: block; padding-right: 64px; font-size: 18px; line-height: 26px; }
.app.phone .copromo span { margin-top: 0; color: #9b9b9b; font-size: 15px; }
.app.phone .copromo .cb { height: 48px; min-height: 48px; margin-top: 12px; }
.app.phone .cb.sec.pill.mout { height: 48px; min-height: 48px; background: var(--fill); color: var(--ink); font-weight: 500; }
.app.phone .libroot .newitem { width: 100%; padding: 33px var(--pad) 20px; text-align: center; font-weight: 500; text-decoration: none; }
.app.phone .fltiles:not(.edit) { padding-top: 19px; }
/* v14 · cotejo con Square (s21/s23): velo al 70 %, manija dentro de la hoja, «Agregar descuento» en 500 y Cobrar apagado con tinta negra */
.app.phone .backdrop.sq { background: rgba(0, 0, 0, .7); }
.sheet.sq > .grab { top: 9px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #d5d7d9; }
.cart.std .adisc { padding-top: 9px; font-weight: 500; }
.cart.std .cb.sqp[disabled] { background: #f2f4f5; color: var(--ink); opacity: 1; }
/* v14 · f06: hoja «Editar mosaico» de categoría (sin barra; manija y título grande) */
.fl-sh .grab { display: block; flex: none; width: 36px; height: 4px; margin: 9px auto 0; border-radius: 2px; background: #d5d7d9; }
.flw.flsh:has(> .grab) .flt { margin: 18px 0 16px; }
.flw.flsh:has(> .grab) .flimgrows .row[disabled] { color: #9b9b9b; }
.fl-sbg:has(+ .fl-sh .grab) { background: rgba(0, 0, 0, .8); }
/* v14 · f05: categoría nueva = mosaico oscuro con capas, abreviatura y nombre (como Square) */
.fltile.flcat { background: #121212; }
.fltile.flcat > .i { position: absolute; left: 12px; top: 12px; width: 18px; height: 18px; color: #fff; stroke-width: 1.8; }
.fltile.flcat .fltp:not([style*="background"]):not(.img) { display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 12px 34px; color: #fff; font-size: 30px; font-weight: 700; }
.fltile.flcat .fltl { color: #fff; }

/* Concentrador de hardware (Square s30, e002–e004) */
.flb h1 small { display: block; font-size: 13px; font-weight: 400; color: var(--ink2); }
.hubh { margin: 20px var(--pad) 8px; font-size: 14px; font-weight: 500; color: var(--ink2); }
.hubc, .hubrow { display: flex; align-items: center; gap: 14px; width: calc(100% - 2 * var(--pad)); margin: 0 var(--pad); padding: 14px 16px; border: 1px solid var(--row-div); border-radius: 10px; background: var(--paper); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.hubc .rt, .hubrow .rt, .hubbh .rt { flex: 1; min-width: 0; font-size: 17px; font-weight: 500; }
.hubc small, .hubrow small, .hubbh small { display: block; font-size: 14px; font-weight: 400; color: var(--ink2); }
.hubc small.bad { color: var(--crit); }
.hubi { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--fill); }
.hubi svg { width: 22px; height: 22px; }
.hubnew { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 2 * var(--pad)); margin: 20px var(--pad) 24px; }
.hubbox { margin: 12px var(--pad) 0; padding: 16px; border: 1px solid var(--row-div); border-radius: 10px; }
.hubbh { display: flex; align-items: center; gap: 14px; }
.hubbox .pill { width: 100%; margin-top: 14px; }
.hubbd { flex: none; padding: 4px 10px; border-radius: 6px; background: #E5F7EA; color: #00782A; font-size: 13px; font-weight: 500; }
.hubbd.bad { background: #FDE8EC; color: var(--crit); }
.hubkv { display: flex; justify-content: space-between; gap: 12px; padding: 12px var(--pad); font-size: 15px; }
.hubbox .hubkv { padding: 10px 0 0; }
.hubkv span { color: var(--ink2); }
.hubkv b { font-weight: 500; text-align: right; word-break: break-all; }
.hubkv b small { margin-left: 4px; color: var(--ink2); font-weight: 400; }
.hubt { margin: 16px var(--pad) 4px; font-size: 19px; font-weight: 600; }
.hubsep { height: 8px; margin: 16px 0; background: var(--fill); }
.hubmore { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px; font-size: 14px; }
.hubmore svg { width: 16px; height: 16px; }
.me { padding: 0; border: 0; background: none; cursor: pointer; }
.cb.pill.sec { background: var(--fill); color: var(--ink); }
.hubnew, .hubmore { flex-direction: row; }
.hubnew svg { width: 20px; height: 20px; }
/* Ajustes medidos contra s30/e002–e004 */
.flb h1 .hubtt { font-size: 17px; font-weight: 500; }
.flb h1 small { white-space: normal; }
.hubh { margin: 16px 8px 6px; }
.hubc, .hubnew { width: calc(100% - 16px); margin-left: 8px; margin-right: 8px; }
.hubc .rt { font-weight: 400; }
.hubbox { margin: 12px 8px 0; }
.hubbh .rt { font-weight: 600; }
.hubbd { padding: 5px 12px; border-radius: 999px; }
.hubbox .pill { min-height: 44px; font-size: 15px; }
.hubbox .hubkv { padding: 16px 0; border-bottom: 1px solid var(--row-div); font-size: 16px; }
.hubbox .hubkv:last-child { border-bottom: 0; padding-bottom: 4px; }
.hubbox .hubkv span, .hubtab .hubkv span { color: var(--ink); font-weight: 500; }
.hubbox .hubkv b { font-weight: 400; }
.hubtab .hubt { margin: 20px var(--pad) 8px; }
.hubtab .hubkv { display: grid; grid-template-columns: 150px 1fr; gap: 8px; margin: 0 var(--pad); padding: 16px 0; border-bottom: 1px solid var(--row-div); font-size: 16px; }
.hubtab .hubkv b { text-align: left; font-weight: 400; }
.hubtab .hubkv b small { display: block; margin: 4px 0 0; font-size: 14px; }
.hubtab .hubsep { margin: 24px var(--pad); height: 8px; }
.hubrow { width: calc(100% - 2 * var(--pad)); padding: 12px 0 16px; border: 0; border-bottom: 1px solid var(--row-div); border-radius: 0; }
.hubrow .hubi { background: none; }
.hubrow .rt { font-weight: 400; }
/* Corrimientos medidos con REA (v15): s30 +14, e002 −35, e003/e004 +28 */
.hubw .flc > .hubh:first-child { margin-top: 30px; }
.hubwred .flb { min-height: 56px; }
.hubwred .flc > .hubbox:first-child { margin-top: 4px; }
.hubwbig .flt { padding-top: 28px; }
.hubwred .hubbox .hubkv { padding: 21px 0; }
.hubwred .hubbh .rt { font-size: 19px; }
.hubwred .flc > .hubbox, .hubwred .flc > .hubnew { margin-left: -8px; margin-right: -8px; }
.hubwred .flc > .hubnew { width: calc(100% + 16px); }
.hubwred .flc > .hubbox:first-child { margin-top: -6px; }
.hubwred .hubbh + .hubkv { margin-top: 14px; }
.hubwred .hubbox:nth-child(2) .hubbh { padding: 1px 0; }
/* Guía (e005): título en una línea y tareas hechas en gris, como en Square */
.gh h1 { font-size: 24px; font-weight: 600; }
.gi.done .rt b { color: var(--gray); font-weight: 400; }
.gi.done .gic { color: var(--ink); }
/* Obtener ayuda (e006): encabezado gris, buscador con hairline y temas populares */
.helpw .flb { background: var(--tabbg); border-bottom: 1px solid var(--div); }
.helpw .flc { padding-top: 0; }
.helpw .hlsrch { margin: 0 calc(-1 * var(--pad)); border-bottom-color: var(--div); color: var(--gray); }
.helpw .hlsrch input::placeholder { color: var(--gray); font-size: 17px; }
.helpw .hlk { margin: 26px 0 6px; color: var(--ink); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
.gh { padding-top: 24px; }
.gh + .gsec { padding-top: 28px; }
.gi.done { padding-top: 15px; padding-bottom: 15px; }
.gi .rt small { font-size: 15px; line-height: 22px; margin-top: 4px; }
.gsec + .gi { padding-top: 24px; }
.gsec.adv { padding-top: 46px; }
.gi:has(+ .gsec.adv) { border-bottom: 0; }
/* Temas de ayuda (e008–e015): encabezado gris bajo, título fino a la izquierda y filas de una línea */
.helpw .flb { min-height: 48px; gap: 10px; }
.helpw .flb .cir { background: none; }
.helpw .flb h1 { text-align: left; font-size: 17px; font-weight: 400; }
.helpw .hlart { padding-top: 17px; }
.helpw .hlart .crow { min-height: 49px; padding: 0; border-top: 1px solid var(--row-div); }
.helpw .hlart .crow:last-child { border-bottom: 1px solid var(--row-div); }
.helpw .hlart .crow .rt { font-weight: 500; color: #3d454c; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.helpw .flb { padding-left: 4px; gap: 2px; }
.helpw .hlart { margin: 0 calc(-1 * var(--pad)); }
.helpw .hlart .crow .rt { flex: 1; min-width: 0; display: block; }
.helpw .hlart .crow > svg { color: #909aa1; }

/* Asociar cuenta bancaria: aviso centrado y Verificar tu identidad */
.ov-bg.center .ov.alrt { max-width: 380px; border-radius: 16px; padding: 34px 33px 30px; background: var(--paper); box-shadow: none; }
.ov.alrt h1 { max-width: 250px; margin: 0 0 14px; font-size: 23px; font-weight: 600; line-height: 33px; color: #121212; }
.ov.alrt p { margin: 0 0 30px; font-size: 16px; line-height: 25px; color: #121212; }
.ov.alrt .cb, .idvw .idbtn .cb { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; min-height: 0; border-radius: 24px; font-size: 16px; font-weight: 600; border: 0; }
.ov.alrt .cb.pri, .idvw .idbtn .cb.pri { background: #121212; color: #fff; }
.ov.alrt .cb.sec, .idvw .idbtn .cb.sec { margin-top: 14px; background: var(--fill); color: #121212; }
.idvw .flb { display: none; }
.idvw .flc { display: flex; flex-direction: column; padding-top: 0; padding-bottom: 16px; }
.idvw .idt { margin: -9px 0 17px; font-size: 44px; font-weight: 600; line-height: 56px; color: #121212; }
.idvw .idp { margin: 0 0 15px; font-size: 16px; line-height: 24px; color: #121212; }
.idvw .idimg { height: 143px; border-radius: 8px; background: linear-gradient(#382919, #5a4b3f 25%, #6d5647 50%, #5e4f42 75%, #6b6355); }
.idvw .idbtn { margin-top: auto; }
.ov-bg.center.alrtbg { background: rgba(0, 0, 0, .8); padding: 24px 16px 54px; }
.idvw .idbtn .cb.sec { margin-top: 8px; }
/* Todos los artículos (e025) y Modificar artículo (e027) */
.fllp .list .row.thumbed { min-height: 72px; padding: 0 24px; gap: 13px; }
.fllp .list .row.thumbed .thumb { width: 40px; height: 40px; margin-left: 0; border-radius: 4px; background: var(--fill); color: #6b6b6b; font-size: 16px; font-weight: 500; }
.fllp .list .row.thumbed::after { left: 24px; right: 24px; background: var(--fill); }
.fllp .list .row.thumbed .rt, .fllp .list .row.thumbed .rv { font-size: 16px; font-weight: 500; color: #121212; }
.cbar .cir.pri { background: #121212; color: #fff; }
.fltile.ed .fltp:not([style*="background"]) { color: #121212; align-items: flex-end; justify-content: flex-start; padding: 0 12px 36px; font-size: 32px; font-weight: 600; }
/* Pedidos › filtro por tipo (e022) y Acciones activas (e023) */
.ov-bg.bsheet .ov.ofs, .ov-bg.bsheet .ov.oas { max-height: none; overflow: hidden; padding: 16px 0 0; border-radius: 16px 16px 0 0; }
.ov-bg.bsheet .ov.ofs { height: calc(100% - 282px); }
.ov-bg.bsheet .ov.oas { height: calc(100% - 10px); }
.ov.ofs > .grab, .ov.oas > .grab { top: -14px; }
.ov.ofs .ofx, .ov.oas .ofx { margin: 0 0 0 16px; flex: none; border: 0; color: #121212; }
.ov.ofs h1, .ov.oas h1 { margin: 24px 16px 0; font-size: 24px; font-weight: 600; line-height: 32px; color: #121212; }
.ofl { padding: 0 8px; }
.ofr { display: flex; align-items: center; gap: 16px; width: 100%; height: 56px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: #121212; font: inherit; font-size: 16px; font-weight: 500; text-align: left; }
.ofr.on { background: #f7f7f7; }
.ofr svg.i { width: 24px; height: 24px; stroke-width: 1.7; }
.oal { margin-top: 24px; }
.oar { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px; padding: 0 16px; border: 0; background: none; color: #121212; font: inherit; font-size: 16px; font-weight: 500; text-align: left; }
.oar::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: var(--fill); }
.oar svg.i { width: 24px; height: 24px; margin-right: -4px; color: #8a8a8a; stroke-width: 2; }
/* v20 · s31: formulario de cliente como Square — título en la barra al bajar, campos de selección, bandera y hojas */
.flb h1 .bigt { opacity: 0; transition: opacity .15s; }
.flw.scl > .flb h1 .bigt { opacity: 1; }
.flimp { display: flex; width: 100%; justify-content: center; margin-top: 4px; }
.flf.pk { width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.flf.pk .flv { flex: 1; min-width: 0; padding-top: 18px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flf.pk .flv.ph { padding-top: 0; color: #6f6f6f; }
.flcc { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 44px; margin-right: 8px; color: var(--ink2); }
.flcc svg.i { width: 18px; height: 18px; }
.flag { display: inline-grid; place-items: center; width: 26px; height: 18px; border-radius: 2px; font-size: 10px; font-weight: 600; color: var(--ink); background: #e6e6e6; }
.flag.f-CR { background: linear-gradient(#002b7f 0 16.6%, #fff 0 33.3%, #ce1126 0 66.6%, #fff 0 83.3%, #002b7f 0); }
.flag.f-US { background: linear-gradient(90deg, #3c3b6e 0 42%, transparent 0) 0 0 / 100% 54% no-repeat, repeating-linear-gradient(#b22234 0 7.7%, #fff 0 15.4%); }
.flf.pre .flfl { left: 104px; }
.flhr { display: flex; align-items: center; justify-content: space-between; }
.flhr .fllink { margin-top: 0; }
.pkw .flt { margin: 14px 0 0; font-size: 25px; font-weight: 700; }
.pkw .flsearch { margin: 18px 0 0; }
.pkl { display: flex; flex-direction: column; margin-top: 2px; }
.pkr { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--row-div); font-size: 16px; text-align: left; color: var(--ink); }
.pkr:last-child { border-bottom: 0; }
.fl-sh:has(> .pkw), .fl-sh:has(> .grpw) { overflow: visible; }
.fl-sh:has(> .pkfull) { top: 10px; max-height: none; }
.fl-sh:has(> .pkw) .grab, .fl-sh:has(> .grpw) .grab { position: absolute; top: -15px; left: 50%; margin: 0 0 0 -18px; background: #8f8f8f; }
.pkfull, .pkfull .flc { min-height: 0; }
.fl-sh > .pkfull { flex: 1; display: flex; flex-direction: column; }
.grpw .flc { padding-top: 32px; }
.grph { display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.grph h2 { flex: 1; margin: 0; font-size: 22px; font-weight: 600; }
.grph .flpill { margin-top: 0; }

/* ---------- Ajustes, Plus y Complementos (e038–e053) ---------- */
.ajpg .pg-h { padding-top: 14px; padding-bottom: 10px; }
.ajpg .txsearch { margin: 4px 16px 0; }
.ajcph { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; margin-top: 24px; }
.ajcph h2 { margin: 0; font-size: 24px; font-weight: 700; }
.ajcpl { padding: 8px 16px 32px; }
.ajcpr { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 12px; text-align: left; font-size: 16px; }
.ajcpr svg.i { width: 24px; height: 24px; }
.fbar { position: relative; flex: none; display: flex; align-items: center; height: 56px; padding: 0 8px; border-bottom: 1px solid #e4e4e4; }
.fbar .fbk { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); }
.fbar h1 { position: absolute; left: 60px; right: 60px; margin: 0; text-align: center; font-size: 18px; font-weight: 400; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ajr { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 16px; border-bottom: 1px solid #e4e4e4; text-align: left; font-size: 16px; color: #333; }
.ajr .rt { flex: 1; min-width: 0; }
.ajr b { font-weight: 600; color: var(--ink); }
.ajseg .ajr { width: calc(100% - 64px); margin: 0 32px; padding: 0; color: #333; font-weight: 500; }
.ajseg .ajhelp:first-of-type { max-width: 272px; margin: 16px auto 55px; }
.ajseg { padding-top: 32px; }
.ajseg > .ajr:first-child, .ajseg > .ajhelp + .ajr { border-top: 1px solid #e4e4e4; }
.ajhelp { margin: 16px 30px 24px; text-align: center; font-size: 13px; line-height: 16.8px; color: #9a9a9a; }
.ajlnk { display: inline; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; }
.ajsh { margin: 0 32px; padding: 50px 0 14px; font-size: 16px; color: #333; border-bottom: 1px solid #e4e4e4; }
.ajck { width: 24px; height: 24px; flex: none; margin-right: 0; border: 2px solid #9a9a9a; border-radius: 50%; display: grid; place-items: center; }
.ajck.on { border: 0; background: var(--ink); color: #fff; }
.ajck svg.i { width: 16px; height: 16px; stroke-width: 3; }
.ajr.ajto { margin-top: 16px; border-top: 1px solid #e4e4e4; }
.ajtow .flb { min-height: 56px; padding: 0 0 0 4px; gap: 0; border-bottom: 1px solid #e4e4e4; }
.ajtow .flb .cir { background: none; width: 46px; }
.ajtow .flb h1 { text-align: left; font-size: 18px; padding-left: 6px; }
.ajtow .flb .flsave { align-self: stretch; height: auto; min-height: 0; width: 103px; border-radius: 0; background: var(--ink); color: #fff; font-size: 16px; }
.ajtow .flc { padding: 0; }
.ajtow .ajr { min-height: 56px; }
.ajtow .flrad { width: 24px; height: 24px; margin-right: 0; }
.ajnote { margin: 18px 16px; font-size: 13.5px; line-height: 16px; color: var(--gray); }
.ajc, .ajtr { padding: 0 24px; }
.ajh { margin: 30px 0 14px; font-size: 21px; font-weight: 700; }
.ajkv { display: flex; justify-content: space-between; gap: 12px; height: 56px; align-items: center; border-bottom: 1px solid #e4e4e4; font-size: 16px; }
.ajkv span:last-child { color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ajcl .crow, .ajone .crow { padding: 0; min-height: 56px; border-bottom: 1px solid #e4e4e4; }
.ajone { padding: 8px 16px; }
.ajneg { padding: 20px 32px 40px; }
.ajneg .ajk:first-child { margin: 3px 0 11px; }
.ajk { margin: 8px 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #333; }
.ajin { display: block; width: 100%; height: 48px; padding: 14px 0 6px; border: 0; border-bottom: 1px solid #d0d0d0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.ajlogo { display: flex; align-items: center; gap: 16px; margin-top: 18px; font-size: 16px; font-weight: 500; color: #333; }
.ajlogo span { width: 44px; height: 44px; border: 1px solid #ddd; }
.ajsm { margin: 16px 0; font-size: 13px; line-height: 20px; color: var(--gray); }
.ajmob { display: flex; align-items: center; width: 100%; min-height: 56px; margin: 8px 0 12px; font-size: 16px; text-align: left; }
.ajmob .rt { flex: 1; }
.ajmsw { position: relative; width: 54px; height: 20px; flex: none; }
.ajmsw::before { content: ""; position: absolute; left: 4px; right: 0; top: 9px; height: 2px; background: #9a9a9a; }
.ajmsw::after { content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #9a9a9a; border-radius: 50%; background: var(--paper); transition: transform .15s; }
.ajmsw.on::before { background: var(--ink); }
.ajmsw.on::after { border-color: var(--ink); background: var(--ink); transform: translateX(34px); }
.ajaddr { margin: 18px 0 24px; font-size: 16px; line-height: 21px; }
.ajed { width: 100%; height: 48px; border: 1px solid #ccc; border-radius: 2px; background: #f2f3f5; font-size: 17px; font-weight: 500; text-align: center; }
.ajempty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 210px 40px 0; }
.ajempty > svg.i { width: 70px; height: 62px; stroke-width: 1.2; }
.ajempty p { margin: 30px 0 32px; font-size: 17px; line-height: 24px; color: #333; }
.ajempty .cb.pill, .ajtr .cb.pill, .ajtxt .cb.pill, .cpdw .cb.pill { height: 48px; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--fill); color: var(--ink); font-size: 16px; font-weight: 500; }
.ajit { display: flex; align-items: flex-start; gap: 13px; margin-top: 30px; }
.ajit .cpi { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--fill); display: grid; place-items: center; }
.ajit .rt b, .ajauto .rt b { display: block; font-size: 16px; font-weight: 600; }
.ajit .rt small, .ajauto .rt small { display: block; margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--gray); }
.ajtr .cb.pill { width: 100%; margin-top: 22px; }
.ajtr .ajh:first-child { margin-top: 48px; }
.ajbar { height: 7px; margin: 32px -24px 0; border: 0; background: var(--fill); }
.ajauto { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid #e4e4e4; }
.ajauto .rt { flex: 1; }
.ajdot { width: 24px; height: 24px; flex: none; border: 7px solid var(--ink); border-radius: 50%; }
.ajtxt { padding: 20px 16px; }
.ajtxt > p { margin: 0 0 24px; font-size: 17.5px; line-height: 24px; color: #333; }
.ajtxt .cb.pill.ajbig { width: 100%; height: 64px; min-height: 64px; }
.ajq { width: 48px; height: 48px; display: grid; place-items: center; color: var(--ink); }
.ajbt { margin: 4px 0 18px; font-size: 27px; font-weight: 700; line-height: 1.2; }
.ajg { font-size: 16px !important; line-height: 24px !important; color: var(--gray) !important; }
.ajsoli { padding: 54px 30px 0; }
.ajsoli svg { width: 80px; height: 70px; }
.ajsoli p { margin: 22px 0 0; font-size: 16px; line-height: 22px; }
.ajinfo { display: flex; gap: 14px; margin: 16px; padding: 18px 16px; border-radius: 8px; background: var(--fill); font-size: 16px; line-height: 24px; }
.ajinfo svg.i { width: 22px; height: 22px; flex: none; }
.ajinfo button { display: block; margin-top: 12px; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; }
/* Plus */
.plusc { margin: 24px 32px; padding: 30px 32px 32px; border: 1px solid #d8d8d8; border-radius: 9px; }
.plusk { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.plusk svg.i { width: 20px; height: 20px; color: #0b5ed7; }
.plusc .plusk { font-size: 14px; }
.plusc h2 { max-width: 215px; margin: 8px 0 18px; font-size: 24.5px; font-weight: 600; line-height: 32px; }
.app.phone .plusc .cb.pill, .app.phone .plusf .cb.pill { width: 100%; height: 48px; min-height: 48px; border-radius: 999px; font-size: 16px; font-weight: 500; }
.plusc p { margin: 22px 0 0; font-size: 14px; line-height: 22px; color: #666; }
.plusc p.plus2 { margin-top: 48px; color: var(--ink); }
.pluslnk { margin-top: 0; padding: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.plusw .flb { min-height: 80px; }
.plusw .flb h1 { visibility: hidden; }
.plusw .flc { display: flex; flex-direction: column; padding: 0 24px; }
.plusw .plusk { font-size: 14px; }
.plusw .plusk { margin-top: 8px; }
.plust { margin: 12px 0 0; font-size: 24px; font-weight: 700; line-height: 30px; }
.plusf { margin-top: auto; }
.plusf p { margin: 17px 0 -14px; font-size: 14px; line-height: 22px; color: #555; }
/* Complementos */
.complw .flb h1 { font-size: 18px; }
.complw .flc { padding: 0 16px; }
.cprow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 97.5px; padding: 16px 0; border-bottom: 1px solid #e4e4e4; text-align: left; }
.cpi { width: 64px; height: 64px; flex: none; border-radius: 10px; background: var(--fill); display: grid; place-items: center; color: var(--ink); }
.cpi svg.i { width: 28px; height: 28px; }
.cprow .rt { flex: 1; min-width: 0; }
.cprow b { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cprow small { display: block; margin-top: 6px; font-size: 15px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cprow em { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-style: normal; font-size: 14px; font-weight: 600; color: #1a7f37; }
.cprow em svg.i { width: 14px; height: 14px; stroke-width: 3; }
.cpdw .flc { padding: 0 16px 32px; }
.cph { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.cph b { display: block; font-size: 20px; font-weight: 700; }
.cph small { display: block; margin-top: 2px; font-size: 17px; color: var(--gray); }
.cpdw .cb.pill { margin-top: 49px; }
.cpdw .cb.pill.pri { width: 100%; background: var(--ink); color: #fff; }
.cpdw .cpab + .cb.pill { width: fit-content; padding: 0 20px; }
.cpdw .cb.pill + .cpk { margin-top: 16px; }
.cpcards { display: flex; gap: 16px; margin: 34px 0 0; overflow-x: auto; scrollbar-width: none; }
.cpcard:nth-child(2n) { background: linear-gradient(40deg, #2b68f6, #cbe7f5); }
.cpcard { position: relative; flex: none; width: 243px; height: 182px; padding: 14px 16px; border-radius: 8px; overflow: hidden; background: linear-gradient(rgba(0,0,245,0), rgba(0,0,245,.15)), linear-gradient(90deg, #c9e8f5 1%, #c5e5f5 10%, #b0d3f5 26%, #94bdf5 47%, #7aa7f5 67%, #5f91f6 88%, #5186f6 98%); color: #fff; text-align: center; }
.cpcard b { position: relative; z-index: 1; display: block; font-size: 11.5px; font-weight: 500; line-height: 16px; }
.cpdev { position: absolute; left: 27px; right: 33px; top: 58px; bottom: 0; padding: 26px 22px 0 80px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, #f7f7f7 0 50px, #fff 50px); display: flex; flex-direction: column; gap: 9px; }
.cpdev i { display: block; height: 4px; border-radius: 2px; background: #e4e4e4; }
.cpdev i:nth-child(2n) { width: 70%; }
.cpk { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; font-size: 20px; font-weight: 700; }
.cpab { margin: 14px 0 0; font-size: 16px; line-height: 23.5px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cpdw .cpab + .cb.pill { margin-top: 18px; }
.cpplan { padding: 5px 10px; border-radius: 6px; background: var(--fill); font-size: 13px; font-weight: 500; }
.cpinc > div { display: flex; gap: 12px; margin: 0; padding: 7px 0 7px 0; border-bottom: 1px solid #e4e4e4; font-size: 16px; line-height: 23px; }
.cpinc { margin-top: 4px; }
.cpinc svg.i { width: 24px; height: 24px; flex: none; margin-top: 0; color: #0b5ed7; }
.fllogo svg { width: 24px; height: 24px; }
/* Detalle de complemento: agregado, tarjetas teal/claras y versión de página (e054, e056, e060) */
.cph em { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-style: normal; font-size: 15px; font-weight: 600; color: #1a7f37; }
.cph em svg.i { width: 15px; height: 15px; stroke-width: 3; }
.cpcards.teal .cpcard { background: #00a390; }
.cpcards.teal .cpcard b { padding: 0 8px; font-size: 12.5px; font-weight: 700; line-height: 16px; }
.cph:has(em) { align-items: flex-start; }
.cph .cpi svg.i { width: 38px; height: 38px; stroke-width: 1.6; }
.cpcards.light .cpcard { height: 190px; padding-top: 30px; background: var(--tabbg); color: var(--ink); }
.cpcards.light .cpcard b { font-size: 12.5px; font-weight: 600; }
.cpcards.light .cpdev { left: 22px; right: 22px; top: 68px; border: 7px solid #1f1f1f; border-bottom: 0; border-radius: 14px 14px 0 0; }
.cpdp { padding: 0; }
.cpdp .cpdb { padding: 16px 16px 0; }
.cpdp .flc { padding: 0 16px 32px; }
.cpdp .cph { margin-top: 48px; }
.cpdp .cb.pill { height: 46px; min-height: 46px; }
/* Ajustes › Manejo de efectivo (e055) */
.ajef { padding: 4px 16px 32px; }
.ajef h3 { margin: 24px 0 0; font-size: 18px; font-weight: 700; }
.ajef > p { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--ink2); }
.ajfld { display: block; margin-top: 16px; padding: 8px 14px; border: 1px solid #c8c8c8; border-radius: 8px; }
.ajfld span { display: block; font-size: 13px; color: var(--gray); }
.ajfld input { width: 100%; padding: 2px 0 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.ajef .ajr { padding: 0; }
.ajefb { display: flex; gap: 12px; margin-top: 28px; }
.ajefb .cb.pill { flex: 1; min-height: 56px; padding: 8px 16px; border-radius: 999px; background: var(--fill); color: var(--ink); font-size: 16px; font-weight: 500; }
.ajefb .cb.pill.del { color: #c4231c; }
/* Complementos: elegir la vista (e059) */
button.flph2 { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; }
button.flph2 svg.i { width: 22px; height: 22px; }
.cpvw .flc { padding: 8px 16px 24px; }
.cpvr { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 60px; padding: 0 16px; border-radius: 8px; font-size: 16px; text-align: left; }
.cpvr.on { background: var(--fill); }
.cpvr svg.i { width: 24px; height: 24px; }
/* Código QR de recomendación (e062) */
.flph .flqr { margin-left: auto; }
.qrw .flc { padding: 8px 28px 32px; text-align: center; }
.qrt { margin: 12px 0 26px; font-size: 18px; font-weight: 700; }
.qrc { display: block; width: 170px; height: 170px; margin: 0 auto; fill: var(--ink); }
.qrc .qrm { fill: #2b68f6; }
.qrw p { margin: 28px 0 8px; font-size: 16px; line-height: 24px; text-align: left; }
/* Notas sobre la versión (e064) */
.relw { padding: 3px 24px 24px; }
.relw h2 { margin: 9px 0 0; font-size: 19px; font-weight: 700; line-height: 26px; }
.relc { display: inline-block; margin: 10px 0 14px; padding: 6px 12px; padding: 5px 12px; border-radius: 14px; background: #e9e9e9; font-size: 14.5px; color: var(--ink2); }
.cbar.relb { padding: 17px 24px 8px; }
.reli { padding: 16px 0; border-top: 1px solid #e4e4e4; }
.reli small { display: block; font-size: 13.5px; color: var(--gray); }
.reli b { display: block; margin-top: 1px; font-size: 17.5px; font-weight: 500; line-height: 24px; }
.reli p { margin: 2px 0 0; font-size: 15px; line-height: 22px; color: var(--ink); }
/* Programar actualizaciones (e065) */
.updw { padding: 8px 16px 24px; }
.updi { display: flex; gap: 14px; }
.updi svg.i { flex: none; width: 24px; height: 24px; }
.updi p { margin: 0; font-size: 14px; line-height: 21px; }
.updw h3 { margin: 24px 0 12px; font-size: 16px; font-weight: 600; }
.updd { display: flex; flex-wrap: wrap; gap: 8px; }
.updd button { min-width: 56px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--fill); font-size: 15px; }
.updd button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.updh { position: relative; display: flex; align-items: center; gap: 14px; height: 56px; margin-top: 20px; padding: 0 20px; border-radius: 999px; background: var(--fill); }
.updh svg.i { width: 24px; height: 24px; }
.updh span { flex: 1; font-size: 16px; font-weight: 500; }
.updh b { font-size: 16px; font-weight: 400; }
.updh input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.updf { margin-top: 16px; text-align: right; }
.updf .cb.pill { min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--fill); font-size: 15px; }
.updf .cb.pill:disabled { color: #9b9b9b; }
.app.phone .cpdp .cb.pill { height: 46px; min-height: 46px; }
.cpdp .cpcards.light .cpcard { width: 254px; }
.cpdp .cpcards.light .cpcard b { font-size: 12px; white-space: nowrap; }
.flph:has(.flqr) { margin-top: -9px; align-items: flex-start; }
.flph:has(.flqr) .flqr { margin-top: 0; }
.flph:has(.flqr) h1 { font-size: 25px; line-height: 32px; }
.flph.tx-h:has(.flqr) { padding-bottom: 28px; }
/* Square deja «Proceso de pago» completo aunque desborde su columna (e064) */
.app.phone .navbar .ni:first-child span:last-child { max-width: none; overflow: visible; text-overflow: clip; }
/* e055 · Ajustes › Manejo de efectivo: medidas tomadas del original sellado */
.pg:has(> .ajef) > .cbar { margin-top: 8px; }
.ajef > h3:first-child { margin-top: 22px; }
.ajef > p { margin-top: 17px; line-height: 24px; color: var(--ink); }
.ajef .ajfld { padding: 10px 14px; }
.ajef .ajfld span { color: var(--ink); font-weight: 500; }
.ajef .ajr { padding: 16px 0; line-height: 24px; }
.ajef .ajrl + h3 { margin-top: 41px; }
.ajef .ajrl + h3 + .ajrl { margin-top: 17px; }
.ajef .ajefb { gap: 16px; margin-top: 33px; align-items: flex-start; }
.ajef .ajefb .cb.pill { min-height: 0; height: auto; padding: 11.5px 16px; line-height: 24px; }

/* Notas sobre la versión (e068–e072): menú ⋯, notas tocables y hoja de detalle. */
.reli { display: block; width: 100%; text-align: left; }
.pg:has(> .relm) { position: relative; }
.menu.relm { top: 74px; right: 23px; width: 223px; min-width: 0; padding: 8px 0; border-radius: 8px; }
.menu.relm button { min-height: 56px; padding: 0 24px; font-size: 16px; }
.menu.relm button + button { position: relative; }
.menu.relm button + button::before { content: ""; position: absolute; top: 0; left: 24px; right: 26px; height: 1px; background: var(--fill); }
.fl-sh:has(> .relnw) { overflow: visible; max-height: calc(100% - 10px); }
.fl-sh:has(> .relnw) .grab, .fl-sh:has(> .updkw) .grab { position: absolute; top: -15px; left: 50%; width: 36px; height: 6px; margin: 0 0 0 -18px; border-radius: 3px; background: #8f8f8f; }
.fl-sh > .relnw { display: flex; flex-direction: column; min-height: 0; border-radius: inherit; }
.relnw .flc { border-radius: inherit; }
/* Pie de 16px (le gana a .flw.flsh .flc); la nota entera se desplaza, como en el original. */
.flw.flsh.relnw .flc { padding: 16px; overflow-y: auto; }
.relnh { display: flex; align-items: flex-start; gap: 12px; }
.relnh h2 { flex: 1; margin: 0; font-size: 20px; line-height: 25px; font-weight: 600; }
.relnh .cir { flex: none; width: 48px; height: 48px; margin: -1px 0 0; }
.relnb { margin-top: 10px; font-size: 14px; line-height: 22px; }
.relnb p { margin: 0; }
.relnb p + p { margin-top: 22px; }
.relnb > div + div { margin-top: 8px; }
.relnf { display: flex; flex-direction: column; gap: 8px; margin-top: 19px; }
.relnf .cb { min-height: 48px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; font-size: 16px; font-weight: 500; }
.relnf svg.i { width: 22px; height: 22px; }

/* Hora de instalación (e073): teclado propio en hoja inferior. */
.updh { width: 100%; text-align: left; color: var(--ink); }
.fl-sh:has(> .updkw) { overflow: visible; }
.updkw .flc { padding: 32px 16px 32px; }
.updkf { display: flex; flex-direction: column; justify-content: center; height: 63px; padding: 0 16px; border: 1px solid #dadada; border-radius: 6px; }
.updkf small { font-size: 12px; line-height: 16px; color: var(--ink); }
.updkf b { font-size: 16px; line-height: 22px; font-weight: 400; }
.updkap { display: grid; grid-template-columns: 1fr 1fr; height: 48px; margin-top: 8px; padding: 4px; border-radius: 24px; background: var(--fill); }
.updkap button { border-radius: 20px; font-size: 16px; }
.updkap button[aria-pressed="true"] { background: var(--paper); }
.updkp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.updkp button { height: 48px; border-radius: 24px; background: var(--fill); font-size: 24px; font-weight: 500; color: var(--ink); }
.updkp button.z { grid-column: span 2; }
.updkp svg.i { width: 26px; height: 26px; }

/* Servicios bancarios (e077–e085): hoja del engranaje, ofertas, informes y cuenta de cheques. */
.ajdot.off { border: 2px solid #8a8a8a; }
.bkajl .row { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 56px; border-bottom: 1px solid var(--row-div); font-size: 16px; text-align: left; }
.bko { background: var(--paper); padding: 20px 16px 24px; }
.bkimg { height: 254px; margin-bottom: 40px; border-radius: 6px; background: #e4e4e4; }
.bko .bkfd + .bkimg { margin: 62px 0 0; }
.bkbad { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 18px; background: #ebf2ff; color: #0055d6; font-size: 13px; font-weight: 500; }
.bkbad svg.i { width: 22px; height: 22px; }
.bkreq { display: inline-block; height: 28px; line-height: 28px; padding: 0 10px; border-radius: 6px; background: var(--fill); color: #555; font-size: 13px; }
.bkh { margin: 17px 0 16px; font-size: 32px; line-height: 40px; font-weight: 700; }
.bkp { margin: 0 0 22px; font-size: 16px; line-height: 24px; color: #333; }
.bkgo { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; width: 100%; height: 48px; border-radius: 999px; font-size: 16px; font-weight: 500; }
.bksm { margin: 30px 0 0; font-size: 13px; color: #555; }
.bkfd { display: flex; gap: 16px; align-items: flex-start; margin-top: 30px; font-size: 13px; line-height: 20px; color: #555; }
.bkfd b { color: #0b2a6b; font-size: 15px; }
.bkfq { margin: 40px 0 0; font-size: 24px; font-weight: 700; }
.bkib h1 { text-align: left; font-size: 18px; }
.bkay { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--fill); font-size: 15px; font-weight: 500; }
.bkvr { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; border-bottom: 1px solid var(--row-div); font-size: 16px; text-align: left; }
.bkvr .rt { flex: 1; }
.bkno { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 50px 0 0; }
.bkno > svg.i { width: 64px; height: 64px; stroke-width: 1.2; color: #9a9a9a; }
.bkno h3 { margin: 22px 0 8px; font-size: 18px; font-weight: 700; }
.bkno p { margin: 0; font-size: 16px; line-height: 24px; color: #333; text-align: left; }
.bkva { display: flex; flex-direction: column; align-items: center; padding: 40px 0 28px; }
.bkvi { width: 88px; height: 88px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; }
.bkvi svg.i { width: 40px; height: 40px; }
.bkvm { margin-top: 18px; font-size: 44px; font-weight: 700; }
.bktot { display: flex; justify-content: space-between; min-height: 56px; align-items: center; border-bottom: 1px solid var(--row-div); font-size: 16px; }
.bkch .cbar { justify-content: flex-start; }
.bkch .pg-b { padding: 0 16px 24px; }
.bkcimg { height: 190px; margin: -59px -16px 0 0; background: var(--tabbg); }
.bkct { margin: 6px 0 12px; font-size: 32px; line-height: 40px; font-weight: 700; }
.bkcp { margin: 0 0 14px; font-size: 16px; line-height: 24px; }
.bkcgo { width: auto; min-height: 48px; height: 48px; padding: 0 22px; border-radius: 999px; font-size: 16px; font-weight: 500; margin-bottom: 16px; }
.bkcf { display: flex; gap: 15px; align-items: center; min-height: 60px; }
.bkcf > span { width: 38px; height: 38px; border-radius: 8px; background: var(--tabbg); display: grid; place-items: center; flex: none; }
.bkcf p { margin: 0; font-size: 14px; line-height: 22px; }
.pg-h.bk-h { padding-top: 17px; }
.pg-h.bk-h h1 { font-size: 26px; letter-spacing: -.2px; }
.bk-h + .utabs { gap: 18px; }
.bk-h + .utabs button { height: 37px; font-size: 14px; font-weight: 500; }
.bk-h + .utabs button.on { font-weight: 600; }
.bkch .cbar { padding-top: 15px; }
.bko .bkimg { margin-bottom: 49px; }
.app.phone .cb.bkgo, .app.phone .cb.bkcgo { min-height: 48px; }
.bko .bkimg:has(+ .bkh) { margin-bottom: 47px; }
.app.phone .navbar .ni { gap: 12px; padding: 0 0 3px; }
.bkcimg { position: relative; }
.bkcimg::after { content: ""; position: absolute; top: 100%; right: 0; width: 247px; height: 65px; background: inherit; }
.bkct { position: relative; z-index: 1; }
/* Ajustes › Hardware, medido contra e088 */
.ajhw > .hubh:first-child { margin-top: 24px; }
.hwh { margin: 32px 16px 4px; font-size: 20px; font-weight: 600; }
.ajhw .clist.g .crow.hwr { min-height: 49px; }
.ajhw .crow.hwr .rt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ajustes › Hardware: subpáginas, medidas contra e092–e102 */
.hwbar { gap: 12px; }
.hwbar h1 { min-width: 0; text-align: left; font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hwbar .hwsv { flex: none; width: auto; min-height: 40px; padding: 0 16px; font-size: 15px; font-weight: 500; }
.hwhelp { display: inline-flex; align-items: center; gap: 6px; }
.hwhelp svg { width: 16px; height: 16px; }
.hwpg { padding: 0 16px 24px; }
.hwfld { display: block; margin: 4px 0 16px; padding: 8px 12px; border: 1px solid var(--row-div); border-radius: 8px; }
.hwfld span { display: block; font-size: 12px; font-weight: 500; color: var(--ink); }
.hwfld input { width: 100%; border: 0; padding: 2px 0 0; font: inherit; font-size: 16px; background: none; outline: 0; }
.hwp { margin: 0 0 24px; font-size: 13.5px; line-height: 1.6; color: var(--ink2); }
.hwid { display: flex; align-items: center; gap: 12px; padding: 0 0 16px; border-bottom: 1px solid var(--row-div); }
.hwid b { flex: 1; font-size: 15px; font-weight: 500; }
.hwid span { max-width: 165px; font-size: 16px; text-align: right; font-size: 15px; word-break: break-all; }
.hwid .cir svg { width: 20px; height: 20px; }
.hwsw { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 0; border-bottom: 1px solid var(--row-div); text-align: left; }
.hwsw .rt { flex: 1; font-size: 15px; font-weight: 500; line-height: 1.5; }
.hwsw small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; line-height: 1.55; color: var(--ink2); }
.hwtp { margin-top: 14px; font-size: 15px; }
.hwlnk { padding: 0; color: #006aff; font: inherit; font-weight: 500; }
.hwh2 { margin: 28px 0 6px; font-size: 18px; font-weight: 600; }
.hwh2 small { display: block; font-size: 14px; font-weight: 400; color: var(--ink2); }
.hwrad { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; border-bottom: 1px solid var(--row-div); font-size: 15px; }
.hwrad i { width: 20px; height: 20px; border: 2px solid #8a8a8a; border-radius: 50%; }
.hwrad i.on { border: 6px solid var(--ink); }
.hwh3 { margin: 16px 0 10px; font-size: 18px; font-weight: 600; }
.hwnone { margin: 0; padding: 0 0 16px; border-bottom: 1px solid var(--row-div); font-size: 14.5px; color: var(--ink2); }
.hwtest { width: 100%; min-height: 48px; margin-top: 16px; }
.hubmr { display: block; width: calc(100% - 32px); min-height: 56px; margin: 0 16px; text-align: left; font-size: 16px; border-bottom: 1px solid var(--row-div); }
.ov.hwhs { height: auto !important; padding: 24px 0 24px !important; }
.hubmw .flc { padding: 24px 0 24px; }
.hubint .flc { text-align: left; }
.hubart { position: relative; width: 120px; height: 150px; margin: 40px auto 16px; }
.hubph { position: absolute; left: 20px; top: 10px; width: 64px; height: 120px; border-radius: 12px; background: #1f1f1f; }
.hubph i { position: absolute; left: 16px; right: 16px; bottom: 30px; height: 6px; border-radius: 3px; background: var(--paper); }
.hubcd { position: absolute; left: 50px; top: 0; width: 76px; height: 48px; border-radius: 6px; background: #5d6f91; transform: rotate(-12deg); }
.hubok { text-align: center; }
.hubab { margin: 24px 16px 0; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font-size: 18px; font-weight: 600; display: inline-block; }
.hubabk { border-top: 1px solid var(--row-div); margin-top: -1px; }
.hubint .hubtab .hubkv { grid-template-columns: 1fr auto; }
.hubint .hubtab .hubkv b { text-align: right; }
.hubpw .flc { padding: 24px 16px 24px; text-align: center; }
.hubpt { margin: 8px 0 24px; font-size: 24px; font-weight: 600; }
.hubrd { display: grid; place-items: center; height: 164px; }
.hubrd span { position: relative; width: 300px; height: 104px; border-radius: 20px; background: linear-gradient(#fbfbfb 0 64%, #e7e7e7 64% 100%); box-shadow: 0 2px 3px rgba(0,0,0,.1); }
.hubrd span::before { content: ""; position: absolute; left: 50%; top: 14px; width: 110px; height: 28px; margin-left: -55px; border-radius: 5px; background: #ececec; }
.hubrd span::after { content: ""; position: absolute; left: 50%; bottom: 13px; width: 40px; height: 10px; margin-left: -20px; border-radius: 5px; background: #2a2a2a; box-shadow: 70px -1px 0 1px #f2f2f2; }
.hubpp { margin: 16px 0 32px; text-align: left; font-size: 15px; line-height: 1.6; }
.hubph2 { width: 100%; min-height: 72px; padding: 0 40px; white-space: normal; }
/* Hojas de Lectores (e092, e094): el tirador va afuera, sobre el fondo, como en las hojas de Square. */
.flw.hubmw > .grab, .flw.hubpw > .grab { position: absolute; top: -12px; left: 50%; margin: 0 0 0 -18px; background: #bdbdbd; }
.flw.hubmw, .flw.hubpw { position: relative; overflow: visible; }
.flw.flsh.hubmw .flc { padding: 19px 0 14px; }
.flw.flsh.hubpw .flc { padding: 19px 16px 24px; }
/* Lectores abierto desde Ajustes › Hardware (e091–e094): título más arriba, fila y botón más abajo. */
.hubwbig:has(.hubhw) .flt { padding-top: 21px; }
.hubwbig:has(.hubhw) .hubt { margin-top: 28px; }
.hubwbig:has(.hubhw) .hubrow { align-items: flex-start; margin-top: 6px; padding-top: 20px; padding-bottom: 20px; }
.hubwbig:has(.hubhw) .hubrow small { margin-top: 9px; }
.hubwbig:has(.hubhw) .hubnew { min-height: 48px; margin-top: 30px; }
.hwbar { padding-top: 12px; }
.hwpg .hwp { font-size: 15px; }
.hubpp { font-size: 16px; line-height: 1.5; }
/* Ajustes › Hardware › Impresoras (e103–e105), medido contra Square. */
.hwpr { padding: 0 24px 16px; }
.hwprt { margin: 25px 0 0; font-size: 24px; line-height: 30px; font-weight: 600; }
.hwprp { margin: 17px 0 0; font-size: 15px; line-height: 23.7px; }
.hwprp u { text-underline-offset: 2px; cursor: pointer; }
.hwprbar { height: 7px; margin-top: 32px; border-radius: 4px; background: #e6e6e6; }
.hwtabs { display: flex; gap: 16px; margin-top: 28px; }
.hwtabs button { height: 42px; padding: 0; font-size: 16px; font-weight: 500; color: var(--ink2); border-bottom: 2px solid transparent; }
.hwtabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.hwsrch { display: flex; align-items: center; gap: 10px; height: 40px; margin-top: 24px; padding: 0 14px; border: 1px solid #c9c9c9; border-radius: 20px; }
.hwsrch svg { width: 20px; height: 20px; flex: none; }
.hwsrch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; }
.hwcard { margin-top: 16px; padding: 17px 16px 31px; border: 1px solid #dcdcdc; border-radius: 8px; }
.hwcard + .hwcard { margin-top: 27px; }
.hwcard h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; }
.hwcol { display: flex; align-items: center; gap: 6px; margin-top: 18px; padding-bottom: 17px; border-bottom: 2px solid var(--ink); font-size: 14px; line-height: 20px; }
.hwcol svg { width: 16px; height: 16px; }
.hwcard p { margin: 18px 0 0; font-size: 16px; line-height: 22px; }
.hwnoprof { margin: 16px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--row-div); font-size: 16px; }
.hwprf { flex: none; padding: 8px 16px 18px; }
.hwprf .cb { min-height: 48px; }
/* Terminal de mano y de mostrador (e106, e107). */
.hwdev { margin: 20px 24px 0; padding: 37px 16px 40px; border: 1px solid #dcdcdc; border-radius: 8px; text-align: center; }
.hwdev h3 { margin: 26px 0 0; font-size: 18px; line-height: 27px; font-weight: 600; }
.hwdev .cb { width: auto; display: inline-flex; min-height: 44px; margin-top: 26px; padding: 0 24px; }
.hwart { position: relative; height: 155px; }
.hwart i { position: absolute; left: 50%; }
.hwart.hand i { top: 4px; width: 62px; height: 146px; margin-left: -31px; border: 5px solid #ececec; border-radius: 12px; background: #1d1d1d; transform: rotate(6deg); }
.hwart.hand i::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 12px; height: 18px; border-radius: 3px; background: #f4f4f4; }
.hwart.term::before { content: ""; position: absolute; left: 50%; bottom: 14px; width: 200px; height: 60px; margin-left: -100px; border-radius: 16px; background: linear-gradient(#f7f7f7, #dcdcdc); }
.hwart.term i { top: 14px; width: 168px; height: 90px; margin-left: -78px; border: 4px solid #ededed; border-radius: 8px; background: #1b1b1b; transform: skewX(-24deg) rotate(-8deg); }
/* Ajustes compartidos (e108). */
.hwtsb { justify-content: flex-start; }
.hwts { padding: 0 16px 24px; }
.hwts h2 { margin: 30px 0 0; font-size: 24px; line-height: 30px; font-weight: 600; }
.hwtsp { margin: 9px 0 0; color: var(--ink2); font-size: 15px; line-height: 20px; }
.hwsel { position: relative; display: block; height: 62px; margin-top: 18px; border: 1px solid #cfcfcf; border-radius: 8px; }
.hwtsp + .hwsel { margin-top: 34px; }
.hwsel > span { position: absolute; left: 14px; top: 10px; font-size: 14px; font-weight: 500; pointer-events: none; }
.hwsel.emp > span { top: 20px; font-size: 16px; font-weight: 400; color: var(--ink2); }
.hwsel select, .hwsel input, .hwsel b { position: absolute; inset: 0; width: 100%; padding: 26px 44px 0 14px; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); appearance: none; -webkit-appearance: none; }
.hwsel b { display: block; padding-top: 34px; line-height: 1; }
.hwsel.emp select { color: transparent; }
.hwsel > svg { position: absolute; right: 16px; top: 21px; width: 20px; height: 20px; color: var(--ink2); pointer-events: none; }
.hwsel.dis { border-color: #ececec; background: #ececec; color: #9a9a9a; }
.hwsel.dis b, .hwsel.dis > svg { color: #a6a6a6; }
.hwsel.txt > svg { display: none; }
.hwnext { min-height: 62px; margin-top: 16px; }
.hwnext[disabled] { background: #eeeeee; color: #9a9a9a; }
/* e103/e107: ajuste fino tras la primera medición. */
.hwbar .hwsv { flex-direction: row; gap: 6px; white-space: nowrap; }
.hwbar .hwsv.hwhelp { min-height: 48px; padding: 0 18px; font-size: 16px; }
.hwprt { margin-top: 16px; font-size: 26px; }
.hwprp { font-size: 16px; }
.hwtabs { border-bottom: 1px solid #e3e3e3; }
.hwtabs button { margin-bottom: -1px; }
.hwcol { border-bottom: 1px solid #757575; padding-bottom: 18px; }
.hwcard { padding-bottom: 16px; }
.hwcard p { padding-bottom: 16px; border-bottom: 1px solid #e6e6e6; }
.hwprf .cb { min-height: 48px; height: 48px; }
.hwdp > .cbar { padding-top: 17px; }
.hwdev { margin: 8px 8px 0; }
.hwdev .cb { min-height: 48px; }
.hwprf { padding-bottom: 15px; }
.hwprf .cb.pill { min-height: 48px !important; height: 48px; }
.hwcard { padding-left: 23px; padding-right: 23px; }
.hwcard h3 { font-size: 19px; }
/* Ajustes compartidos › zona horaria y red */
.fl-sh:has(> .hwtzw){top:9px;max-height:none}
.fl-sh > .hwtzw{flex:1;display:flex;flex-direction:column;min-height:0}
.flw.flsh.hwtzw .flc{padding:0 16px 24px}
.flw.hwtzw .flt{margin:13px 0 14px;font-size:24px;font-weight:700;line-height:30px}
.hwtzr{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:80px;padding:17px 0 12px;border:0;border-bottom:1px solid #e6e6e6;background:none;text-align:left;font:inherit;color:inherit}
.hwtzr span{font-size:16px;font-weight:500;line-height:24px}
.hwtzr small{margin-top:2px;font-size:14px;line-height:20px;color:#6b6b6b}
.hwtzr.on{background:#f5f5f5}
button.hwsel{display:block;width:100%;text-align:left;font:inherit;color:inherit;background: var(--paper)}
button.hwsel svg{position:absolute;right:14px;top:50%;width:20px;height:20px;margin-top:-10px}
.hwredp h2{margin:30px 0 20px;font-size:24px;font-weight:700}
.hwnet{display:flex;align-items:center;width:100%;min-height:64px;padding:0 4px;border:0;border-bottom:1px solid #e6e6e6;background:none;font:inherit;color:inherit;text-align:left}
.hwnet .rt{flex:1;font-size:16px}
.hwnet svg{width:22px;height:22px}
.hwnet.on{background:#f5f5f5}
.hwnote{margin-top:20px;font-size:14px;line-height:20px;color:#6b6b6b}
/* Información del negocio › Agregar logotipo (diálogo) */
.ov-bg.ajphbg { background: rgba(0, 0, 0, .6); align-items: center; justify-content: center; }
.ov.ajph { position: relative; flex: none; display: block; width: 320px; height: 250px; transform: translateY(-16px); background: var(--paper); }
.ov.ajph h2 { margin: 0 0 12px; padding-top: 34px; font-size: 18px; font-weight: 500; line-height: 22px; text-align: center; color: #1a1a1a; }
.ov.ajph button { display: flex; align-items: center; width: 100%; height: 56px; padding: 0 13px; border: 0; background: none; font: inherit; font-size: 18px; text-align: left; color: #1a1a1a; }
.ov.ajph .ajphc { position: absolute; left: 0; bottom: 0; height: 55px; background: #101010; color: #fff; font-weight: 500; text-align: center; }
.ajlogo span { background-size: cover; background-position: center; }
/* Información del negocio › Editar (Dirección del negocio) */
.ov.ajdir { display: flex; flex-direction: column; }
.ajdirb { display: flex; align-items: center; gap: 12px; height: 47px; flex: none; padding: 0 8px; border-bottom: 1px solid #c6c6c6; background: #f2f4f5; }
.ajdirb h1 { margin: 0; font-size: 16px; font-weight: 500; }
.ajdirc { flex: 1; min-height: 0; overflow-y: auto; }
.ajdirc .ajmob { height: 66px; min-height: 0; margin: 0; padding: 0 32px 8px; border-bottom: 1px solid #c6c6c6; }
.ajdirf { padding: 0 32px 32px; }
.ajdirf .ajsm { margin: 28px 0 13px; line-height: 21px; }
.ajdir2 { display: flex; gap: 7px; }
.ajdir2 .ajin:first-child { flex: 1; min-width: 0; }
.ajdir2 .ajprov { width: 52px; flex: none; }
.ajdirs { display: block; width: 100%; height: 48px; margin-top: 32px; border: 0; border-radius: 2px; background: #101010; color: #fff; font: inherit; font-size: 16px; font-weight: 500; text-align: center; }
.mhead { position: relative; }

/* Notificaciones › Novedades › Cobra con solo tu teléfono (e132): ilustración hecha en CSS */
.ttp .cbar { padding-top: 15px; }
.ttp .pg-b { padding: 0 0 24px; }
.cb.ttpgo { width: auto; min-height: 48px; height: 48px; padding: 0 20px; border-radius: 999px; font-size: 16px; font-weight: 500; }
.ttpt { margin: 22px 16px 14px; font-size: 45px; line-height: 57px; font-weight: 600; letter-spacing: -0.5px; }
.ttpp { margin: 0 16px; font-size: 16px; line-height: 24px; color: var(--ink2); }
.ttpdots { display: flex; gap: 8px; margin: 16px 18px 0; }
.ttpdots span { width: 4px; height: 4px; border-radius: 50%; background: #c6c6c6; }
.ttpdots span.on { background: var(--ink); }
.ttpimg { position: relative; height: 357px; margin-top: 57px; overflow: hidden; background: linear-gradient(180deg, #d4e6f7, #bcd8f2); }
.ttpph { position: absolute; left: 34%; top: 14%; width: 46%; height: 62%; border-radius: 26px; background: #22252b; transform: rotate(-24deg); }
.ttpph::after { content: ""; position: absolute; inset: 7px; border-radius: 20px; background: #343944; }
.ttpcd { position: absolute; left: 44%; top: 50%; width: 46%; height: 30%; border-radius: 12px; background: linear-gradient(135deg, #2f6fe0, #1d4fb8); transform: rotate(-58deg); }
.ttpcd::after { content: ""; position: absolute; left: 12%; top: 26%; width: 16%; height: 22%; border-radius: 3px; background: #d7c38a; }
.ttp1 .ttpcd { left: 30%; top: 40%; }
.ttp2 .ttpcd { transform: rotate(-38deg); }
.ttp3 .ttpph { transform: rotate(0); left: 27%; }
.ttp3 .ttpcd { opacity: 0; }

/* Listas vacías de Artículos (e118–e129): tarjeta alta y aireada, título en dos líneas */
.fllp > .flcard { margin: 32px 24px 0; padding: 34px 20px 32px; border-color: #d6d6d6; }
.fllp > .flcard b { max-width: 240px; margin: 0 auto; font-size: 20px; line-height: 27px; font-weight: 600; }
.fllp > .flcard p { max-width: 290px; margin: 6px auto 0; font-size: 16px; line-height: 24px; color: var(--ink); }
.fllp > .flcard .cb { margin-top: 36px; min-height: 48px; height: 48px; padding: 0 22px; font-size: 16px; font-weight: 500; }
.flbig { margin: 22px 24px 0; font-size: 26px; line-height: 32px; font-weight: 700; }
.flbig + .flcard { margin-top: 22px !important; }
/* e132: «Siguiente» a la derecha, título más arriba y liviano, texto en tinta */
.ttp .cbar .sp { flex: 1; }
.ttp .ttpgo { margin-left: auto; }
.ttpt { margin-top: 4px; font-weight: 500; letter-spacing: -0.8px; }
.ttpp { color: var(--ink); }
.ttpimg { margin-top: 30px; height: 420px; background: #c7e3f2; }
.ttpph { left: -6%; top: 9%; width: 70%; height: 34%; border-radius: 24px; transform: rotate(-32deg); }
.ttpcd { left: 40%; top: 40%; width: 34%; height: 46%; transform: rotate(-30deg); }
.ttpcd::after { left: 26%; top: 14%; width: 20%; height: 12%; }
/* Ajustes › Clientes (e133, e134) */
.ajperf { padding-top: 26px; }
.pg:has(.ajperf) > .cbar { padding-top: 16px; }
.pg:has(.ajperf) > .cbar h1 { font-size: 19px; position: relative; top: 2px; }
.ajperf > p { margin-bottom: 31px; font-size: 16.5px; padding-right: 8px; line-height: 24px; color: #101010; }
.ajlink { padding: 0; font: inherit; font-weight: 600; text-decoration: underline; }
.ajtxt.ajperf > .cb.pill { width: 100%; height: 48px; min-height: 48px; padding-top: 4px; }
.ajperf .ajh { position: relative; top: -1px; }
.ajperf .nw { white-space: nowrap; }
.ajperf .ajh { margin: 54px 0 2px; font-size: 20px; }
.ajcf { display: flex; align-items: center; gap: 18px; height: 55.6px; padding-left: 6px; border-bottom: 1px solid #e4e4e4; font-size: 17px; font-weight: 500; }
.ajcf i { width: 12px; height: 18px; background: radial-gradient(circle, #959595 1.9px, transparent 2.2px) 0 0 / 6px 6px; }
.ajmail { padding: 0 20px; }
.ajmail .ajr { padding: 0; }
.ajmail p { margin: 20px 0; font-size: 16px; line-height: 21px; color: #333; }

/* Tablet según el álbum de iPad (1376×1032): barra centrada con relleno gris en la pestaña activa,
   avatar a la izquierda, lista maestra al 29 % sin conteos ni flechas y Más como columna centrada. */
.app.tab .navbar { position: relative; align-items: center; gap: 4px; }
.app.tab .navbar .ni { height: 46px; padding: 0 18px; border-radius: 12px; color: var(--ink); font-size: 14px; font-weight: 500; }
.app.tab .navbar .ni.on { background: var(--fill); }
.app.tab .navbar .me { position: absolute; left: 20px; top: calc(var(--nav) / 2); transform: translateY(-50%); margin: 0; }
.app.tab .md-l { width: clamp(300px, 29%, 460px); }
.app.tab .md-l .crow { min-height: 48px; padding: 0 12px; margin: 0 8px; border: 0; border-radius: 8px; }
.app.tab .md-l .crow .rv, .app.tab .md-l .crow > svg.i { display: none; }
.app.tab .md-l .crow[aria-current="page"] { background: var(--fill); }
.app.tab .md-l .cbar h1, .app.tab .md-r.top .cbar h1 { text-align: left; }
.app.tab .md-l .cbar > [data-x="back"], .app.tab .md-r.top .cbar > [data-x="back"] { display: none; }
.app.tab .md-l .cbar .sp, .app.tab .md-r.top .cbar .sp { display: none; }
.app.tab .mpage { display: flex; flex-direction: column; max-width: 680px; margin: 0 auto; padding-bottom: 120px; }
.app.tab .mpage .cb.pers { order: 1; align-self: flex-end; width: auto; margin: 16px var(--pad) 0; padding: 0 20px; display: inline-flex; }
.app.tab .mpage .mlist { order: 2; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; padding: 0 var(--pad); }
.app.tab .mpage .mlist .row.mr { border-bottom: 1px solid var(--div); }
.app.tab .mpage .mout { order: 3; align-self: flex-start; width: auto; height: auto; min-height: 44px; margin: 16px var(--pad); padding: 0; border: 0; background: none; color: var(--ink); font-weight: 500; text-decoration: underline; }
/* Tablet: estado vacío del detalle («Selecciona un cliente») y listas maestras sin chrome extra. */
.mdempty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--ink2); }
.mdempty svg { width: 40px; height: 40px; }
.mdempty b { color: var(--ink); font-size: var(--t-heading2); font-weight: 600; }
.md-l .mdnav { padding-top: 8px; }
.md-clientes .md-l .row.thumbed { gap: 12px; margin: 0 8px; padding: 8px 12px; border-radius: 8px; border-bottom: 0; }
.md-clientes .md-l .row[aria-current="page"] { background: var(--fill); }
.md-r .mdcli { padding: 0 var(--pad) 40px; }
.app.tab .mpage .minfo { display: none; }

/* Tablet · Artículos (i131): título a la izquierda, selección a ras sin esquinas, filas de una línea y fila «+ Nombre del artículo». */
.addrow { display: none; }
.app.tab .md-articulos .md-l .flph h1 { font-size: 20px; font-weight: 700; padding-left: 0; }
.app.tab .md-articulos .md-l .flph { align-items: flex-start; min-height: 67px; padding: 14px 12px 0; }
.app.tab .md-articulos .md-l .crow { margin: 0; padding: 0 12px; border-radius: 0; }
.app.tab .md-articulos .md-l .crow .rt { font-weight: 500; font-size: 13.6px; color: var(--ink); }
.app.tab .md-articulos .md-l .crow[aria-current="page"] { background: #E8E8E8; }
.app.tab .md-articulos .md-r .cbar { height: 64px; padding: 0 20px; }
.app.tab .md-articulos .md-r .cbar h1 { font-size: 19.5px; font-weight: 700; text-align: left; }
.app.tab .md-articulos .md-r .flsearch { margin: 6px 20px 20px; height: 40px; border-color: #DADCDD; }
.app.tab .md-articulos .md-r .flsearch input { font-size: 13.5px; }
.app.tab .md-articulos .md-r .list { padding: 0 20px; }
.app.tab .md-articulos .md-r .row.thumbed { min-height: 64px; padding: 0; gap: 12px; }
.app.tab .md-articulos .md-r .row.thumbed::after { left: 0; right: 0; background: #ECECEC; }
.app.tab .md-articulos .md-r .row .thumb { width: 40px; height: 40px; margin: 0; border-radius: 4px; background: #EDEDED; color: #555; font-size: 17px; font-weight: 500; }
.app.tab .md-articulos .md-r .row .rt { font-weight: 600; font-size: 13.5px; }
.app.tab .md-articulos .md-r .row .rt small { display: none; }
.app.tab .md-articulos .md-r .row .rv { font-size: 13.5px; font-weight: 400; color: var(--ink); }
.app.tab .md-articulos .md-r .addrow { display: flex; }
.app.tab .md-articulos .md-r .addrow .rv { color: #8a8a8a; }
.app.tab .md-articulos .md-r .addrow .thumb svg.i { width: 22px; height: 22px; color: var(--ink); }

/* Tablet · Editar artículo (i132): página completa, columna de 600 px */
.ov-bg.center.fl-full { padding: 0; background: var(--paper); }
.ov-bg.center.fl-full .ov { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; }
.tab-ov .flw.itempg .flb { min-height: 64px; padding: 0 20px; }
.tab-ov .flw.itempg .flb h1 { visibility: hidden; font-size: 17px; font-weight: 600; }
.tab-ov .flw.itempg.scl .flb h1 { visibility: visible; }
.tab-ov .flw.itempg .flb .cir { width: 40px; height: 40px; }
.tab-ov .flw.itempg .flsave { min-width: 88px; min-height: 40px; font-size: 14.5px; }
.tab-ov .flw.itempg .flsave[disabled] { background: #f3f3f3; color: #c4c4c4; }
.tab-ov .flw.itempg .flc { padding-left: max(24px, calc((100% - 600px) / 2)); padding-right: max(24px, calc((100% - 600px) / 2)); }
.tab-ov .flw.itempg .flt.itpt { margin: 8px 0 28px; font-size: 24px; font-weight: 700; }
.tab-ov .flw.itempg .fltilebox .flpill { white-space: nowrap; }
.tab-ov .flw.itempg .flh { font-size: 17px; margin-top: 20px; }
.tab-ov .flw.itempg .flrow > svg.i { display: none; }
.tab-ov .flw.itempg .flrow:not(.sw)::after { content: "Editar"; flex: none; font-size: 14.5px; font-weight: 600; text-decoration: underline; }
.tab-ov .flw.itempg .fltilebox .fltile { background: #707070; color: #fff; }
.tab-ov .flw.itempg .fltilebox .fltile * { color: #fff; }
.tab-ov .flw.itempg .fllink.spark { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; margin-top: 16px; border-radius: 999px; background: var(--fill); font-size: 14.5px; font-weight: 600; }
.tab-ov .flw.itempg .fllink.spark u { text-decoration: none; }
.tab-ov .flw.itempg .flgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.tab-ov .flw.itempg .flgrid2 .flf { margin-top: 12px; }
.tab-ov .flw.itempg .flgrid2 .flhelp { grid-column: auto; }
.tab-ov .flw.itempg .flf.unit { text-align: left; }
.tab-ov .flw.itempg .flf.unit svg.i { transform: rotate(90deg); color: var(--ink2); }
.tab-ov .flw.itempg .flpill.sec { width: 100%; background: var(--fill); font-size: 14.5px; font-weight: 600; }
.tab-ov .flw.itempg .flstock { font-size: 14px; }
.tab-ov .flw.itempg .flstock .fllink { font-size: 14.5px; font-weight: 600; }

/* Tablet · Editar mosaico del PDV (i133, i134): hoja centrada sobre la página */
.tab-ov .fl-sh .flw.flsh .flt { margin: 0 0 16px; font-size: 22px; }
.tab-ov .fl-sh .flw.flsh .flb { min-height: 72px; }
.tab-ov .fl-sh .flw.flsh .flb h1 { visibility: hidden; }
.tab-ov .fl-sh .flw.flsh .flcolors { grid-template-columns: repeat(5, 1fr); gap: 16px 24px; padding: 8px 8px 12px; }
.tab-ov .fl-sh .flw.flsh .flcol { width: 36px; justify-self: center; }
.tab-ov .flw.itempg .flp { color: var(--ink); font-size: 14px; }

/* Tablet · listas vacías de Artículos (i151, i153, i155, i159, i161) */
.app.tab .fllp > .flcard.tabc { max-width: none; margin: 16px 20px 0; padding: 28px 20px 24px; border-color: #e3e3e3; border-radius: 8px; }
.app.tab .fllp > .flcard.tabc svg { display: block; width: 34px; height: 34px; margin: 0 auto 20px; stroke: #6b6b6b; fill: none; stroke-width: 1.5; }
.app.tab .fllp > .flcard.tabc b { max-width: none; font-size: 16px; line-height: 22px; font-weight: 600; }
.app.tab .fllp > .flcard.tabc p { max-width: 760px; margin: 6px auto 0; font-size: 13.5px; line-height: 20px; }
.app.tab .fllp > .flcard.tabc p u { text-underline-offset: 2px; }
.app.tab .fllp > .flcard.tabc .cb { margin-top: 18px; min-height: 36px; height: 36px; padding: 0 16px; font-size: 13.5px; font-weight: 600; }
.app.tab .fllp > .flcard.tabc.mid { max-width: 480px; margin: 340px auto 0; }
/* Tablet · crear categoría, descuento, modificadores y unidad a página completa */
.tab-ov .flw.tpg .flb { min-height: 64px; padding: 0 20px; }
.tab-ov .flw.tpg .flb h1 { font-size: 17px; font-weight: 600; }
.tab-ov .flw.tpg .flb h1 .bigt { visibility: hidden; }
.tab-ov .flw.tpg.scl .flb h1 .bigt { visibility: visible; }
.tab-ov .flw.tpg .flb .cir { width: 40px; height: 40px; }
.tab-ov .flw.tpg .flsave { min-width: 88px; min-height: 40px; font-size: 14.5px; }
.tab-ov .flw.tpg .flsave[disabled] { background: #f3f3f3; color: #c4c4c4; }
.tab-ov .flw.tpg .flc { padding-left: max(24px, calc((100% - 600px) / 2)); padding-right: max(24px, calc((100% - 600px) / 2)); }
.tab-ov .flw.tpg .flt { margin: 8px 0 20px; font-size: 24px; font-weight: 700; }
.tab-ov .flw.tpg .fltilebox .flpill { white-space: nowrap; }
.tab-ov .flw.tpg .flh { font-size: 17px; margin-top: 20px; }
.app.tab .navbar .me svg.i { width: 26px; height: 26px; color: var(--ink2); }

/* Reloj de turno (e153) */
.clkb { display: flex; flex-direction: column; align-items: center; padding: 14vh 20px 64px; max-width: 520px; width: 100%; margin: 0 auto; box-sizing: border-box; text-align: center; }
.clkav { width: 110px; height: 110px; border-radius: 50%; background: var(--fill); margin-bottom: 36px; }
.clkt { font-size: 40px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.clkst { margin: 0 0 20px; font-size: 17px; color: var(--ink, #111); text-align: center; }
.clkd { display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin: -2px 12px 0 0; border-radius: 50%; background: #00b23b; }
.clkd.brk { background: #e0a200; }
.clkd.off { background: #b5b5b5; }
.clkn { margin: 0 0 12px; max-width: 100%; color: var(--ink2, #555); font-size: 15px; overflow-wrap: anywhere; }
.clknb { background: none; border: 0; padding: 8px; margin-bottom: 36px; font: inherit; font-size: 17px; font-weight: 500; color: var(--ink, #111); text-decoration: underline; cursor: pointer; }
.clkbt { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: 12px; border: 0; border-radius: 28px; background: #111; color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.clkbt:active { opacity: .85; }
.clkst + .clkbt { margin-top: 16px; }
.clkta { width: 100%; box-sizing: border-box; margin: 4px 0 8px; padding: 14px 16px; border: 1px solid #d0d0d0; border-radius: 12px; font: inherit; font-size: 17px; resize: none; color: var(--ink, #111); background: var(--paper); }
.clkta:focus { outline: 2px solid #111; outline-offset: 0; border-color: #111; }
.clkta + .clknb { margin-bottom: 24px; }
/* Atención al cliente: aviso de cuenta (e161) y Acerca de (e162) */
.flacc { padding: 24px var(--pad) 16px; background: var(--tabbg); border-bottom: 1px solid #ddd; }
.flaccb { width: 100%; text-align: center; min-height: 52px; border: 1px solid #ccc; border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; font-size: 17px; font-weight: 500; }
.flacc p { margin: 14px 0 0; padding-right: 14%; color: #8a8f98; font-size: 14px; line-height: 1.55; }
.flabw { padding-top: 12px; }
.flabw .flab { padding: 0; margin: 0 var(--pad); min-height: 52px; border-bottom: 1px solid var(--row-div); }
.flabw .flab:first-child { border-top: 1px solid var(--row-div); }
.flab span { color: var(--ink); font-weight: 500; }
.flab b { font-weight: 400; color: var(--ink); }
/* Pedir hardware (e164): título centrado y en negrita junto al círculo de volver */
.hwlw .flb h1 { flex: 1; text-align: center; font-size: 22px; font-weight: 600; margin-right: 48px; }
.hwlw .flc { padding-top: 14px; }
.hwlw .clist .crow { min-height: 56px; font-weight: 600; font-size: 17px; }
.hwlw .clist .crow .rt { font-weight: 600; }
/* Descuento en tablet (i157): desplegable «Tipo de importe» junto al importe */
.flline.dd { align-items: flex-start; gap: 24px; }
.flline.dd > * { flex: 1; min-width: 0; }
.fldw { position: relative; }
.fldd { display: flex; align-items: center; flex-wrap: wrap; align-content: center; width: 100%; min-height: 64px; margin-top: 16px; padding: 6px 16px; border: 1px solid var(--ink); border-radius: 8px; background: var(--paper); text-align: left; }
.fldd:not(.open) { border-color: #c8c8c8; }
.fldd .flfl { display: block; position: static; flex: 0 0 100%; font-size: 13px; font-weight: 500; color: var(--ink); }
.fldd .fldv { flex: 1; font-size: 16px; }
.fldd > svg.i { width: 18px; height: 18px; color: var(--gray); transform: rotate(90deg); }
.fldd.open > svg.i { transform: rotate(-90deg); }
.fldl { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; padding: 8px 16px; border-radius: 12px; background: var(--paper); box-shadow: 0 6px 24px rgba(0,0,0,.14); }
.fldl button { display: flex; align-items: center; width: 100%; min-height: 52px; text-align: left; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--row-div); }
.fldl button:last-child { border-bottom: 0; }
.fldn { align-self: center; font-size: 14px; color: var(--ink2); }
.flmore { display: flex; justify-content: flex-end; margin-top: -8px; }
.flline.dd + .flsep { margin: 22px 0 6px; height: 4px; }
.flp.chp { color: var(--ink); }

/* v35 — texto de ayuda bajo el nombre del grupo de modificadores (iPad i154) */
.flp.mgh { margin: 12px 0 20px; font-size: 13px; text-align: center; color: var(--ink3, var(--ink2)); }
.flp.mgh u { font-weight: 600; }

/* Reclamos de pago (iPad i106): recuadro vacío con borde fino, texto centrado. */
.rcmbox { margin: 16px; min-height: calc(100vh - 190px); border: 1px solid #ddd; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 32px; }
.rcmbox b { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.rcmbox p { margin: 0; max-width: 460px; color: var(--ink); font-size: var(--t-body); line-height: 1.5; }
.rcmbox .lnk { display: inline; padding: 0; font: inherit; text-decoration: none; }
.gbar .cb.pill.rcmq { flex: none; width: auto; min-height: 36px; height: 36px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.gbar h1 { white-space: nowrap; }
@media (max-width: 480px) { .gbar .cb.pill.rcmq { padding: 0 12px; font-size: 12.5px; } .gbar h1 { font-size: 15px; } }

/* v38 · Informe de ventas (iPad i095–i099) */
.rgrid.g3 { grid-template-columns: repeat(3, 1fr); padding: 24px 0; margin: 0 16px; }
.rgrid.g3 .rcl { padding: 14px 8px 14px 0; border: 0 !important; }
.rgrid.g3 .rcl b { font-size: 26px; }
.rsh .lnk { padding: 0; font: 600 14px var(--font, inherit); text-decoration: underline; color: var(--ink); text-transform: none; }
.rcmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 8px; }
.rcmp span { display: block; color: var(--ink2); font-size: 14px; }
.rcmp b { font-size: 22px; font-weight: 500; color: #3a3f44; }
.rcmp b.cur { color: #0a6cf0; }
.rchart { display: flex; gap: 8px; height: 190px; padding: 8px 16px 28px; }
.ry { display: flex; flex-direction: column; justify-content: space-between; color: var(--ink2); font-size: 11px; text-align: right; min-width: 52px; padding-bottom: 14px; }
.rbars { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 3px; border-bottom: 1px solid #ccc; background: repeating-linear-gradient(to bottom, #e4e4e4 0 1px, transparent 1px 20%); }
.rbc { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.rbc i { display: block; width: 70%; background: #66a3ff; border-radius: 2px 2px 0 0; }
.rbc em { position: absolute; top: 100%; margin-top: 4px; font-size: 11px; font-style: normal; color: var(--ink2); white-space: nowrap; }
.rdt { margin: 0 16px; border-top: 1px solid var(--row-div); }
.rrw { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--row-div); font-size: 15px; }
.rrw.b { font-weight: 600; }
.rpy .rrw { border-bottom: 0; min-height: 44px; font-weight: 600; }
.rpy .rrw span:nth-child(2) { margin-left: auto; font-weight: 400; }
.rpy .rrw span:nth-child(3) { min-width: 90px; text-align: right; font-weight: 400; }
.rbar { height: 8px; background: #e8e8e8; margin-bottom: 8px; }
.rbar i { display: block; height: 100%; background: #7ab51d; }
.rtb { margin: 0 16px 8px; }
.rth, .rtr { display: grid; grid-template-columns: 1fr 70px 110px; align-items: center; gap: 8px; }
.rth { padding: 10px 0; border-bottom: 1px solid var(--row-div); font-size: 12px; font-weight: 600; }
.rtr { min-height: 52px; border-bottom: 1px solid var(--row-div); font-size: 15px; }
.rtr span:first-child { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.rtr span:first-child svg { width: 18px; height: 18px; }
.rtr.none { grid-template-columns: 1fr; color: var(--ink2); }
.rth span:nth-child(n+2), .rtr span:nth-child(n+2) { text-align: right; }
@media (max-width: 480px) { .rgrid.g3 { grid-template-columns: 1fr 1fr; } .rgrid.g3 .rcl + .rcl { padding-left: 0; } }
/* Tablet · lista de Informes: filas de ancho completo, selección rellena como en el iPad */
.md.md-informes .md-l .clist:not(.g) { padding-top: 0; }
.md.md-informes .md-l .clist:not(.g) .crow { min-height: 58px; padding: 0 28px; border-bottom: 1px solid var(--row-div); }
.md.md-informes .md-l .clist:not(.g) .crow .rt { font-weight: 600; font-size: 17px; }
.md.md-informes .md-l .clist [aria-current="page"], .md.md-informes .md-l .clist [aria-current="page"] * { background: var(--ink); color: #fff; }
.md.md-informes .md-l .clist [aria-current="page"] svg { display: none; }
.gtools { display: flex; gap: 4px; margin-left: auto; }
.gbar .gtools .ib { margin-left: 0; }
.md.md-informes .md-l .clist:not(.g) .crow, .md.md-informes .md-l .clist [aria-current="page"] { border-radius: 0; margin: 0; }

/* v38 · Caja en curso, Historial de caja, Informe de caja (iPad i092–i094, i107) */
.cjw { max-width: 640px; margin: 0 auto; padding: 22px 16px 28px; }
.cjf { display: block; margin-bottom: 22px; }
.cjf > span { display: block; font-size: 14px; font-weight: 600; color: #0a0a0a; margin: 0 0 8px; }
.cjf input { width: 100%; height: 56px; padding: 0 16px; border: 1px solid #d4d4d4; border-radius: 10px; background: var(--paper); font: inherit; font-size: 16px; color: #0a0a0a; }
.cjf input:focus { outline: none; border-color: #0a0a0a; }
.cjf.cjc { margin: 28px 0 8px; }
.cjgo { width: 100%; height: 52px; margin-top: 4px; }
.cjh { font-size: 17px; font-weight: 700; margin: 22px 0 8px; color: #0a0a0a; }
.cjh:first-child { margin-top: 0; }
.cjr { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid #ececec; font-size: 15px; color: #0a0a0a; }
.cjr span:last-child { text-align: right; }
.cjrow { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; border: 0; border-bottom: 1px solid #ececec; background: none; font: inherit; font-size: 15px; color: #0a0a0a; text-align: left; }
.cjrow span:last-child { display: inline-flex; align-items: center; gap: 8px; color: #333; }
.cjrow svg { width: 18px; height: 18px; opacity: .55; }
.cjbox { border: 1px solid #d9d9d9; border-radius: 12px; padding: 28px 16px; text-align: center; }
.cjbox b { font-size: 17px; }
.cjempty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px 30px; }
.cjempty svg { width: 34px; height: 34px; margin-bottom: 8px; }
.cjempty span { font-size: 15px; color: #222; }
.cjn { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: #666; }
.cj-oc { border: 0; background: none; padding: 8px 4px; font: inherit; font-size: 16px; font-weight: 700; color: #0a0a0a; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cjtools { display: inline-flex; gap: 8px; }
.cjtools .cb { height: 44px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
@media (max-width: 560px) { .cjtools .cb { padding: 0 12px; font-size: 13px; } .cjw { padding-top: 14px; } }
.cjtools .cb { border-radius: 999px; background: #efefef; color: #0a0a0a; }
.cjtools .cb:active { background: #e0e0e0; }
.cjov { padding: 14px 20px 22px; }
.cjov .cjh { margin-top: 4px; }
@media (max-width: 560px) { .cjx { display: none; } }
/* v38 · «+ Nota» con el signo de más de Square, y punto azul de novedades en la campana */
.kp-notebtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.kp-notebtn svg.i { width: 18px; height: 18px; }
.navbar .ni .bdg.pt { min-width: 0; width: 9px; height: 9px; padding: 0; border-radius: 50%; background: #0a6cff; transform: translate(11px, -3px); }
.app.phone .kp-nw .kp-notebtn, .app.tab .kp-nw .kp-notebtn { display: inline-flex; justify-content: center; }
.app.phone .kp-nw .kp-notebtn { display: flex; }
/* Teclado: «Pedidos» y «Cobrar» lado a lado, como en Square */
.co-buttons.dos { flex-direction: row; gap: 12px; }
.co-buttons.dos .cb { flex: 1 1 0; min-width: 0; height: 56px; min-height: 56px; border-radius: 999px; }
/* Pie del carrito en tablet: «Guardar pedido»/«Pedidos abiertos» y «Cobrar» miden y redondean igual */
.cart.std .cart-f .cb { height: 56px; min-height: 56px; border-radius: 6px; }

/* ---------- v39: Agregar propinas y modales de Ventas (i091, i103–i105, i108) ---------- */
.tipse { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px 24px; text-align: center; }
.tipse b { font-size: 16px; font-weight: 600; color: var(--ink); }
.tipsi { width: 96px; height: 96px; border-radius: 50%; border: 3px solid #6b6f76; color: #6b6f76; display: grid; place-items: center; }
.tipsi svg { width: 52px; height: 52px; stroke-width: 1.5; }
.txtip { background: var(--fill); color: var(--ink); }
/* Modales pequeños, centrados en tablet y hoja inferior en teléfono */
.ov-bg.center .ov.mdlov { max-width: 480px; height: auto; border-radius: 18px; }
.ov-bg.center .ov.mdlov.sm { max-width: 300px; border-radius: 4px; }
.ov-bg.center .ov.mdlov.mail { max-width: 530px; border-radius: 16px; }
.mdl { position: relative; padding: 18px 24px 26px; }
.mdl h2 { margin: 18px 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.mdl p { margin: 0 0 20px; font-size: 15px; color: var(--ink); }
.mdx { width: 40px; height: 40px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; color: var(--ink); }
.mdx svg { width: 20px; height: 20px; }
.rtbs { display: flex; gap: 12px; margin-bottom: 12px; }
.rtb { flex: 1; min-height: 56px; border-radius: 10px; background: var(--fill); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 500; }
.rtb svg { width: 22px; height: 22px; }
.rtb.on { background: var(--ink); color: #fff; }
.mdgo { height: 56px; min-height: 56px; border-radius: 28px; }
.cb.pill.mdgo { background: var(--fill); color: var(--ink); }
.cb.pill.mdgo[disabled] { background: #f6f6f6; color: #b5b5b5; }
.mdlov.sm .mdl { display: flex; flex-direction: column; padding: 20px; }
.mdlov.sm .mdgo { border-radius: 2px; }
.mdlov.sm .ulnk { margin-top: 10px; }
.mailh { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.mailh h2 { flex: 1; margin: 0; font-size: 18px; text-align: center; }
.mailh .mgo { flex: none; width: auto; min-height: 44px; padding: 0 20px; border-radius: 22px; }
.mailf { display: block; margin: 0 24px 26px; padding: 8px 12px; border: 1px solid #8a8a8a; border-radius: 4px; }
.mailf span { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.mailf input { width: 100%; border: 0; outline: 0; padding: 4px 0 0; font-size: 16px; background: none; }
.mailf:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* Personalizar informe */
.custb { max-width: 640px; margin: 0 auto; padding: 16px 20px 40px; }
.tb .ulnk.done { margin: 0; padding: 8px 12px; font-size: 16px; font-weight: 600; }
.calh { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 16px; }
.calh b { font-size: 15px; font-weight: 500; }
.calh .ib { width: 40px; height: 40px; display: grid; place-items: center; }
.calh .ib.nx svg { transform: scaleX(-1); }
.cdow, .cw { display: grid; grid-template-columns: repeat(7, 1fr); }
.cdow span { text-align: center; padding: 10px 0 14px; font-size: 14px; font-weight: 600; }
.cd { height: 48px; font-size: 15px; font-weight: 600; color: var(--ink); background: none; }
.cd.oth { color: #c8c8c8; }
.cd.fut { color: #c8c8c8; font-weight: 400; }
.cd.sel { background: var(--ink); color: #fff; }
.cd.sel.fut { color: #8a8a8a; }
.cd.sel.s, .cw .cd.sel:first-child { border-radius: 24px 0 0 24px; }
.cd.sel.e, .cw .cd.sel:last-child { border-radius: 0 24px 24px 0; }
.cd.sel.s.e, .cw .cd.sel.s:last-child, .cw .cd.sel.e:first-child { border-radius: 24px; }
.cfs { margin-top: 26px; }
.cfr { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border-top: 1px solid var(--row-div); font-size: 15px; font-weight: 600; text-align: left; background: none; color: var(--ink); }
.cfr.tm { gap: 16px; }
.cfr.tm label { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 500; }
.cfr.tm input { min-height: 40px; padding: 0 8px; border: 1px solid #c8c8c8; border-radius: 4px; font-size: 15px; }
.cfh { padding: 26px 0 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.cfr .radio { width: 28px; height: 28px; border-color: #b0b0b0; }
.cfr .radio.on { border-color: var(--ink); }
.cfr .radio.on::after { inset: 4px; }
.swt { width: 54px; height: 32px; border-radius: 16px; background: #d4d4d4; position: relative; flex: none; transition: background .15s; }
.swt i { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); transition: left .15s; }
.swt.on { background: var(--ink); }
.swt.on i { left: 26px; }
/* Cabecera del informe: botón de filtros a la izquierda de la fecha */
.rhead { position: relative; }
.rhead .rfl { position: absolute; left: 8px; top: 50%; margin-top: -20px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); }
.rhead .rfl svg { width: 24px; height: 24px; }
.rhead { padding-left: 52px; padding-right: 52px; }
.tx-h { position: relative; }
.tx-h .txtip { position: absolute; right: 16px; top: 50%; margin-top: -4px; transform: translateY(-50%); width: auto; min-height: 40px; padding: 0 18px; border-radius: 20px; font-size: 14px; white-space: nowrap; }
.app.tab .tx-h .txtip { right: 12px; }
/* Transacciones en tablet: título y búsqueda viven en la columna izquierda, no bajo el panel dividido */
.md > .ml.tl { display: flex; flex-direction: column; overflow: hidden; }
.ml.tl .mlh { flex: none; }
.ml.tl .mls { flex: 1; min-height: 0; overflow-y: auto; }
.ml.tl .tx-h .txtip { right: 12px; padding: 0 12px; font-size: 13px; min-height: 36px; }
.ml.tl .tx-h h1 { font-size: 24px; }

/* v40 — checkout del iPad como Square (i001/i014): mitades 50/50, buscador con lector, pestañas subrayadas, mosaicos grises, carrito en tarjeta y píldoras. Solo tablet. */
.app.tab .co.tabl .co-main { flex: 1 1 50%; min-width: 0; }
.app.tab .co.tabl .cartp { width: 50%; flex: 0 0 50%; }
.app.tab .tsr { display: flex; gap: 12px; align-items: center; padding: 16px 24px 4px; }
.app.tab .tsr-i { flex: 1; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 26px; background: var(--tabbg); color: #6b6b6b; }
.app.tab .tsr-i svg.i { width: 22px; height: 22px; flex: none; }
.app.tab .tsr-i input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: var(--ink); -webkit-appearance: none; appearance: none; }
.app.tab .tsr-b { flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 1px solid #d9d9d9; border-radius: 8px; background: var(--paper); color: var(--ink); }
.app.tab .tsr-b svg.i { width: 26px; height: 26px; }
.app.tab .ttabs { display: flex; align-items: flex-end; gap: 28px; padding: 6px 24px 0; border-bottom: 1px solid #e6e6e6; }
.app.tab .ttabs [role=tab] { display: flex; align-items: center; justify-content: center; height: 52px; padding: 0; border: 0; border-bottom: 3px solid transparent; background: none; color: #6b6b6b; font-size: 17px; font-weight: 500; }
.app.tab .ttabs [role=tab].on { color: var(--ink); border-bottom-color: var(--ink); }
.app.tab .tt-sp { flex: 1; }
.app.tab .tt-pen { width: 40px; height: 40px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--tabbg); color: var(--ink); }
.app.tab .tt-pen svg.i { width: 20px; height: 20px; }

/* Mosaicos: gris, iniciales grandes abajo a la izquierda, nombre y precio */
.app.tab .fltiles:not(.edit) { grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px 24px; }
.app.tab .fltiles:not(.edit) .fltile2 { position: relative; display: block; aspect-ratio: 1 / .9; padding: 0; border-radius: 4px; background: var(--tabbg); box-shadow: none; text-align: left; overflow: hidden; }
.app.tab .fltiles:not(.edit) .fltile2 .fltp { position: absolute; inset: 0; aspect-ratio: auto; display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 14px 52px; border-radius: 0; background: transparent; color: var(--ink); font-size: 34px; font-weight: 700; }
.app.tab .fltiles:not(.edit) .fltile2 .fltp:not([style*="background"]) { background: transparent; color: var(--ink); }
.app.tab .fltiles:not(.edit) .fltile2 .fltp[style*="background:#"] { color: #fff; }
.app.tab .fltiles:not(.edit) .fltile2 .tl { position: absolute; left: 14px; right: 14px; bottom: 10px; height: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 0; color: var(--ink); text-align: left; white-space: normal; }
.app.tab .fltiles:not(.edit) .fltile2 .tl span { max-width: 100%; font-size: 16px; line-height: 1.25; font-weight: 500; }
.app.tab .fltiles:not(.edit) .fltile2 .tl .ts { font-size: 15px; font-weight: 400; opacity: .85; }
.app.tab .fltiles:not(.edit) .fltile2 .fltp[style*="background:#"] + .tl { color: #fff; }
.app.phone .tile .tl .ts { display: none; }

/* Teclado: monto grande a la izquierda, «+ Nota» de ancho completo, cuadrícula con líneas finas */
.app.tab .kp { display: flex; flex-direction: column; height: 100%; }
.app.tab .kp-amt { justify-content: flex-start; padding: 22px 24px 8px; }
.app.tab .kp-val { text-align: left; font-size: 64px; font-weight: 500; line-height: 1.1; }
.app.tab .kp-nw { padding: 8px 24px 16px; }
.app.tab .kp-nw .kp-notebtn { display: flex; width: 100%; height: 56px; border: 1px solid #d9d9d9; border-radius: 6px; background: var(--paper); font-size: 18px; }
.app.tab .kp-grid { flex: 1; min-height: 0; margin: 0 24px 20px; grid-auto-rows: 1fr; border: 1px solid #e6e6e6; border-radius: 6px; overflow: hidden; }
.app.tab .kp-grid button { border-color: #e6e6e6; font-size: 28px; font-weight: 500; }

/* Venta actual */
.app.tab .cq { display: flex; flex-direction: column; height: 100%; background: var(--paper); position: relative; }
.app.tab .cq-h { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 8px; }
.app.tab .cq-t { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.app.tab .cq-cli { padding: 0; border: 0; background: none; color: var(--ink); font-size: 18px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.app.tab .cq-n { color: #6b6b6b; font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }
.app.tab .cq-dots { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid #d9d9d9; border-radius: 50%; background: var(--paper); color: var(--ink); }
.app.tab .cq-dots.sm { width: 36px; height: 36px; border-color: transparent; }
.app.tab .cq-dots svg.i { width: 20px; height: 20px; }
.app.tab .cq .cart-b { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 16px; }
.app.tab .cq-card { border: 1px solid #e6e6e6; border-radius: 6px; background: var(--paper); }
.app.tab .cq-ch { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 16px; border-bottom: 1px solid #e6e6e6; }
.app.tab .cq-svc { padding: 0; border: 0; background: none; color: var(--ink); font-size: 16px; font-weight: 500; }
.app.tab .cq-l { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; border-bottom: 1px solid #efefef; background: var(--paper); text-align: left; color: var(--ink); }
.app.tab .cq-th { flex: none; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: #9aa0a6; color: #fff; font-size: 20px; font-weight: 600; }
.app.tab .cq-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app.tab .cq-nm b { font-size: 17px; font-weight: 500; }
.app.tab .cq-nm small { color: #6b6b6b; font-size: 14px; }
.app.tab .cq-v { flex: none; font-size: 17px; }
.app.tab .cq-add { display: block; padding: 14px 16px; border: 0; background: none; color: var(--ink); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.app.tab .cq-f { flex: none; display: flex; gap: 12px; padding: 12px 24px 20px; background: var(--paper); border-top: 1px solid #efefef; }
.app.tab .cq-f .cb { flex: 1; display: flex; align-items: center; justify-content: center; height: 60px; padding: 0 16px; border: 0; border-radius: 30px; font-size: 18px; font-weight: 500; }
.app.tab .cq-f .cq-sec { background: #ececec; color: var(--ink); }
.app.tab .cq-f .cq-pay { flex: 1.4; background: #111; color: #fff; }
.app.tab .cq-f .cq-pay[disabled] { background: #d9d9d9; color: #fff; }
.app.tab .cq .menu { top: 60px; right: 20px; }
.app.tab .fltiles:not(.edit) { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
.app.tab .fltiles:not(.edit) .fltile2, .app.tab .fltiles:not(.edit) .fltile0 { width: 100%; min-width: 0; align-self: start; aspect-ratio: 1 / .9; }
.app.tab .fltiles:not(.edit) .fltile0 { background: transparent; }
.app.tab .cart-f.cq-f { flex-direction: row; align-items: center; }

/* v41 — Más en el iPad (i043): título con insignia de prueba, Personalizar arriba, dos columnas con conteo a la derecha. */
.app.tab .mpage.mtab { max-width: 640px; padding: 0 0 120px; }
.app.tab .mtab .mhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 0 0; }
.app.tab .mtab .mhead h1 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; max-width: none; }
.app.tab .mtab .mhead p { margin: 6px 0 0; color: var(--ink2); font-size: 16px; }
.app.tab .mtab .mtrial { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; background: #e8f0fe; color: #0b57d0; font-size: 13px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.app.tab .mtab .mtrial svg.i { width: 15px; height: 15px; }
.app.tab .mtab .cb.pers { order: 0; flex: none; width: auto; height: 44px; min-height: 44px; margin: 0; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 22px; background: var(--fill); font-size: 16px; font-weight: 500; }
.app.tab .mtab .mmode { width: 100%; margin: 28px 0 0; padding: 14px 16px; border-radius: 14px; background: #f6f6f6; }
.app.tab .mtab .mmode .rt { font-size: 15px; font-weight: 500; }
.app.tab .mtab .mmode .rt small { font-size: 14px; }
.app.tab .mtab .mlist { order: 0; display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); column-gap: 36px; margin: 22px 0 0; padding: 0; }
.app.tab .mtab .mlist .row.mr { display: flex; align-items: center; gap: 14px; min-height: 70px; padding: 0; border: 0; border-bottom: 1px solid var(--div); background: none; text-align: left; }
.app.tab .mtab .mlist .row.mr .lead { display: grid; place-items: center; width: 30px; height: 30px; }
.app.tab .mtab .mlist .row.mr .lead svg.i { width: 28px; height: 28px; }
.app.tab .mtab .mlist .row.mr .rt { flex: 1; font-size: 18px; font-weight: 500; }
.app.tab .mtab .mcnt { flex: none; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: #e8f0fe; color: #0b57d0; font-size: 13px; line-height: 26px; font-weight: 600; text-align: center; }
.app.tab .mtab .mout { order: 0; display: inline-block; align-self: flex-start; width: auto; height: auto; min-height: 44px; margin: 22px 0 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 18px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.app.tab .mtab .mver { margin-top: 44px; color: var(--ink2); font-size: 18px; }
.app.tab .mtab .mver small { display: block; margin-top: 4px; color: var(--ink); font-size: 15px; }
.app.tab .mtab .mlist .row.mr::after { display: none; }

/* v42 — Cambiar de modo en el iPad (IMG_2001): diálogo centrado con asa arriba, «Ajustes de iPad» primero. */
.ov-bg.center .ov.mdmodes { position: relative; max-width: 520px; overflow: visible; border-radius: 20px; background: var(--paper); box-shadow: none; }
.ov.mdmodes > .grab { position: absolute; top: -16px; left: 50%; display: block; width: 56px; height: 5px; margin: 0 0 0 -28px; border-radius: 3px; background: #d5d7d9; }
.ov.mdmodes .msheet { padding: 22px 20px 20px; border-radius: 20px; }
.ov.mdmodes .msh { margin-bottom: 14px; }
.ov.mdmodes .msh h1 { font-size: 24px; font-weight: 700; }
.ov.mdmodes .msh .cb.pri { background: var(--ink); color: #fff; }
.ov.mdmodes .row.mopt { padding: 14px 0; gap: 14px; }
.ov.mdmodes .row.mopt .lead { margin-top: 6px; }
.ov.mdmodes .row.mopt .rt { font-size: 17px; font-weight: 600; }
.ov.mdmodes .row.mopt .rt small { font-size: 13.5px; font-weight: 400; }
.ov.mdmodes .list { margin: 0; }

/* v43 — acceso al lector arriba a la derecha del cobro (Square) y «Cerrar sesión» centrado en Safari. */
.hwbar { flex: none; display: flex; justify-content: flex-end; padding: 10px var(--pad) 0; }
.hwchip { display: flex; align-items: center; justify-content: center; gap: 2px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--fill); color: var(--ink); }
.hwchip svg { width: 20px; height: 20px; }
.app.phone .hwbar + .segw { padding-top: 8px; }
.app.phone .cb.sec.pill.mout { display: flex; align-items: center; justify-content: center; }

/* v44 — monto del cobro más grande, como Square; baja de tamaño cuando la cifra crece. */
.app.phone .kp-val.ks1 { font-size: 88px; }
.app.phone .kp-val.ks2 { font-size: 68px; }
.app.phone .kp-val.ks3 { font-size: 52px; }
.app.tab .kp-val.ks1 { font-size: 84px; }
.app.tab .kp-val.ks2 { font-size: 68px; }
.app.tab .kp-val.ks3 { font-size: 54px; }

/* v44 — página Personal: «+» a la derecha del título y textos con el margen de la lista. */
.perpg .flph .cir { margin-left: auto; }
.perpg .flp { margin: 8px 0 12px; padding: 0 var(--pad); }

/* v45 — acceso al lector como Square: ícono de documento y círculo oscuro con flecha. */
.hwbar { align-items: center; gap: 10px; }
.hwdoc { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: var(--ink); }
.hwdoc svg { width: 26px; height: 26px; }
.hwchip { width: 36px; padding: 0; background: #111; color: #fff; }
.hwchip svg { width: 22px; height: 22px; }

/* v46 · Personal (Square i2020–i2035): lista y ficha, formulario, puestos, pago, permisos, seguridad, ubicación y filtro. */
.stfsr { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.stfsr .flsearch { flex: 1; margin: 0; }
.stfsr .cir { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--sec); }
.stfsr .cir.pri { background: var(--ink); color: #fff; }
.stfgrp { margin: 14px 0 0; padding: 0 0 6px; border-bottom: 1px solid var(--row-div); color: var(--ink); font-size: 14px; font-weight: 600; }
.stflist .row.stfrow { gap: 12px; padding: 10px 8px; min-height: 56px; border-radius: 8px; border-bottom: 1px solid var(--row-div); text-align: left; }
.md-personal .md-l .row[aria-current="page"] { background: var(--fill); border-bottom-color: transparent; }
.stfav { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; color: var(--ink2); }
.stfav svg { width: 22px; height: 22px; }
.stfrow .rt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stfempty p { margin: -6px 0 0; font-size: 14px; }
.mdstf { padding: 0 var(--pad) 40px; }
.stfdet, .mdstf { max-width: 620px; }
.stfsec { margin: 22px 0 6px; font-size: 16px; font-weight: 700; }
.stfkv { display: flex; gap: 16px; min-height: 44px; align-items: center; border-bottom: 1px solid var(--row-div); font-size: 14px; }
.stfkv span { flex: 0 0 42%; color: var(--ink); font-weight: 500; }
.stfkv b { flex: 1; min-width: 0; font-weight: 400; color: var(--ink); overflow-wrap: anywhere; }
.stf2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; align-items: start; }
.stf2 .flf { margin: 0; }
.stf2 .flf svg { width: 18px; height: 18px; color: var(--gray); flex: none; }
.stf2 .flf input:disabled { color: var(--ink2); }
.stf2 .flf:has(input:disabled) { background: var(--sec); }
.stfintro { margin-top: 0; }
.stfinfo { display: flex; gap: 10px; margin: 0 0 14px; padding: 12px; border-radius: 8px; background: var(--sec); font-size: 13px; line-height: 1.4; color: var(--ink); }
.stfinfo svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.stfr { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 0; text-align: left; font-size: 14px; }
.stfr > span { flex: 1; font-weight: 600; }
.stfr em { max-width: 55%; font-style: normal; color: var(--ink2); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stfr em.ph { color: var(--gray); }
.stfr > svg.i { width: 18px; height: 18px; color: var(--gray); flex: none; }
.stfr.dis { opacity: .5; pointer-events: none; }
.stfpill { display: block; width: 100%; min-height: 44px; margin: 12px 0; border-radius: 999px; background: var(--sec); color: var(--ink); font-size: 14px; font-weight: 500; text-align: center; }
.stfpill.crit { color: var(--crit); }
.stfpill:disabled { opacity: .4; }
.stfjob { margin-top: 4px; }
.stfcon { margin: 28px 0 10px; font-size: 24px; font-weight: 400; text-align: center; }
.stflks { display: flex; flex-direction: column; gap: 6px; align-items: center; color: #006aff; font-size: 13px; }
.flc .flp u[data-x] { cursor: pointer; }
/* Diálogos centrados: Crear un puesto, Pago por hora, Cambios no guardados, Filtro. */
.stfdlg .flc { padding: 8px 16px 20px; }
.stfdlg .flt { margin: 4px 0 12px; font-size: 20px; }
.stfdisc, .stffil { padding: 20px; }
.stfdisc h2, .stffil h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.stfdisc p { margin: 0 0 16px; font-size: 14px; color: var(--ink2); }
.stfbtns { display: flex; gap: 10px; }
.stfbtns .cb { flex: 1; min-height: 44px; margin: 0; }
.stfh { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.stfh h2 { flex: 1; margin: 0; }
.stfh .cb { min-height: 40px; padding: 0 16px; }
.stfamt { margin: 0 0 12px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 8px; }
.stfamt small { display: block; font-size: 12px; color: var(--ink2); }
.stfamt b { font-size: 18px; font-weight: 500; }
.stfkp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stfkp button { min-height: 52px; border-radius: 8px; background: var(--sec); font-size: 22px; font-weight: 500; display: grid; place-items: center; }
.stfkp .z { grid-column: 1 / 3; }
.stfkp svg { width: 26px; height: 26px; }
.stfcodew .flc { display: flex; flex-direction: column; align-items: center; padding-top: 36px; }
.stfcp { margin: 0 0 14px; font-size: 14px; font-weight: 600; }
.stfdots { display: flex; gap: 14px; margin-bottom: 28px; }
.stfdots i { width: 8px; height: 8px; border-radius: 50%; background: #cfd2d4; }
.stfdots i.on { background: var(--ink); }
.stfck { display: grid; grid-template-columns: repeat(3, 72px); gap: 16px; }
.stfck button { height: 72px; border-radius: 50%; background: var(--sec); font-size: 24px; font-weight: 500; display: grid; place-items: center; }
.stfck .z { grid-column: 1 / 3; width: auto; border-radius: 36px; }
.stfck svg { width: 28px; height: 28px; }
@media (max-width: 560px) { .stf2 { grid-template-columns: 1fr; } .stfkv span { flex-basis: 40%; } }
.pg-h .cir.pri { background: var(--ink); color: #fff; }
.pg-h .cir.pri svg { color: #fff; stroke: #fff; }
.tab-ov .fl-sh:has(.stffil) { top: auto; bottom: 28px; transform: translateX(-50%); width: min(420px, 92vw); }