/* =====================================================================
   FacturApp — complementos sobre pieza.css (mismos tokens y medidas).
   Solo lo que el sistema de Pieza no trae: nada aquí redefine su base.
   ===================================================================== */

/* Logo por iniciales cuando la empresa no subió imagen */
.logo-ini { display: grid; place-items: center; border-radius: 11px; font-weight: 600; flex-shrink: 0; letter-spacing: -.02em; }
.marca .logo-ini, .sucursal-tarjeta .logo-ini { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.portada .sucursal-tarjeta .logo-img, .portada .sucursal-tarjeta .logo-ini { width: 42px; height: 42px; }

/* Tipos de ítem: colores propios, independientes del color de la empresa */
.pill.tipo-producto { background: #E6EEF7; color: #2E5277; }
.pill.tipo-insumo   { background: var(--aviso-f); color: var(--aviso); }
.pill.tipo-servicio { background: #EFE9F8; color: #5B3A9A; }

/* Montos positivos y negativos */
.pos { color: var(--ok); } .neg { color: var(--mal); }
.kpi.pos .v { color: var(--ok); } .kpi.neg .v { color: var(--mal); }

/* Números de factura: identificadores, en monoespaciada */
a.codigo, .codigo-h { font-family: var(--mono); font-weight: 500; text-decoration: none; }
.codigo-h { font-size: .8em; color: var(--gris); }

/* Gráfico del inicio */
.grafico { position: relative; height: 240px; }
@media (min-width: 1000px) { .grafico { height: 260px; } }

/* Buscador de productos al facturar: la lista flota bajo el campo */
label.campo.buscador-prod { position: relative; }
.ac-lista li strong em.pill { font-style: normal; margin-left: 6px; font-size: 11px; padding: 1px 8px; }
.ac-lista li.vacia strong { color: var(--gris); }

/* Líneas de la factura: el stepper cabe en la celda */
.lineas-factura .stepper button { width: 40px; height: 40px; font-size: 20px; }
.lineas-factura .stepper input { width: 58px; height: 40px; font-size: 16px; }
@media (pointer: coarse) { .lineas-factura .stepper button, .lineas-factura .stepper input { height: 46px; } .lineas-factura .stepper button { width: 46px; } }

/* Tipo de ítem al crearlo: tres opciones grandes (como las de «¿Qué vas a registrar?») */
.opciones-tipo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opciones-tipo label { position: relative; }
.opciones-tipo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opciones-tipo span { display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 10px 12px; border: 1px solid var(--control); border-radius: var(--radio-s); background: #fff; cursor: pointer; color: var(--tinta); }
.opciones-tipo small { font-size: 12px; color: var(--gris); line-height: 1.3; }
.opciones-tipo input:checked + span { border-color: var(--acento); background: var(--acento-sua); box-shadow: inset 0 0 0 1px var(--acento); }
.opciones-tipo input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--acento) 55%, white); outline-offset: 2px; }
@media (max-width: 560px) { .opciones-tipo { grid-template-columns: 1fr; } .opciones-tipo span { min-height: 52px; } }

/* Matriz de permisos */
.matriz-permisos th:not(:first-child), .matriz-permisos td:not(:first-child) { text-align: center; }
.matriz-permisos input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--acento); cursor: pointer; }

/* Menú de reportes: enlaces con subtítulo */
.reportes-menu .item { gap: 1px; }

/* Comparativo: color de cada empresa */
.punto-empresa { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Página de error */
.error-codigo { font: 600 64px/1 var(--serif); color: var(--acento); }

/* Casillas y radios dentro de formularios usan el color de la empresa */
input[type="checkbox"], input[type="radio"] { accent-color: var(--acento); }

/* Facturar: lista de lo que se vende, con el precio a la vista */
#res-prod { max-height: min(420px, 60vh); }
#res-prod .grupo-res { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); padding: 10px 10px 4px; cursor: default; }
#res-prod .grupo-res:hover { background: transparent; }
#res-prod li.res-venta { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
#res-prod .rv-izq { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#res-prod .rv-izq > span { font-size: 12px; color: var(--gris); }
#res-prod .rv-precio { font-weight: 600; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#res-prod li.agotado { opacity: .5; cursor: not-allowed; }
#res-prod li.agotado:hover { background: transparent; }
#res-prod em.pill { font-style: normal; font-size: 11px; padding: 1px 8px; margin-left: 6px; }
/* Celular: total siempre visible sobre la barra inferior */
.barra-total { display: none; }
@media (max-width: 999px) {
  .barra-total:not([hidden]) { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(var(--alto-bottom) + 10px); z-index: 31;
    justify-content: space-between; align-items: center; min-height: 52px; padding: 0 18px; border-radius: 12px;
    background: var(--acento); color: #fff; text-decoration: none; font-weight: 500; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
  .barra-total b { font-size: 17px; }
}

/* Gasto e ingreso: dos botones que se distinguen a primera vista */
.btn.btn-gasto { color: var(--mal); border-color: color-mix(in srgb, var(--mal) 45%, var(--control)); background: var(--mal-f); font-weight: 600; }
.btn.btn-gasto:hover { border-color: var(--mal); color: var(--mal); }
.btn.btn-ingreso { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--control)); background: var(--ok-f); font-weight: 600; }
.btn.btn-ingreso:hover { border-color: var(--ok); color: var(--ok); }
/* en el celular la barra del total no tapa el último contenido */
@media (max-width: 999px) { body:has(.barra-total:not([hidden])) .contenido { padding-bottom: calc(var(--alto-bottom) + 90px); } }
#res-prod .rv-izq, #res-prod .rv-izq strong { font-family: var(--sans); }
#res-prod .rv-izq > span { font-family: var(--mono); }
#res-prod .rv-precio { font-family: var(--sans); }
#res-prod .rv-izq strong { color: var(--tinta); font-weight: 600; }

