/* Resumen con IA, líneas de piezas del parte y botón "+ Orden" y pestañas inferiores del técnico. */
/* Resumen de incidencias con IA (de momento solo el recuadro) */
.ia .sec-h h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ia-ico {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-grid;
  place-items: center;
  flex: none;
}
.btn .spark {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 4px;
}
.ia-l {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}
.ia-dir {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
/* Línea de pieza del parte: pieza y cantidad arriba; referencia y nº de serie debajo */
.pz-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 72px;
  gap: 8px;
}
.pz-row input[name='pzDesc'] {
  grid-column: 1 / 3;
}
.pz-row input[name='pzSerie'] {
  grid-column: 2 / 4;
}
.pz-row + .pz-row {
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
html.movil .pz-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px;
}
.ia-dir summary {
  cursor: pointer;
  padding: 4px 0;
}
details.ia > summary {
  cursor: pointer;
  list-style: none;
}
details.ia > summary::-webkit-details-marker {
  display: none;
}
details.ia:not([open]) > summary {
  border-bottom: 0;
}
.ia-l.warn li::marker {
  color: var(--warn, #b45309);
}
/* Técnico con permiso: "Nueva orden" arriba a la derecha, junto al menú (en el móvil sustituye a los botones de cada pantalla) */
.hdr-acts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.hdr-new {
  display: none;
}
html.movil .hdr-new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 15px;
  border-radius: 999px;
}
.brand svg {
  flex: none;
}
html.movil .hdr-new b {
  font-size: 19px;
  line-height: 1;
}
html.movil .tec-nuevo {
  display: none;
}
html.movil .tabs.tec {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html.movil .tabs.tec .in {
  justify-content: space-around;
  padding-left: 0;
  padding-right: 0;
}
html.movil .tabs.tec .tab {
  flex: 1;
  text-align: center;
  border-bottom: 0;
  border-top: 3px solid transparent;
  padding: 12px 6px 14px;
  font-size: 15.5px;
}
html.movil .tabs.tec .tab[aria-current='page'] {
  border-top-color: var(--accent);
  border-bottom: 0;
}
html.movil body:has(.tabs.tec) main.in {
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}
html.movil body:has(.tabs.tec) .toast {
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
html.movil .kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.movil .avatar {
  width: 42px;
  height: 42px;
  font-size: 15.5px;
}
html.movil .menu-it {
  font-size: 16px;
  padding: 14px 12px;
}
html.movil .menu {
  min-width: 260px;
}
html.movil .rango-f .fld {
  flex: 1 1 140px;
}
/* Fotos de la orden (fotos.js): miniaturas cuadradas; la ✕ quita la foto */
.thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.thumbs img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  display: block;
}
html.movil .thumbs img {
  width: 96px;
  height: 96px;
}
.thumbs .th {
  position: relative;
}
.th-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--bad);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.hist .thumbs img {
  width: 56px;
  height: 56px;
}
.fotos label.btn input[type='file'] {
  display: none;
}
/* Visita del técnico: apartados seguidos, sin huecos. En pantallas anchas, el parte (con las fotos) va a la
   derecha y se queda a la vista al bajar; en el resto, todo en una columna: datos, parte, fotos y lo demás. */
.visita,
.visita-info,
.visita-parte,
.visita-mas {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
@media (min-width: 1300px) {
  html:not(.movil) .visita {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.8fr);
    grid-template-areas: 'info parte' 'mas parte';
    align-items: start;
    gap: 20px;
  }
  html:not(.movil) .visita-info {
    grid-area: info;
  }
  html:not(.movil) .visita-mas {
    grid-area: mas;
  }
  html:not(.movil) .visita-parte {
    grid-area: parte;
    position: sticky;
    top: calc(var(--top-h, 56px) + 12px);
    max-height: calc(100vh - var(--top-h, 56px) - 24px);
    overflow-y: auto;
  }
}
.hist-ant summary {
  cursor: pointer;
  padding: 4px 0;
}
/* Filtros de Usuarios en una sola franja: rol, estado y, a la derecha, cliente y orden. En el móvil, en varias líneas. */
.franja-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.franja-filtros .filtros-sel {
  margin-left: auto;
}
.franja-filtros .ff-der {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-left: auto;
}
html.movil .franja-filtros .ff-der {
  margin-left: 0;
}
.franja-filtros select {
  width: auto;
  min-width: 0;
  max-width: 14rem;
}
html.movil .franja-filtros {
  flex-direction: column;
  align-items: stretch;
}
html.movil .franja-filtros .filtros-sel {
  margin-left: 0;
}
/* Importación y clientes inactivos */
.note.ok {
  background: var(--ok-soft);
  border-color: transparent;
}
.inact-h {
  padding: 10px 16px 4px;
  margin: 0;
}
details.hant > summary {
  cursor: pointer;
}

