/* La Saga App */

@font-face { font-family: "Archivo Narrow"; src: url("fuentes/archivo-narrow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo Narrow"; src: url("fuentes/archivo-narrow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Archivo Narrow"; src: url("fuentes/archivo-narrow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo Narrow"; src: url("fuentes/archivo-narrow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Titan One"; src: url("fuentes/titan-one-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --tinta: #0E0F11;
  --tinta-2: #1D1E22;
  --tinta-3: #2E2F35;
  --papel: #F7F6F4;
  --papel-2: #EFEEEA;
  --blanco: #FFFFFF;
  --texto: #0E0F11;
  --texto-2: #4A4C51;
  --texto-3: #66686D;
  --linea: #E3E1DC;
  --rojo: #C81E24;
  --rojo-fuerte: #A3171C;
  --rojo-tinte: #FBE8E8;
  --champan: #B08D57;
  --verde: #1A6A44;
  --verde-tinte: #E3F1E9;
  --ambar: #7A5200;
  --ambar-tinte: #FBEED0;
  --sobre-tinta: rgba(255, 255, 255, .74);
  --sobre-tinta-2: rgba(255, 255, 255, .56);

  --radio: 8px;
  --rapido: 120ms;
  --medio: 200ms;
  --salida: cubic-bezier(.16, 1, .3, 1);

  --fuente: "Archivo Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --titular: "Titan One", "Archivo Narrow", "Arial Narrow", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--tinta);
  color: var(--texto);
  font: 400 1.0625rem/1.4 var(--fuente);
  caret-color: var(--rojo);
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(200, 30, 36, .2); color: var(--texto); }

:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; border-radius: var(--radio); }
.riel :focus-visible, .acceso-marca :focus-visible { outline-color: var(--blanco); }

h1, h2, p { margin: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.logotipo { font-family: var(--titular); letter-spacing: .01em; line-height: 1; }
.descriptor { font-weight: 600; letter-spacing: .16em; line-height: 1; }

/* ---------- Acceso ---------- */

.acceso { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.acceso-marca { color: var(--blanco); padding: 56px; display: flex; flex-direction: column; justify-content: center; }
.acceso-marca .logotipo { font-size: 5.5rem; }
.acceso-marca .descriptor { font-size: 1.125rem; margin-top: 14px; color: var(--sobre-tinta); }
.acceso-lema { margin-top: 40px; max-width: 34ch; font-size: 1.25rem; color: var(--sobre-tinta); }
.acceso-form { background: var(--papel); margin: 8px 8px 8px 0; border-radius: var(--radio); padding: 56px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.acceso-form h1 { font: 400 2rem/1.1 var(--titular); }
.acceso-form p { max-width: 38ch; color: var(--texto-2); }
#boton-google { min-height: 44px; margin-top: 8px; }
@media (min-width: 1500px) { .acceso { max-width: 1320px; margin-inline: auto; } }
.acceso-error { color: var(--rojo-fuerte); background: var(--rojo-tinte); border-radius: var(--radio); padding: 12px 14px; font-weight: 500; }

/* ---------- Estructura ---------- */

.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100dvh; }
.cinta { display: none; }

.riel { display: flex; flex-direction: column; padding: 20px 12px 12px; color: var(--blanco); min-height: 0; }
.riel-marca { display: block; padding: 4px 12px 22px; text-decoration: none; }
.riel-marca .logotipo { display: block; font-size: 1.75rem; }
.riel-marca .descriptor { display: block; margin-top: 7px; font-size: .6875rem; color: var(--sobre-tinta-2); }

.nav { position: relative; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }
.nav a { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--radio); color: var(--sobre-tinta); text-decoration: none; font-weight: 500; transition: color var(--rapido), background-color var(--rapido); }
.nav a:hover { background: rgba(255, 255, 255, .08); color: var(--blanco); }
.nav a[aria-current="page"] { color: var(--blanco); background: transparent; font-weight: 600; }
.nav .nav-fin { margin-top: auto; }
.nav-marca { position: absolute; left: 0; top: 0; width: var(--w, 0); height: var(--h, 0); border-radius: var(--radio); background: var(--rojo); transform: translate(var(--x, 0), var(--y, 0)); transition: transform var(--medio) var(--salida), width var(--medio) var(--salida); }
.nav-marca.sin-animar { transition: none; }

.riel-pie { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 4px 0 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.riel-usuario { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.riel-nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riel-rol { font-size: .875rem; color: var(--sobre-tinta-2); }
.riel-salir { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--sobre-tinta); border-radius: var(--radio); cursor: pointer; transition: background-color var(--rapido), color var(--rapido), transform var(--rapido); }
.riel-salir:hover { background: rgba(255, 255, 255, .08); color: var(--blanco); }
.riel-salir:active { transform: scale(.94); }

.hoja { --tope: 1600px; background: var(--papel); border-radius: var(--radio); margin: 8px 8px 8px 0; overflow-y: auto; min-width: 0; scrollbar-width: thin; scrollbar-color: #C9C6BF transparent; }

.barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 20px max(32px, calc((100% - var(--tope)) / 2 + 32px)) 14px; background: var(--papel); transition: box-shadow var(--rapido); }
@media (min-width: 1500px) { .hoja:not(.amplia) .vista > * { max-width: 1116px; } }
.barra.pegada { box-shadow: 0 1px 0 var(--linea); }
.barra h1 { font: 400 1.75rem/1.1 var(--titular); margin-right: auto; }

.estado { display: flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 1rem; white-space: nowrap; }
.estado.atrasado { color: var(--rojo-fuerte); font-weight: 600; }
.estado.atrasado .dial-caja { stroke: var(--rojo); }

.dial { width: 28px; height: 28px; flex: none; }
.dial-caja { fill: var(--blanco); stroke: var(--champan); stroke-width: 2; }
.dial-indices { fill: none; stroke: var(--tinta); stroke-width: 1.3; stroke-linecap: round; }
.dial-mano { stroke: var(--rojo); stroke-width: 1.9; stroke-linecap: round; transform-origin: 12px 12px; transform: rotate(var(--giro, 0deg)); transition: transform 500ms var(--salida); }
.dial-eje { fill: var(--tinta); }
.dial.gira .dial-mano { animation: gira 800ms linear infinite; }
@keyframes gira { from { transform: rotate(var(--giro, 0deg)); } to { transform: rotate(calc(var(--giro, 0deg) + 360deg)); } }

.aviso { margin: 0 max(32px, calc((100% - var(--tope)) / 2 + 32px)) 8px; padding: 12px 14px; border-radius: var(--radio); background: var(--rojo-tinte); color: var(--rojo-fuerte); font-weight: 500; display: flex; align-items: center; gap: 12px; }
.aviso .btn { margin-left: auto; }

.vista { max-width: var(--tope); margin: 0 auto; padding: 8px 32px 56px; outline: none; }

/* ---------- Controles ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); color: var(--texto); font-weight: 600; font-size: 1rem; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--rapido), border-color var(--rapido), transform var(--rapido), opacity var(--rapido); }
.btn:hover { background: var(--papel-2); border-color: #D2CFC8; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn--primario { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.btn--primario:hover { background: var(--tinta-3); border-color: var(--tinta-3); }

.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.filtros { position: relative; display: flex; gap: 4px; padding: 4px; background: var(--papel-2); border-radius: var(--radio); }
.filtro-marca { position: absolute; left: 0; top: 0; width: var(--w, 0); height: var(--h, 0); border-radius: var(--radio); background: var(--tinta); transform: translate(var(--x, 0), var(--y, 0)); transition: transform var(--medio) var(--salida), width var(--medio) var(--salida); }
.filtro-marca.sin-animar { transition: none; }
.filtro { position: relative; z-index: 1; height: 32px; padding: 0 12px; border: 0; border-radius: var(--radio); background: transparent; color: var(--texto-2); font-weight: 600; font-size: 1rem; white-space: nowrap; cursor: pointer; transition: background-color var(--rapido), color var(--rapido), transform var(--rapido); }
.filtro:hover { color: var(--texto); background: rgba(14, 15, 17, .06); }
.filtro:active { transform: scale(.97); }
.filtro[aria-pressed="true"], .filtro[aria-pressed="true"]:hover { background: transparent; color: var(--blanco); }
.filtro small { font-size: .875rem; font-weight: 500; margin-left: 4px; font-variant-numeric: tabular-nums; }

.buscar { position: relative; flex: 1 1 240px; max-width: 360px; margin-left: auto; color: var(--texto-3); }
.buscar .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.buscar input { width: 100%; height: 40px; padding: 0 12px 0 38px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); color: var(--texto); transition: border-color var(--rapido), box-shadow var(--rapido); }
.buscar input::placeholder { color: var(--texto-3); opacity: 1; }
.buscar input:hover { border-color: #CFCCC4; }
.buscar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-left: 8px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0F11' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.buscar input:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }

.orden-movil { display: none; align-items: center; gap: 10px; flex: 1 1 100%; color: var(--texto-2); font-weight: 500; }
.orden-movil select { flex: 1; min-width: 0; height: 44px; padding: 0 10px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); color: var(--texto); font: inherit; font-weight: 600; }
.orden-movil select:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }

/* ---------- Paneles y tablas ---------- */

.panel { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.panel + .panel, .panel + .seccion, .seccion + .seccion { margin-top: 24px; }
.panel-cab { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px 0; }
.panel-cab h2, .seccion > h2 { font: 700 1.1875rem/1.2 var(--fuente); }
.panel-cab .lado { margin-left: auto; color: var(--texto-2); }
.panel-cuerpo { padding: 12px 20px 20px; }
.seccion > h2 { margin: 0 0 10px; }
.enlace { color: var(--texto); font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--texto-3); text-decoration-thickness: 1.5px; transition: text-decoration-color var(--rapido); }
.enlace:hover { text-decoration-color: var(--texto); }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { padding: 11px 16px; text-align: left; font-weight: 600; font-size: .9375rem; color: var(--texto-3); border-bottom: 1px solid var(--linea); white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--rapido); }
tbody tr:hover { background: #FBFAF8; }
.num { text-align: right; }
th.num .ordenar { flex-direction: row-reverse; }
.fuerte { font-weight: 700; }
.tenue { color: var(--texto-3); }
.menor { display: block; font-size: .9375rem; color: var(--texto-3); }
.menor .ico { width: 14px; height: 14px; vertical-align: -2px; margin: 0 2px; }
.negativo { color: var(--rojo-fuerte); font-weight: 600; }
tr.cancelado td { color: var(--texto-3); }

.ordenar { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.ordenar:hover { color: var(--texto); }
.ordenar .ico { width: 16px; height: 16px; opacity: 0; transition: opacity var(--rapido); }
th[aria-sort] .ordenar { color: var(--texto); }
th[aria-sort] .ordenar .ico { opacity: 1; }

.sello { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--radio); font-weight: 600; font-size: .9375rem; white-space: nowrap; background: var(--papel-2); color: var(--texto-2); }
.sello::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sello--ok { background: var(--verde-tinte); color: var(--verde); }
.sello--aviso { background: var(--ambar-tinte); color: var(--ambar); }
.sello--critico { background: var(--rojo-tinte); color: var(--rojo-fuerte); }
.sellos { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.vacio { padding: 40px 24px; text-align: center; }
.vacio h2 { font: 700 1.1875rem/1.25 var(--fuente); }
.vacio p { margin: 6px auto 0; max-width: 46ch; color: var(--texto-2); }
.vacio .btn { margin-top: 16px; }

.hueso { height: 16px; border-radius: var(--radio); background: linear-gradient(90deg, var(--papel-2) 25%, #F6F5F2 50%, var(--papel-2) 75%); background-size: 200% 100%; animation: hueso 1.1s linear infinite; }
@keyframes hueso { to { background-position: -200% 0; } }
.huesos { display: grid; gap: 18px; padding: 22px 20px; }

/* ---------- Inicio ---------- */

.inicio { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.inicio > * { min-width: 0; }
.inicio > .panel { margin-top: 0; }
.inicio .ancho { grid-column: 1 / -1; }

.ventas-hoy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 6px; }
.ventas-cifra { font: 400 2.375rem/1 var(--titular); letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.ventas-nota { color: var(--texto-2); font-size: 1.125rem; }

.barras { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; height: 190px; margin-top: 22px; }
.dia { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.dia-valor { font-size: .9375rem; font-weight: 600; color: var(--texto-2); white-space: nowrap; margin-bottom: 6px; }
.dia-barra { width: 100%; max-width: 64px; height: var(--alto, 0%); min-height: 3px; border-radius: var(--radio) var(--radio) 0 0; background: #D8D5CE; transition: height 400ms var(--salida); }
.dia-etq { margin-top: 8px; padding-top: 6px; width: 100%; text-align: center; border-top: 1px solid var(--linea); color: var(--texto-3); font-size: .9375rem; }
.dia.hoy .dia-barra { background: var(--rojo); }
.dia.hoy .dia-valor, .dia.hoy .dia-etq { color: var(--texto); font-weight: 700; }
.dia.cero .dia-valor { visibility: hidden; }

.atender { list-style: none; margin: 0; padding: 4px 0; }
.atender li + li { border-top: 1px solid var(--linea); }
.atender a, .atender .fila { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px 8px 20px; text-decoration: none; transition: background-color var(--rapido); }
.atender a:hover { background: #FBFAF8; }
.atender .cuenta { margin-left: auto; min-width: 28px; height: 26px; padding: 0 8px; display: grid; place-items: center; border-radius: var(--radio); background: var(--tinta); color: var(--blanco); font-weight: 700; font-variant-numeric: tabular-nums; }
.atender .cuenta.critica { background: var(--rojo-tinte); color: var(--rojo-fuerte); }
.atender .fila { color: var(--texto-3); }
.atender .fila .cuenta { background: var(--papel-2); color: var(--texto-3); }
.atender .ico { color: var(--texto-3); width: 18px; height: 18px; transition: transform var(--rapido); }
.atender a:hover .ico { transform: translateX(2px); color: var(--texto); }

/* ---------- Configuración ---------- */

.definicion { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0; }
.definicion dt { color: var(--texto-3); }
.definicion dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.nota { margin-top: 12px; color: var(--texto-2); max-width: 62ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ---------- Celular ---------- */

@media (max-width: 760px) {
  .acceso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .acceso-marca { padding: 40px 24px 28px; justify-content: flex-end; }
  .acceso-marca .logotipo { font-size: 3.5rem; }
  .acceso-marca .descriptor { font-size: .9375rem; margin-top: 10px; }
  .acceso-lema { margin-top: 20px; font-size: 1.0625rem; }
  .acceso-form { margin: 0 8px 8px; padding: 28px 24px; justify-content: flex-start; }

  .app { display: block; height: auto; min-height: 100dvh; }
  .cinta { display: flex; align-items: center; height: 44px; padding: 0 16px; color: var(--blanco); }
  .cinta .logotipo { font-size: 1.25rem; }
  .hoja { margin: 0; border-radius: var(--radio); overflow: visible; min-height: calc(100dvh - 44px); padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .barra { border-radius: var(--radio) var(--radio) 0 0; }
  .barra.pegada { border-radius: 0; }
  .barra { padding: 14px 16px 10px; gap: 8px; }
  .barra h1 { font-size: 1.5rem; }
  .estado-texto { font-size: .9375rem; }
  #sincronizar { width: 44px; height: 44px; padding: 0; }
  #sincronizar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .aviso { margin: 0 16px 8px; flex-wrap: wrap; }
  .vista { padding: 4px 16px 32px; }

  .riel { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--tinta); }
  .riel-marca, .riel-pie { display: none; }
  .nav { flex-direction: row; gap: 2px; }
  .nav a, .nav a[aria-current="page"] { flex: 1 1 0; min-width: 0; height: 54px; padding: 0; flex-direction: column; justify-content: center; gap: 3px; font-size: .75rem; font-weight: 600; }
  .nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav .nav-fin { margin-top: 0; }

  .btn { height: 44px; }
  .herramientas { gap: 10px; }
  .filtros { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { height: 44px; flex: 1 0 auto; padding: 0 8px; font-size: .9375rem; }
  .filtro small { margin-left: 3px; }
  .buscar { max-width: none; margin-left: 0; flex-basis: 100%; }
  .buscar input { height: 44px; }
  .orden-movil { display: flex; }

  .inicio { grid-template-columns: 1fr; gap: 16px; }
  .panel + .panel, .panel + .seccion, .seccion + .seccion { margin-top: 16px; }
  .panel-cab { padding: 14px 16px 0; flex-wrap: wrap; }
  .panel-cuerpo { padding: 10px 16px 16px; }
  .ventas-cifra { font-size: 2rem; }
  .barras { gap: 6px; height: 160px; }
  .dia-valor { font-size: .8125rem; }
  .atender a, .atender .fila { padding-left: 16px; }

  /* Las tablas pasan a filas apiladas */
  .filas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .filas, .filas tbody { display: block; }
  .filas tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
  .filas tbody tr:last-child { border-bottom: 0; }
  .filas td { padding: 0; border: 0; min-width: 0; }
  .filas td.num { text-align: right; }
  .filas td[data-etq]::before { content: attr(data-etq) " "; color: var(--texto-3); font-weight: 400; }
  .filas .m-todo { grid-column: 1 / -1; }
  .filas td.m-izq { grid-column: 1; text-align: left; }
  .filas td.m-der { grid-column: 2; text-align: right; }
  .filas td.m-todo { grid-column: 1 / -1; }
  .filas td.m-arriba { grid-row: 1; }
  .filas .menor.en-linea { display: inline; margin-left: 6px; }
  .largo { display: none; }
  .definicion { grid-template-columns: 1fr; gap: 2px; }
  .definicion dd { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}