/* Movimientos anulados: quedan a la vista, tachados, sin sumar */
tr.anulado td { opacity: .6; }
tr.anulado .titulo { text-decoration: line-through; text-decoration-thickness: 1px; }
tr.anulado .pill { text-decoration: none; display: inline-block; }
#res-prod .pie-lista { font-size: 12px; color: var(--gris); padding: 10px 12px; border-top: 1px solid var(--linea-2); cursor: default; }
#res-prod .pie-lista:hover { background: transparent; }

/* Código del ítem: lo asigna el sistema, se muestra pero no se escribe */
.codigo-auto { display: inline-flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: var(--radio-s);
  background: var(--fondo); border: 1px dashed var(--control); color: var(--tinta);
  font-family: var(--mono); font-size: 15px; font-weight: 500; }
div.campo { display: flex; flex-direction: column; gap: 5px; }
div.campo > .codigo-auto { align-self: flex-start; }

/* Reportes: tablas compactas para que quepan junto al menú lateral */
.tabla.reporte { font-size: 13px; }
.tabla.reporte th, .tabla.reporte td { padding: 8px 10px; white-space: nowrap; }
.tabla.reporte td:nth-child(2), .tabla.reporte td:nth-child(3) { white-space: normal; }
.desliza { overflow-x: auto; scrollbar-width: thin; }
@media (max-width: 1200px) { .reportes-menu { order: 2 !important; } }
.matriz-permisos select { min-width: 132px; font-size: 13px; padding: 6px 26px 6px 8px; min-height: 38px; }
.matriz-permisos th, .matriz-permisos td { padding: 8px 6px; }
.grid.k2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) { .grid.k2 { grid-template-columns: 1fr; } }

/* Pantalla simple: las acciones del día, grandes y claras */
.acciones-grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 20px; }
.accion-grande { display: flex; flex-direction: column; gap: 3px; padding: 20px; min-height: 124px; justify-content: center;
  border: 1px solid var(--control); border-radius: var(--radio); background: #fff; color: var(--tinta);
  text-decoration: none; transition: transform .15s var(--ease), border-color .15s, box-shadow .15s; }
.accion-grande:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,23,32,.10); }
.accion-grande b { font-size: 17px; font-weight: 600; }
.accion-grande small { font-size: 12.5px; color: var(--gris); }
.accion-grande .ag-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 8px;
  background: var(--fondo); color: var(--tinta); }