/* Almacén: tabla de stock, tarjetas de furgoneta y líneas de material */
.tbl-wrap {
  overflow-x: auto;
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.tbl th {
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tbl th.num,
.tbl td.num {
  text-align: right;
  white-space: nowrap;
}
.tbl tr.click {
  cursor: pointer;
}
.tbl tr.click:hover td {
  background: var(--surface-2);
}
.tbl tr.dim td {
  opacity: 0.6;
}
.list > .card {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  gap: 8px;
}
.list > .card:last-child {
  border-bottom: 0;
}
.list > .card .bar {
  margin: 0;
  flex-wrap: wrap;
  gap: 8px;
}
.fila {
  display: grid;
  gap: 8px;
  align-items: center;
}
.fila-alm {
  grid-template-columns: minmax(0, 1fr) 7rem auto;
}
html.movil .fila-alm {
  grid-template-columns: minmax(0, 1fr) 5.5rem auto;
}
.fila-cont {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem;
  align-items: center;
  gap: 8px;
}
/* Compras: foto del albarán, filas de factura y coste de la OT */
.alb-foto {
  max-width: 100%;
  max-height: 320px;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: block;
}
.fila-gasto {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 7rem auto;
}
.fila-alb {
  grid-template-columns: auto minmax(0, 1fr) 7rem;
}
html.movil .fila-gasto {
  grid-template-columns: minmax(0, 1fr) 6rem auto;
}
html.movil .fila-gasto [name='gOT'] {
  grid-column: 1 / -1;
  grid-row: 2;
}
.cst-l {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.cst-l > span:first-child {
  flex: 1;
}
.cst-l .sub {
  flex-basis: 100%;
  text-align: right;
  margin-top: -4px;
}
.cst-l.total {
  border-top: 1px solid var(--line);
  padding-top: 6px;
}
.sec-t {
  font-size: 16px;
  margin: 18px 0 8px;
}
.fechas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 12px;
}
.fechas label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13.5px;
  color: var(--muted);
}
.costes .tbl-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* Material del parte con precio: material, cantidad, precio y quitar (en el móvil, el material ocupa la fila) */
.pz-row.pz-venta {
  grid-template-columns: minmax(0, 1fr) 76px 96px 36px;
  align-items: center;
}
.pz-row.pz-venta input[name='pzDesc'] {
  grid-column: auto;
}
.pz-row.pz-cab {
  border: 0;
  padding: 0;
  font-size: 12px;
}
.pz-list .pz-row.pz-venta + .pz-row.pz-venta {
  border-top: 0;
  padding-top: 0;
}
html.movil .pz-row.pz-venta {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
}
html.movil .pz-row.pz-venta input[name='pzDesc'] {
  grid-column: 1 / -1;
}
html.movil .pz-row.pz-cab {
  display: none;
}
html.movil .pz-list .pz-row.pz-venta + .pz-row.pz-venta {
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
/* Resumen para cobrar (mismo aspecto que el coste de la OT) */
.venta-ot .cst-l.sep {
  border-top: 1px solid var(--line);
  padding-top: 6px;
  margin-top: 4px;
}
.venta-ot .cst-l.total b {
  font-size: 1.15em;
}
.venta-viva {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
/* Cliente al contado: franja roja y bien visible arriba de la visita */
.cobro-banner {
  background: var(--bad);
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 17px;
  letter-spacing: 0.01em;
}
.cobro-otro {
  color: var(--muted, inherit);
}
fieldset.cobro-box {
  border: 2px solid var(--bad);
  border-radius: 10px;
  padding: 10px 12px;
}
fieldset.cobro-box legend {
  font-weight: 600;
  padding: 0 6px;
}
/* Dirección por la que se ha encontrado un cliente en el buscador */
.dir-hit {
  display: block;
}
/* Configuración: apartados plegables con una flecha */
details.aj-pleg > summary {
  cursor: pointer;
  list-style: none;
}
details.aj-pleg > summary::-webkit-details-marker {
  display: none;
}
details.aj-pleg > summary h2::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  color: var(--muted);
  transition: transform 0.15s;
}
details.aj-pleg[open] > summary h2::before {
  transform: rotate(90deg);
}
details.aj-pleg:not([open]) > summary {
  border-bottom: 0;
}