/* CAJA-MARCO. Lo que rodea a la Caja en AdsComer Local: Entrar, Inicio, Sincronización y Revisión (maqueta
   docs/maquetas/caja-marco.html). El mismo encabezado de la Caja, sin menú lateral; colores del tema (--mud-palette-*),
   escala de un dedo (48 px) y lenguaje de tienda. Todo cuelga de .marco: la página puede vivir también dentro del layout
   del restaurante (con OpsApi), y así no toca lo de allá. El botón se llama .boton porque Bootstrap ya tiene .btn. */
.marco {
    --bg: var(--mud-palette-background); --surface: var(--mud-palette-surface); --surface-2: var(--mud-palette-background-gray);
    --line: var(--mud-palette-lines-default); --fg: var(--mud-palette-text-primary); --fg-2: var(--mud-palette-text-secondary);
    --fg-3: var(--mud-palette-text-disabled); --accent: var(--mud-palette-primary); --on-accent: var(--mud-palette-primary-text);
    --ink: var(--mud-palette-appbar-background); --on-ink: var(--mud-palette-appbar-text);
    --band: color-mix(in srgb, var(--accent) 8%, var(--surface));
    --ok: var(--mud-palette-success); --warn: var(--mud-palette-warning); --crit: var(--mud-palette-error);
    --ok-soft: color-mix(in srgb, var(--ok) 13%, var(--surface)); --warn-soft: color-mix(in srgb, var(--warn) 14%, var(--surface));
    --crit-soft: color-mix(in srgb, var(--crit) 12%, var(--surface));
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --r: 10px; --toque: 48px;
    background: var(--bg); color: var(--fg); font-size: 16px; line-height: 1.45;
}
.marco :where(button, input) { font: inherit; color: inherit; }
.marco :where(button) { cursor: pointer; }
.marco button[disabled] { opacity: .4; cursor: not-allowed; }
.marco :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* El router enfoca el título al navegar (FocusOnNavigate, para el lector de pantalla); no es algo que se toque. */
.marco h1:focus { outline: none; }
.marco :where(h1, h2, h3, p) { margin: 0; }
.marco .num { font-variant-numeric: tabular-nums; }

/* El marco ocupa la pantalla entera: encabezado de 60 px y el cuerpo con su propio desplazamiento, como la Caja. */
.marco.pantalla { position: fixed; inset: 0; display: grid; grid-template-rows: 60px minmax(0, 1fr); }

/* El encabezado, el mismo de la Caja: negocio y tablet, las tres partes, lo que falta por enviar, la red y quién. */
.marco .cab { display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--ink); color: var(--on-ink); }
.marco .cab .negocio { min-width: 0; line-height: 1.15; }
.marco .cab .negocio b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marco .cab .negocio small { font-size: 12.5px; opacity: .75; }
.marco .cab .sp { flex: 1; }
.marco .partes { display: inline-flex; gap: 2px; }
.marco .partes a { min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 15px; font-weight: 600; opacity: .8; display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.marco .partes a[aria-current="page"] { background: color-mix(in srgb, var(--on-ink) 16%, transparent); opacity: 1; }
.marco .cuenta { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--warn); color: var(--mud-palette-surface); font-size: 12px; font-weight: 700; white-space: nowrap; }
.marco .cuenta.grande-c { height: 32px; padding: 0 12px; font-size: 13px; }
/* MudBlazor trae .red como color de fondo (rojo): aquí se pone siempre el de la red. */
.marco .red { background: transparent; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 99px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.marco .red::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.marco .cab .red.en-linea { background: color-mix(in srgb, var(--ok) 25%, transparent); color: color-mix(in srgb, var(--ok) 40%, var(--mud-palette-surface)); }
.marco .cab .red.sin-red { background: color-mix(in srgb, var(--warn) 30%, transparent); color: color-mix(in srgb, var(--warn) 40%, var(--mud-palette-surface)); }
.marco .quien { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; white-space: nowrap; }
.marco .quien i { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--on-ink) 18%, transparent); font-style: normal; font-weight: 700; }
.marco .salir { min-height: 44px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--on-ink) 30%, transparent); border-radius: var(--r); background: none; color: inherit; font-weight: 600; }

.marco .cuerpo { overflow: auto; padding: 24px 28px; }
.marco .titulo { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.marco .titulo h1 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.marco .titulo p { color: var(--fg-2); font-size: 15px; margin-top: 2px; }
.marco .boton { min-height: var(--toque); padding: 0 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--fg); }
.marco .boton.prim { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.marco .boton.quieto { background: none; }
.marco .tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.marco .tarjeta h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); font-weight: 700; margin-bottom: 10px; }
.marco .grande { font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.marco .nota { color: var(--fg-2); font-size: 14.5px; }
.marco .aviso { margin-bottom: 14px; padding: 10px 14px; border-radius: var(--r); font-weight: 600; font-size: 14.5px; background: var(--ok-soft); color: var(--fg); }
.marco .aviso.malo { background: var(--crit-soft); color: var(--crit); }
.marco .filas { display: grid; }
.marco .fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-top: 1px solid var(--line); font-size: 15px; }
.marco .fila:first-child { border-top: 0; }
.marco .chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.marco .chip.ok { background: var(--ok-soft); color: var(--ok); }
.marco .chip.warn { background: var(--warn-soft); color: var(--warn); }
.marco .chip.crit { background: var(--crit-soft); color: var(--crit); }
.marco .chip.neutro { background: var(--surface-2); color: var(--fg-2); }

