/* TK-324: the Lite app on a phone (320–430 px) or a tablet. Escuadra and client.css draw the register; this file only adapts it to touch. */

.lite-loading { min-height: 100vh; display: grid; place-items: center; color: var(--text-2); font: 600 var(--t-17) / 1.4 "IBM Plex Sans", system-ui, sans-serif; }

/* TK-437: the environment band (TK-377) is fixed on top and Frame pads its content under it; the bar sits outside Frame, so it takes that
   padding instead and the register follows the bar. */
#lite-bar { padding-top: var(--env-strip-h, 0px); }
/* TK-572: Frame is 100vh tall; with the bar above it the page was taller than the screen and Cobrar fell under it. The register takes the
   height the bar leaves. */
body { display: flex; flex-direction: column; min-height: 100dvh; }
#app { flex: 1 1 auto; display: flex; flex-direction: column; }
#lite-bar ~ #app [data-keys-root] { padding-top: 0 !important; min-height: 0 !important; flex: 1 1 auto; }

/* The e-CF bar (LiteBar.razor): above the register's own status bar. */
.lite-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top));
  background: var(--surface-2); color: var(--text); border-bottom: 1px solid var(--card-border); font-size: var(--t-15, 15px); }
.lite-bar--warn { background: var(--warning-bg); color: var(--warning); border-bottom-color: currentColor; }
.lite-bar__text { flex: 1 1 140px; min-width: 0; } /* TK-441: at 320 px «Ver consumo» stays beside a short line */
/* TK-572: the plan's line as a button (it opens «Ver consumo»): it looks like the text it is. */
.lite-bar__open { flex: 1 1 140px; min-width: 0; min-height: var(--touch, 44px); padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.lite-bar__open .lite-bar__text { flex: 0 1 auto; }
.lite-bar__more { display: none; flex: none; } /* TK-572 (Diseño): on a phone, a › says the line opens the plan */
.lite-bar__action { min-height: var(--touch, 44px); padding: 0 14px; border: 1px solid currentColor; border-radius: var(--r-control, 6px); background: transparent;
  color: inherit; font: inherit; font-weight: 600; cursor: pointer; }

/* TK-441: «Ver consumo», the plan's caps for whoever manages the business. */
.lite-usage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lite-usage__row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.lite-usage__row strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lite-usage__track { height: 8px; margin-top: 6px; border-radius: 4px; background: var(--card-border); overflow: hidden; }
.lite-usage__fill { height: 100%; background: var(--brand); }
.lite-usage__fill--warn { background: var(--warning); }
.lite-usage__note { margin-top: 4px; color: var(--text-2); font-size: var(--t-13, 13px); }
.lite-usage__more { margin: 16px 0 0; color: var(--text-2); }

/* First run: the connection code and the certificate. */
.lite-start { align-items: center; justify-content: center; }
.lite-start__card { width: min(480px, 100%); gap: 20px; }
.lite-start__code { letter-spacing: .12em; text-align: center; font-variant-numeric: tabular-nums; }

/* Touch: no physical F-keys, so their keycaps are noise. TK-572 (Diseño, L1): the register's targets are 48 px under a finger; the small
   links of the status bar and the environment band keep their look and get a 48 px reach (a transparent layer around them). */
@media (pointer: coarse) {
  .esc-keycap { display: none; }
  .esc-key-bar button, .esc-chip { min-height: 48px; }
  .esc-status-bar__help, .esc-env-strip__link { position: relative; }
  .esc-status-bar__help::after, .esc-env-strip__link::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: max(100%, 48px);
    height: 48px; transform: translate(-50%, -50%); }
}

