/* Actualizar clientes y proveedores desde Excel (modulos88.js): del reloj (240 px) al escritorio, en claro y en oscuro. Usa las variables del Administrativo. */

.a88-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.a88-botones .btn, .a88-pie .btn, .a88-oferta .btn { min-height: 44px; }
.a88-archivo { cursor: pointer; display: inline-flex; align-items: center; }
.a88-pegar { margin: 6px 0 2px; }
.a88-pegar > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 650; }
.a88-pegar textarea { width: 100%; min-height: 110px; margin: 6px 0; box-sizing: border-box; }

.a88-archivo-nombre { margin: 0 0 10px; overflow-wrap: anywhere; }
.a88-controles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.a88-controles .campo { margin: 0; min-width: 0; }
.a88-controles select, .a88-rejilla select { min-height: 44px; width: 100%; min-width: 0; }

.a88-mapa { margin: 12px 0 0; border: 1px solid var(--regla); border-radius: 12px; padding: 4px 14px 12px; background: color-mix(in srgb, var(--papel-2) 40%, transparent); }
.a88-mapa > summary { cursor: pointer; font-weight: 650; min-height: 44px; display: flex; align-items: center; }
.a88-mapa[open] > summary { border-bottom: 1px solid var(--regla); margin-bottom: 10px; }
.a88-mapa h4 { margin: 14px 0 6px; }
.a88-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.a88-rejilla .campo { margin: 0; min-width: 0; }

.a88-franja .cifra { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.a88-lista { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.a88-fila { border: 1px solid var(--regla); border-radius: 12px; padding: 10px 12px; background: var(--blanco); min-width: 0; }
.a88-fila.a88-error { border-color: color-mix(in srgb, var(--jitomate) 45%, var(--regla)); }
.a88-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.a88-num { color: var(--tinta-suave); font-size: .85rem; font-variant-numeric: tabular-nums; }
.a88-nombre { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.a88-detalle { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: .93rem; min-width: 0; }
.a88-cambio, .a88-motivo { overflow-wrap: anywhere; }
.a88-cambio s { color: var(--tinta-suave); }
.a88-cambio em { font-style: normal; font-weight: 650; }
.a88-motivo { color: var(--jitomate); }
.a88-omitir .a88-motivo { color: var(--tinta-suave); }

.a88-pie { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 4px; }
.a88-oferta { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--regla); border-radius: 12px; background: color-mix(in srgb, var(--hoja-fondo) 45%, transparent); }
.a88-oferta .nota { margin: 0 0 8px; }

@media (max-width: 480px) {
  .a88-botones .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  .a88-pie .btn { flex: 1 1 100%; }
  .a88-franja { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .a88-franja > div { border-right: 0; border-bottom: 1px solid var(--regla); padding: 10px 12px; }
}

/* el selector «Renglones por página» de las listas medía 36 px en celular y reloj: se toca mejor a 40 */
@media (max-width: 760px) { #vista .pag-tam select, #panel .pag-tam select { min-height: 40px; } }   /* con #vista/#panel para ganarle a responsivo.css, que carga después */