/* Backoffice: the operator's filing cabinet. Every business is an expediente (manila folder).
   Screen prefix py-bo-. A different room from the businesses' app, on purpose. */
.py-frame.py-bo {
  --py-steel:   light-dark(oklch(0.905 0.008 250), oklch(0.20 0.012 255));
  --py-steel-2: light-dark(oklch(0.86 0.01 250), oklch(0.25 0.014 255));
  --py-manila:  light-dark(oklch(0.925 0.055 88), oklch(0.32 0.035 85));
  --py-manila-2:light-dark(oklch(0.885 0.065 86), oklch(0.36 0.04 85));
  --py-manila-ink: light-dark(oklch(0.38 0.05 70), oklch(0.88 0.05 88));
  background: var(--py-steel);
}
.py-frame.py-bo.py-bo-app { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; align-content: start; }
.py-frame.py-bo .py-bo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--py-2) var(--py-5); padding: var(--py-3) var(--py-5); background: var(--py-ink); color: var(--py-paper); }
.py-frame.py-bo .py-bo-brand { font-family: var(--py-f-display); font-stretch: 125%; font-weight: 850; font-size: var(--py-s-1); text-decoration: none; }
.py-frame.py-bo .py-bo-brand small { font-family: var(--py-f-ui); font-stretch: 100%; font-weight: 500; font-size: var(--py-s--1); margin-inline-start: var(--py-2); opacity: 0.8; }
.py-frame.py-bo .py-bo-nav { display: flex; flex-wrap: wrap; gap: var(--py-1); }
.py-frame.py-bo .py-bo-nav a { text-decoration: none; padding: 0.4em 0.85em; border-radius: var(--py-r-ctl); font-weight: 600; font-size: var(--py-s--1); color: color-mix(in oklch, var(--py-paper) 82%, transparent); }
.py-frame.py-bo .py-bo-nav a:hover { background: color-mix(in oklch, var(--py-paper) 12%, transparent); color: var(--py-paper); }
.py-frame.py-bo .py-bo-nav a[aria-current="page"] { background: var(--py-paper); color: var(--py-ink); }
.py-frame.py-bo .py-bo-me { margin-inline-start: auto; font-size: var(--py-s--1); text-align: end; line-height: 1.3; }
.py-frame.py-bo .py-bo-me b { display: block; font-size: var(--py-s-0); }
.py-frame.py-bo .py-bo-main { padding: var(--py-5) clamp(var(--py-4), 3vw, var(--py-7)) var(--py-8); display: grid; gap: var(--py-5); align-content: start; }

/* The folder */
.py-frame.py-bo .py-folder { position: relative; padding-top: 2.4rem; }
.py-frame.py-bo .py-folder-tab {
  position: absolute; inset: 0 auto auto 1.5rem; height: 2.5rem; max-width: calc(100% - 3rem);
  display: flex; align-items: center; gap: var(--py-3);
  padding: 0 var(--py-5); border-radius: 10px 10px 0 0;
  background: var(--py-manila); color: var(--py-manila-ink);
  font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.py-frame.py-bo .py-folder-tab .py-tag { font-weight: 650; }
.py-frame.py-bo .py-folder-body { background: var(--py-manila); border-radius: 4px 10px 10px 10px; padding: var(--py-5); box-shadow: 0 18px 32px -26px oklch(0.2 0.03 70 / 0.6); display: grid; gap: var(--py-5); }

/* Dividers: the steps of an expediente, each a link (hard case 6) */
.py-frame.py-bo .py-bo-steps { display: flex; flex-wrap: wrap; gap: var(--py-1); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.py-frame.py-bo .py-bo-steps a {
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.45em 0.9em; border-radius: 8px 8px 0 0;
  background: var(--py-manila-2); color: var(--py-manila-ink); text-decoration: none; font-weight: 650; font-size: var(--py-s--1);
  border-bottom: 3px solid transparent;
}
.py-frame.py-bo .py-bo-steps a::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; border: 1.5px solid currentColor; font-size: 0.85em; }
.py-frame.py-bo .py-bo-steps a[aria-current="step"] { background: var(--py-paper); color: var(--py-ink); border-bottom-color: var(--py-folio); }
.py-frame.py-bo .py-bo-steps .py-is-done a::before { content: "✓"; background: var(--py-manila-ink); color: var(--py-manila); border-color: var(--py-manila-ink); }
.py-frame.py-bo .py-bo-save { display: inline-flex; align-items: center; gap: var(--py-2); font-size: var(--py-s--1); color: var(--py-manila-ink); }

.py-frame.py-bo .py-bo-sheet { background: var(--py-paper); border-radius: var(--py-r-sheet); padding: var(--py-5); display: grid; gap: var(--py-4); }
.py-frame.py-bo .py-bo-sheet h2 { font-family: var(--py-f-display); font-stretch: 108%; font-weight: 760; font-size: var(--py-s-2); }
.py-frame.py-bo .py-bo-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: var(--py-5); align-items: start; }

