:root {
  --fondo: #f4f5f1;
  --papel: #ffffff;
  --tinta: #1f2a22;
  --suave: #5f6b62;
  --linea: #dfe3dc;
  --verde: #2f6b3a;
  --verde-claro: #e6f0e4;
  --naranja: #e8891a;
  --rojo: #b3261e;
  --radio: 10px;
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Cabecera */
.cab { background: var(--papel); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 5; }
.cab-in { max-width: 1200px; margin: 0 auto; padding: 10px 16px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.marca { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; }
.marca svg { width: 34px; height: 34px; }
.marca svg rect { fill: var(--verde); }
.marca svg path { stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; }
.marca strong { display: block; font-size: 16px; }
.marca span { display: block; font-size: 12px; color: var(--suave); }
.pestanas { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.pestanas button {
  background: none; border: 0; padding: 10px 14px 12px; cursor: pointer; color: var(--suave);
  border-bottom: 3px solid transparent; white-space: nowrap; font-weight: 500;
}
.pestanas button:hover { color: var(--tinta); }
.pestanas button.activa { color: var(--verde); border-bottom-color: var(--verde); }

main { max-width: 1200px; margin: 0 auto; padding: 16px 16px 60px; }
.vista { display: none; }
.vista.activa { display: block; }

/* Botones */
.btn {
  border: 1px solid var(--linea); background: var(--papel); border-radius: 8px;
  padding: 8px 14px; cursor: pointer; font-weight: 500; min-height: 40px;
}
.btn:hover { border-color: #b9c2b6; }
.btn.prim { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.prim:hover { background: #275a31; }
.btn.suave { background: transparent; }
.btn.peligro { color: var(--rojo); }
.btn.ico { width: 40px; padding: 0; font-size: 20px; line-height: 1; }
.btn:focus-visible, .pestanas button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.barra input { border: 1px solid var(--linea); border-radius: 8px; padding: 7px 10px; background: var(--papel); min-height: 40px; }
.espacio { flex: 1; }
.titulo-dia { font-size: 22px; margin: 4px 0 12px; }
.titulo-dia::first-letter { text-transform: uppercase; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; }
.kpi span { display: block; font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.kpi strong { display: block; font-size: 24px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi.destacado { background: var(--verde); border-color: var(--verde); color: #fff; }
.kpi.destacado span { color: #cfe3d1; }

/* Tarjetas */
.rejilla { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; margin-bottom: 16px; min-width: 0; }
.tarjeta h2 { font-size: 15px; margin: 0 0 12px; }
.tarjeta h3 { font-size: 14px; margin: 20px 0 6px; }
.tarjeta p { margin: 0 0 12px; }
.nota { font-size: 13px; color: var(--suave); }

/* Tablas */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 7px 8px; border-bottom: 1px solid var(--linea); text-align: left; }
.tabla th { font-size: 12px; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.tabla tfoot td { font-weight: 700; border-top: 2px solid var(--tinta); border-bottom: 0; }
.tabla tr.vacio td { color: #a3aca5; }
.tabla .num { text-align: right; }
.tabla .cod { color: var(--suave); width: 1%; }
.tabla .barra-mini { display: block; height: 4px; background: var(--verde-claro); border-radius: 2px; margin-top: 3px; }
.tabla .barra-mini i { display: block; height: 100%; background: var(--verde); border-radius: 2px; }
.compacta th, .compacta td { padding: 5px 7px; font-size: 13px; }
.compacta tbody tr:hover { background: #f7f9f6; }
.compacta tr.click { cursor: pointer; }
.compacta th { position: sticky; top: 0; background: var(--papel); }
.iva-tag { display: inline-block; white-space: nowrap; font-size: 11px; padding: 1px 6px; border-radius: 10px; background: var(--verde-claro); color: var(--verde); font-weight: 600; }
.iva-tag.i21 { background: #fdf0de; color: #9a5a0c; }

.tickets summary { cursor: pointer; font-weight: 600; }
.tickets .tk { border-top: 1px solid var(--linea); padding: 8px 0; font-size: 13px; display: grid; grid-template-columns: 90px 60px 1fr auto; gap: 8px; }
.tickets .tk .lin { color: var(--suave); }

/* Apuntar ticket */
.botonera { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.botonera button {
  min-height: 64px; border-radius: 10px; border: 1px solid var(--linea); background: #fafbf9;
  cursor: pointer; text-align: left; padding: 8px 10px; font-weight: 600; font-size: 14px;
}
.botonera button small { display: block; font-weight: 400; color: var(--suave); font-size: 11px; }
.botonera button:hover { border-color: var(--verde); background: var(--verde-claro); }
.botonera button:active { transform: scale(.98); }
.tk-cab { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; margin-bottom: 10px; }
.tk-cab label { font-size: 12px; color: var(--suave); }
.tk-cab input, .tk-lineas input, .mapa select, #aj-tabla input, #aj-tabla select {
  width: 100%; border: 1px solid var(--linea); border-radius: 6px; padding: 6px 8px; background: #fff; min-height: 36px;
}
.tk-lineas input { text-align: right; padding: 4px 6px; min-height: 32px; }
.tk-lineas td { padding: 4px; }
.tk-lineas .quitar { border: 0; background: none; color: var(--rojo); cursor: pointer; font-size: 18px; width: 32px; height: 32px; }
.tk-total { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; padding: 10px 12px; background: var(--fondo); border-radius: 8px; font-size: 13px; color: var(--suave); }
.tk-total strong { font-size: 24px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.tk-acciones { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.tk-acciones .nota { flex: 1; }
.pila { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

/* Importar */
.soltar {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 140px;
  border: 2px dashed #b9c2b6; border-radius: var(--radio); background: #fafbf9; cursor: pointer; padding: 16px;
}
.soltar.encima { border-color: var(--verde); background: var(--verde-claro); }
.soltar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.mapa label { font-size: 12px; color: var(--suave); }

/* Aviso */
.aviso {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 8px; transition: .2s; pointer-events: none; max-width: calc(100% - 32px);
}
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .rejilla { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi strong { font-size: 20px; }
}
@media (max-width: 520px) {
  .marca { padding-bottom: 0; }
  .tk-cab { grid-template-columns: 1fr 1fr; }
  .tk-cab label:nth-child(2) { grid-column: span 2; order: -1; }
  .tickets .tk { grid-template-columns: 70px 1fr auto; }
  .tickets .tk .lin { grid-column: 1 / -1; }
}

@media print {
  .cab, .barra, .tk-acciones, .aviso, details.tickets { display: none !important; }
  body { background: #fff; font-size: 12px; }
  main { padding: 0; max-width: none; }
  .tarjeta, .kpi { border: 0; padding: 0; }
  .kpi.destacado { background: none; color: #000; }
  .rejilla { grid-template-columns: 1fr; }
}