/* Entrar: la banda de la barra arriba y la tarjeta encima, como el primer vistazo de la Caja. */
.marco.entrar { position: fixed; inset: 0; display: grid; place-items: center; overflow: auto; background: linear-gradient(var(--ink) 0 46%, var(--bg) 46%); }
.marco .marca { position: absolute; top: 56px; left: 0; right: 0; text-align: center; color: var(--on-ink); }
.marco .marca b { display: block; font-size: 30px; letter-spacing: -.02em; }
.marco .marca span { opacity: .75; font-size: 15px; }
.marco .acceso { width: min(440px, calc(100vw - 32px)); margin-top: 90px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 25%, transparent); display: grid; gap: 16px; }
.marco .acceso h1 { font-size: 22px; font-weight: 700; }
.marco .campo { display: grid; gap: 6px; }
.marco .campo label { font-size: 13px; font-weight: 700; color: var(--fg-2); }
.marco .campo input { min-height: var(--toque); border: 1px solid var(--line); border-radius: var(--r); padding: 0 14px; background: var(--surface); font-size: 16px; }
.marco .campo input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.marco .error { background: var(--crit-soft); color: var(--crit); border-radius: var(--r); padding: 10px 14px; font-weight: 600; font-size: 14.5px; }
.marco .advertencia { background: var(--warn-soft); color: var(--fg); border-radius: var(--r); padding: 10px 14px; font-weight: 600; font-size: 14.5px; }
.marco .duenio { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--fg-2); font-size: 13.5px; border-top: 1px solid var(--line); padding-top: 14px; }
.marco .duenio .red { min-height: 28px; font-size: 12.5px; }
.marco .duenio .red.en-linea { background: var(--ok-soft); color: var(--ok); }
.marco .duenio .red.sin-red { background: var(--warn-soft); color: var(--warn); }

/* Inicio: tres tarjetas que se tocan, cada una con lo que hay que saber de su parte. */
.marco .saludo { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.marco .tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.marco .ir { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; text-align: left; min-height: 330px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 22px; color: var(--fg); }
.marco .ir:hover { border-color: var(--accent); }
.marco .ir .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--band); color: var(--accent); display: grid; place-items: center; }
.marco .ir h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.marco .ir .que { color: var(--fg-2); font-size: 15px; display: grid; gap: 6px; align-content: start; }
.marco .ir .que b { color: var(--fg); }
.marco .ir .boton { width: 100%; }
.marco .ir.principal { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px var(--band); }

/* Sincronización: lo que falta por enviar manda; el catálogo al lado; la tablet abajo; lo técnico, cerrado. */
.marco .dos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.marco .por-enviar-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.marco .pendiente { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; min-height: 56px; border-top: 1px solid var(--line); font-size: 15px; }
.marco .pendiente .folio { font-family: var(--mono); font-size: 13.5px; color: var(--fg-2); }
.marco .vacio { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 26px 10px; color: var(--fg-2); }
.marco .vacio .ico { width: 52px; height: 52px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; }
.marco .vacio b { color: var(--fg); font-size: 17px; }
.marco .cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 14px; }
.marco .cifra { background: var(--surface-2); border-radius: var(--r); padding: 10px 12px; }
.marco .cifra b { display: block; font-size: 24px; }
.marco .cifra small { color: var(--fg-2); font-size: 13px; }
.marco .tablet-de { margin-top: 18px; }
.marco .soporte { margin-top: 18px; border: 1px dashed var(--line); border-radius: 14px; background: none; }
.marco .soporte summary { min-height: var(--toque); display: flex; align-items: center; gap: 10px; padding: 0 20px; font-weight: 600; color: var(--fg-2); cursor: pointer; }
.marco .soporte .tec { padding: 0 20px 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; font-size: 13.5px; color: var(--fg-2); }
.marco .soporte .tec b { color: var(--fg); }
.marco .soporte code { font-family: var(--mono); font-size: 12.5px; }

/* Revisión: cada documento detenido, con lo que dijo Adscomer y lo que se puede hacer. */
.marco .detenido { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.marco .detenido:first-child { border-top: 0; padding-top: 0; }
.marco .detenido .doc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 16px; }
.marco .detenido .doc b { font-size: 17px; }
.marco .detenido .dijo { grid-column: 1; background: var(--crit-soft); border-radius: var(--r); padding: 10px 14px; font-size: 14.5px; }
.marco .detenido .dijo em { font-style: normal; font-weight: 700; color: var(--crit); }
.marco .detenido .dijo ul { margin: 6px 0 0 18px; padding: 0; }
.marco .detenido .acc { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 8px; min-width: 180px; }
.marco .aclara { margin-top: 14px; color: var(--fg-2); font-size: 14px; }

/* Una tablet vertical o un teléfono: una columna, y el encabezado deja lo de menos. */
@media (max-width: 900px) {
    .marco .tres, .marco .dos, .marco .soporte .tec { grid-template-columns: minmax(0, 1fr); }
    .marco .ir { min-height: 0; }
    .marco .cuerpo { padding: 16px; }
    .marco .cab .quien span, .marco .cab .cuenta.grande-c { display: none; }
    .marco .partes a { padding: 0 10px; }
    .marco .detenido { grid-template-columns: minmax(0, 1fr); }
    .marco .detenido .acc { grid-column: 1; grid-row: auto; }
}