/* Business type → its form */
.py-frame.py-bo .py-bo-giro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--py-4); align-items: center; padding: var(--py-4); border-radius: var(--py-r-ctl); background: var(--py-paper-2); }
.py-frame.py-bo .py-mini-remision { width: 4.5rem; aspect-ratio: 3 / 4; background: var(--py-paper); border-radius: 2px; box-shadow: 0 1px 0 var(--py-rule), 0 8px 14px -10px oklch(0.2 0.05 262 / 0.6); display: grid; grid-template-columns: 1.1rem 1fr; overflow: hidden; }
.py-frame.py-bo .py-mini-remision i { border-inline-end: 1.5px dashed var(--py-rule); background: var(--py-paper-2); position: relative; }
.py-frame.py-bo .py-mini-remision i::after { content: "Nº"; position: absolute; inset: 0.25rem auto auto 0.15rem; font-size: 0.45rem; font-weight: 800; color: var(--py-folio); }
.py-frame.py-bo .py-mini-remision b { margin: 0.35rem; background: repeating-linear-gradient(to bottom, var(--py-print) 0 2px, transparent 2px 5px, var(--py-ruling) 5px 6px, transparent 6px 9px); opacity: 0.8; }

.py-frame.py-bo .py-mods { display: grid; gap: var(--py-4); }
.py-frame.py-bo .py-mods h3 { font-size: var(--py-s--1); font-weight: 700; color: var(--py-print); }
.py-frame.py-bo .py-mods ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-1); }
.py-frame.py-bo .py-mods li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--py-3); align-items: center; padding: var(--py-2) var(--py-3); border-radius: var(--py-r-ctl); border: 1px solid var(--py-ruling); }
.py-frame.py-bo .py-mods li b { font-weight: 650; }
.py-frame.py-bo .py-mods li span.py-hint { display: block; }
.py-frame.py-bo .py-mods .py-is-locked { background: var(--py-paper-2); }
.py-frame.py-bo .py-lock { display: inline-flex; gap: 0.35em; align-items: center; font-size: var(--py-s--1); color: var(--py-ink-soft); font-weight: 600; }

.py-frame.py-bo .py-bo-summary { background: var(--py-paper); border-radius: var(--py-r-sheet); padding: var(--py-4) var(--py-5); display: grid; gap: var(--py-3); position: sticky; top: var(--py-4); }
.py-frame.py-bo .py-bo-summary h2 { font-size: var(--py-s-0); font-weight: 720; }
.py-frame.py-bo .py-bo-summary dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--py-2) var(--py-3); font-size: var(--py-s--1); }
.py-frame.py-bo .py-bo-summary dt { color: var(--py-ink-soft); }
.py-frame.py-bo .py-bo-summary dd { margin: 0; font-weight: 600; }
.py-frame.py-bo .py-bo-nextprev { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--py-3); }