.accion-grande.principal { background: var(--acento); border-color: var(--acento); color: #fff; }
.accion-grande.principal small { color: rgba(255,255,255,.82); }
.accion-grande.principal .ag-ic { background: rgba(255,255,255,.18); color: #fff; }
.accion-grande.gasto:hover { border-color: var(--mal); }
.accion-grande.gasto .ag-ic { background: var(--mal-f); color: var(--mal); }
.accion-grande.ingreso:hover { border-color: var(--ok); }
.accion-grande.ingreso .ag-ic { background: var(--ok-f); color: var(--ok); }

/* El menú «Más» nunca queda cortado por su tarjeta, ni siquiera en la última fila */
.tarjeta:has(.mas-acciones), .tarjeta:has(.menu-flotante) { overflow: visible; }
.tabla-wrap:has(.mas-acciones), .desliza:has(.mas-acciones) { overflow: visible; }
.mas-acciones[open] .menu-flotante { z-index: 60; }
/* si la fila está abajo del todo, el menú se abre hacia arriba */
.tabla tbody tr:nth-last-child(-n+2) .menu-flotante { top: auto; bottom: calc(100% + 4px); }

/* Control de páginas */
.paginas { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--linea-2); }
.paginas [aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* La barra de acciones del inicio se acomoda cuando hay varios botones */
.cabecera .acciones { flex-wrap: wrap; justify-content: flex-end; }

/* ── Tablets (760–999 px): el menú lateral ya no está, pero las tablas de Pieza
   recién se vuelven tarjetas bajo 760 px. En ese hueco quedaban más anchas que la
   pantalla. Se extiende la vista de tarjetas hasta donde aparece el menú lateral. */
@media (min-width: 760px) and (max-width: 999px) {
  .tabla.resp thead { display: none; }
  .tabla.resp, .tabla.resp tbody, .tabla.resp tr, .tabla.resp td { display: block; width: 100%; }
  .tabla.resp tr { padding: 10px 14px; border-bottom: 1px solid var(--linea); }
  .tabla.resp td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
  .tabla.resp td::before { content: attr(data-label); color: var(--gris); font-size: 13px; text-align: left; font-family: var(--sans); }
  .tabla.resp td.titulo { font-weight: 600; font-size: 15px; } .tabla.resp td.titulo::before { content: none; }
  .tabla.resp td:empty { display: none; }
}

/* ── Celular: los enlaces sueltos que hacen de botón tienen que poder tocarse con
   el dedo (mínimo ~40 px de alto), no solo verse. */
@media (max-width: 759px) {
  a.enlace-accion, button.enlace { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 0; }
}

/* ── Celular: las acciones de la cabecera en grilla de dos columnas a todo el ancho.
   Antes quedaban apiladas, alineadas a la derecha y cada una de un ancho distinto. */
@media (max-width: 759px) {
  .cabecera { flex-direction: column; align-items: stretch; }
  /* minmax(0, 1fr): sin esto la columna se estira al ancho del texto y la grilla
     se sale de la pantalla por la izquierda */
  .cabecera .acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                        gap: 8px; width: 100%; margin: 0; justify-content: stretch; }
  .cabecera .acciones > * { width: 100%; min-width: 0; justify-content: center; text-align: center;
                            margin: 0; white-space: normal; line-height: 1.25;
                            padding-left: 8px; padding-right: 8px; font-size: 14px; }
  /* una sola acción, o la última de una cantidad impar, ocupa toda la fila */
  .cabecera .acciones > :only-child,
  .cabecera .acciones > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Carga masiva */
.pasos-carga { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.paso-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acento); color: #fff; font-weight: 700; font-size: 14px; }
.error-nota { background: var(--mal-f); color: var(--mal); border-color: transparent; }
.tabla tr.fila-error td { background: #fdf3f2; }
/* El selector de archivo: una zona amplia y fácil de tocar, no el control diminuto del navegador */
input[type=file] { width: 100%; min-height: 48px; padding: 12px; border: 1.5px dashed var(--control);
  border-radius: 10px; background: var(--fondo); font-size: 14px; cursor: pointer; }
input[type=file]::file-selector-button { margin-right: 10px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--control); background: #fff; font: inherit; cursor: pointer; }

/* Alta de vehículo: nombre, placa, ruta y personal en una grilla que se acomoda */
.form-vehiculo { display: grid; gap: 8px 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }

/* ── Reporte de entrega: una sola pantalla, como el talonario ── */
.entrega-cab-campos { display: grid; gap: 10px 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.entrega-cab-campos .ancho-2, .entrega-cierre-campos .ancho-2 { grid-column: span 2; }
.dato-fijo { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px;
  background: var(--fondo); border: 1px dashed var(--control); font-weight: 500; overflow-wrap: anywhere; }
.dato-fijo.neg { color: var(--mal); } .dato-fijo.pos { color: var(--ok); }
.entrega-cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.entrega-lado.ingresos { border-top: 3px solid var(--ok); }
.entrega-lado.gastos { border-top: 3px solid var(--mal); }
.vuelta { border: 1px solid var(--linea-2); border-radius: 10px; padding: 10px 12px; }
.vuelta-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.vuelta-campos { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gasto { display: grid; gap: 8px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; }
.gasto .campo { margin: 0; }
.entrega-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px;
  border-top: 1px solid var(--linea-2); font-size: 15px; }
.entrega-total b { font-size: 18px; }
.entrega-cierre { display: grid; gap: 14px; }
.entrega-neto { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-bottom: 12px; border-bottom: 2px solid var(--tinta, #101720); }
.entrega-neto span { font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.entrega-neto b { font-size: 28px; letter-spacing: -.02em; }
.entrega-neto b.neg { color: var(--mal); }
.entrega-cierre-campos { display: grid; gap: 10px 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.entrega-botones { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1100px) {
  .vuelta-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gasto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .gasto .gasto-detalle { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 860px) {
  .entrega-cols { grid-template-columns: minmax(0, 1fr); }
  .entrega-cab-campos, .entrega-cierre-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .entrega-cab-campos .ancho-2, .entrega-cierre-campos .ancho-2 { grid-column: 1 / -1; }
  .entrega-neto b { font-size: 24px; }
  .entrega-botones > * { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 520px) {
  .gasto { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; }
  .gasto > label:first-child, .gasto .gasto-detalle { grid-column: 1 / -1; grid-row: auto; }
  .gasto { padding-bottom: 8px; border-bottom: 1px solid var(--linea-2); }
}

/* Opción con explicación: el círculo a la izquierda y el texto al lado, alineados */
.opcion-radio { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; }
.opcion-radio input { width: 20px; height: 20px; margin: 0; }
.opcion-radio:has(input:checked) { border-color: var(--tinta); background: var(--fondo); }