/* Phones, and a phone sideways (under 450 px tall: the bars take one row each, so the sale keeps the room). */
@media (max-width: 600px), (max-height: 449.98px) {
  .lite-bar__action { padding: 0 10px; }
  /* TK-572 (Diseño, P2): the plan's line in one row; the line itself opens «Ver consumo», and what tests do not count is said there. */
  .lite-bar__open--one-row .lite-bar__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the 80 % and 100 % notices wrap */
  .lite-bar__note, .lite-bar__action--wide { display: none; }
  .lite-bar__more { display: inline-flex; }
  .esc-status-bar { flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; font-size: var(--t-13, 13px); }
  .esc-status-bar__group { flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
  /* What a phone already shows or never needs: "Turno abierto", "En línea" (offline stays, amber) and the clock. */
  .esc-status-bar .muted:not([role]), .esc-status-bar__group:last-child > span:last-child { display: none; }
  .esc-page { padding: 12px; }
  .sale__scanner { font-size: var(--t-17, 17px); height: 48px; }
  /* TK-570 lays the sale out on a phone (client.css: the lines above the products, the total and Cobrar at the bottom, the keys sideways);
     Lite keeps only its narrower cards, so two fit side by side at 320 px. */
  .sale__tiles { grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); }
  /* A tall dialog (the receipt) scrolls its body; its buttons stay in view at the bottom. */
  .esc-dialog { width: 100%; max-height: calc(100dvh - 16px - var(--env-strip-h, 0px)); overflow: hidden; display: flex; flex-direction: column; }
  .esc-dialog__body { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .esc-dialog__footer { flex: none; padding: 12px; }
  .esc-dialog__footer > * { flex: 1 1 auto; justify-content: center; }
  .esc-overlay { padding: 8px; align-items: flex-end; }
}

/* TK-572 (Diseño, option C): a phone sideways (342–390 px tall) holds the scanner, the chosen line, the total and Cobrar at once. The plain
   «e-CF este mes» line goes (the 80 % and 100 % notices, the certificate and the pending invoices stay), the status bar keeps one row without
   the calm trial note (C12), and the total with Cobrar stays at the bottom of the screen; the customer and the lines scroll above it. */
@media (max-height: 449.98px), (max-width: 600px) { /* upright too: the bars took a third of the screen and the total covered the lines */
  .lite-bar:has(.lite-bar__open--one-row) { display: none; }
  .esc-status-bar .muted[role=status] { display: none; }
}
@media (max-height: 449.98px) {
  .esc-status-bar, .esc-status-bar__group { flex-wrap: nowrap; }
  .sale .sale__totals { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -4px 12px rgba(20, 24, 29, 0.12); }
}
/* The total and Cobrar side by side on every low phone (Diseño: 700 px tall or less, 320 × 640 too): the block is one Cobrar tall, so it does
   not cover the chosen line. */
@media (max-height: 700px) {
  .sale .sale__totals { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sale .sale__totals > * { flex: 1 1 0; min-width: 0; }
  .sale .sale__totals > button { flex: 1 1 auto; padding-inline: 12px; }
  body .sale .sale__totals .esc-money { font-size: var(--t-24) !important; } /* beside Cobrar, a 32 px total was cut */
  .sale .sale__totals > .esc-row:has(.esc-money) { flex: none; flex-direction: column; align-items: flex-start !important; gap: 0; } /* never cut; Cobrar takes the rest */
  .sale .sale__totals > .esc-row:not(:has(.esc-money)) { flex-basis: 100%; } /* Descuentos keeps its own row */
}

/* The receipt prints alone (Imprimir o guardar PDF): nothing of the register around it. */
@media print {
  body:has(.receipt) * { visibility: hidden; }
  body:has(.receipt) .receipt, body:has(.receipt) .receipt * { visibility: visible; }
  body:has(.receipt) .receipt { position: absolute; inset: 0 auto auto 0; border: 0; width: 80mm; }
  .lite-bar { display: none; }
}

/* Closing critique (18/10/2026): the certificate's file field on a phone. The browser's own button is small and grey; this one has the touch
   size and the brand's border, and the file name keeps the rest of the line. */
.lite-start input[type="file"] { min-height: var(--touch, 44px); padding: 4px; }
.lite-start input[type="file"]::file-selector-button { min-height: 36px; margin-right: 10px; padding: 0 14px; border: 1px solid var(--brand);
  border-radius: var(--r-control, 6px); background: transparent; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; }

/* Several businesses on one browser: the switch under «¿Quién entra?» and «Unir este dispositivo» (BusinessSwitch.razor). */
.lite-business { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; padding: 12px 16px; }
.lite-business .esc-button { min-height: 44px; }