/* Businesses: the drawer */
.py-frame.py-bo .py-drawer { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-2) var(--py-4); grid-template-columns: minmax(14rem, 1.6fr) 8rem minmax(8rem, 1fr) 7rem minmax(9rem, 1fr) auto; }
.py-frame.py-bo .py-drawer > li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; gap: var(--py-2) var(--py-4); align-items: center; padding: var(--py-3) var(--py-4); background: var(--py-manila); border-radius: 4px 10px 10px 4px; border-inline-start: 6px solid var(--py-manila-2); }
.py-frame.py-bo .py-drawer > li.py-is-susp { border-inline-start-color: var(--py-danger); }
.py-frame.py-bo .py-drawer > li.py-is-trial { border-inline-start-color: var(--py-warn); }
.py-frame.py-bo .py-drawer > li.py-bo-head { background: none; border-inline-start-color: transparent; padding-block: 0; font-size: var(--py-s--1); color: var(--py-ink-soft); font-weight: 650; }
.py-frame.py-bo .py-drawer b { display: block; font-weight: 700; }
.py-frame.py-bo .py-drawer small { color: var(--py-manila-ink); font-size: var(--py-s--1); }
.py-frame.py-bo .py-drawer .py-btn { min-height: 2.25rem; }

.py-frame.py-bo .py-bo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--py-4); align-items: start; }
.py-frame.py-bo .py-bo-card { background: var(--py-paper); border-radius: var(--py-r-sheet); padding: var(--py-4) var(--py-5); display: grid; gap: var(--py-3); }
.py-frame.py-bo .py-bo-card h2 { font-size: var(--py-s-1); font-weight: 720; display: flex; justify-content: space-between; align-items: baseline; gap: var(--py-2); }
.py-frame.py-bo .py-bo-card h2 small { font-size: var(--py-s--1); font-weight: 500; color: var(--py-ink-soft); }
.py-frame.py-bo .py-bo-kv { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--py-3); }
.py-frame.py-bo .py-bo-kv div { display: grid; gap: 2px; }
.py-frame.py-bo .py-bo-kv dt { font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-frame.py-bo .py-bo-kv dd { margin: 0; font-family: var(--py-f-display); font-stretch: 72%; font-weight: 750; font-size: var(--py-s-3); line-height: 1; }
.py-frame.py-bo .py-bo-kv .py-is-bad dd { color: var(--py-danger); }
.py-frame.py-bo .py-meter { display: grid; gap: var(--py-1); }
.py-frame.py-bo .py-meter svg { display: block; }
.py-frame.py-bo .py-meter-trk { fill: light-dark(#c7dbf4, #1d3557); }
.py-frame.py-bo .py-meter-val { fill: light-dark(#256abf, #86b6ef); }
.py-frame.py-bo .py-meter p { display: flex; justify-content: space-between; font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-frame.py-bo .py-team { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-2); }
.py-frame.py-bo .py-team li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--py-3); align-items: baseline; padding-bottom: var(--py-2); border-bottom: 1px solid var(--py-ruling); }
.py-frame.py-bo .py-team span { font-size: var(--py-s--1); color: var(--py-ink-soft); text-align: end; }


@media (max-width: 68rem) {
  .py-frame.py-bo .py-bo-cols { grid-template-columns: minmax(0, 1fr); }
  .py-frame.py-bo .py-bo-summary { position: static; }
  .py-frame.py-bo .py-drawer { grid-template-columns: minmax(0, 1fr); }
  .py-frame.py-bo .py-drawer > li { grid-template-columns: minmax(0, 1fr) auto; }
  .py-frame.py-bo .py-drawer > li > :nth-child(n+2):not(:last-child) { grid-column: 1; }
  .py-frame.py-bo .py-drawer > li.py-bo-head { display: none; }
}
@media (max-width: 47.99rem) { .py-frame.py-bo .py-bo-bar { padding: var(--py-2) var(--py-3); } .py-frame.py-bo .py-bo-me { display: none; } .py-frame.py-bo .py-folder-body { padding: var(--py-3); } .py-frame.py-bo .py-bo-sheet { padding: var(--py-4); } .py-frame.py-bo .py-folder-tab { inset-inline-start: 0.75rem; padding-inline: var(--py-3); } .py-frame.py-bo .py-bo-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.py-frame.py-bo .py-drawer .py-tag { justify-self: start; }
.py-frame.py-bo .py-meter p { max-width: none; }

@media (max-width: 47.99rem) { .py-frame.py-bo .py-team li { grid-template-columns: minmax(0, 1fr); } .py-frame.py-bo .py-team span { text-align: start; } }

/* ---------- What the product draws beyond the design ---------- */

/* The drawer with the columns the product draws (the name is the link to the file, so no
   *Abrir expediente*; a closed business's folder edged in the rule), the folder's tab as the page's
   heading, the sheets of a file stacked, a sheet alone on the steel (sign-in, links), and
   the bar's *Salir*. */
.py-frame.py-bo .py-bo-drawer { grid-template-columns: minmax(14rem, 1.6fr) 8rem minmax(8rem, 1fr) 7rem minmax(11rem, 1fr); }
@media (max-width: 68rem) { .py-frame.py-bo .py-bo-drawer { grid-template-columns: minmax(0, 1fr); } }
.py-frame.py-bo .py-drawer > li.py-is-closed { border-inline-start-color: var(--py-rule); }
.py-frame.py-bo .py-bo-charge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--py-1) var(--py-2); }
.py-frame.py-bo .py-bo-folder-name { font-weight: 700; }
.py-frame.py-bo .py-folder-name { font: inherit; }
.py-frame.py-bo .py-bo-sheets { display: grid; gap: var(--py-4); align-content: start; }
.py-frame.py-bo .py-bo-sheet > p, .py-frame.py-bo .py-bo-card > p { max-width: none; }
.py-frame.py-bo .py-bo-sheet h3 { font-size: var(--py-s-0); font-weight: 720; }
.py-frame.py-bo .py-bo-list { margin: 0; padding-inline-start: var(--py-5); display: grid; gap: var(--py-1); }
.py-frame.py-bo .py-bo-summary .py-bo-list { font-size: var(--py-s--1); }
.py-frame.py-bo .py-bo-summary > p { font-size: var(--py-s--1); }
.py-frame.py-bo .py-bo-summary h3 { font-size: var(--py-s--1); font-weight: 700; color: var(--py-print); }
.py-frame.py-bo .py-bo-actions { display: flex; flex-wrap: wrap; gap: var(--py-2); }
.py-frame.py-bo .py-bo-form { display: grid; gap: var(--py-4); align-content: start; }
.py-frame.py-bo .py-bo-glass { display: grid; gap: var(--py-3); padding-top: var(--py-3); border-top: 1px solid var(--py-ruling); }
.py-frame.py-bo .py-bo-wide { overflow-x: auto; }
.py-frame.py-bo .py-bo-wide caption { text-align: start; font-weight: 720; padding-bottom: var(--py-2); }
.py-frame.py-bo .py-bo-qr { width: min(100%, 12rem); padding: var(--py-2); border-radius: 4px; box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--py-ink) 22%, transparent); }
.py-frame.py-bo .py-bo-qr .py-qr { width: 100%; height: auto; }
.py-frame.py-bo .py-bo-codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--py-2); }
.py-frame.py-bo .py-bo-codes li { padding: var(--py-2) var(--py-3); border: 1.5px dashed var(--py-rule); border-radius: var(--py-r-ctl); }
.py-frame.py-bo .py-bo-out .py-btn { color: inherit; border-color: color-mix(in oklch, var(--py-paper) 60%, transparent); }
.py-frame.py-bo .py-team > li { grid-template-columns: max-content minmax(0, 1fr); }
.py-frame.py-bo .py-bo-roles { grid-column: 1 / -1; display: grid; gap: var(--py-2); }
.py-frame.py-bo .py-bo-roles ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--py-2); }
.py-frame.py-bo .py-bo-roles li { display: inline-flex; align-items: center; gap: var(--py-1); border-bottom: 0; padding-bottom: 0; }
.py-frame.py-bo .py-bo-give { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--py-3); align-items: end; }
.py-frame.py-bo .py-bo-switches { border: 0; margin: 0; padding: 0; }
.py-frame.py-bo .py-bo-switches legend { padding: 0; margin-bottom: var(--py-2); }
.py-frame.py-bo .py-bo-switches ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-1); }
.py-frame.py-bo .py-bo-switches li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--py-3); align-items: center; padding: var(--py-1) var(--py-3); border-radius: var(--py-r-ctl); border: 1px solid var(--py-ruling); }
.py-frame.py-bo .py-bo-found { display: grid; gap: var(--py-3); }