/*
 * Selector desplegable de la app (js/scripts/z-select.js): campo redondeado con flecha y lista propia.
 * El <select> original queda dentro, invisible, para conservar valor, name y eventos.
 *
 * Carpeta: css/ · Fichero: z-select.css · Permisos: 644
 */
body.smart-style-2 .zsel { position: relative; display: block; }
body.smart-style-2 .zsel[hidden] { display: none; }
body.smart-style-2 .zsel.zsel-linea { display: inline-block; vertical-align: middle; min-width: 90px; }
body.smart-style-2 .zsel > select { position: absolute !important; left: 0; top: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none !important; }
body.smart-style-2 .zsel .zsel-in {
  display: block; width: 100%; height: var(--z-control-md, 40px); margin: 0; padding: 0 38px 0 var(--z-space-3, 12px);
  border: 1px solid var(--z-borde-fuerte); border-radius: var(--z-radius-md) !important; background: var(--z-superficie); color: var(--z-texto);
  font-family: var(--z-font-body); font-size: var(--z-text-md); line-height: normal; box-shadow: none; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; appearance: none; -webkit-appearance: none;
}
/* El campo es un <input readonly>: las reglas genéricas de «form input[readonly]» (fondo claro con !important, your_style.css y los .input input[readonly]
   de cada módulo) lo dejaban blanco con texto claro en el tema oscuro. Se reafirman aquí fondo, texto y borde con los tokens, en todos los estados. */
body.smart-style-2 .zsel input.zsel-in,
body.smart-style-2 .zsel input.zsel-in[readonly] { background: var(--z-superficie) !important; color: var(--z-texto) !important; border-color: var(--z-borde-fuerte); }
body.smart-style-2 .zsel input.zsel-in.zsel-vacio { color: var(--z-texto-suave) !important; }
body.smart-style-2 .zsel input.zsel-in:hover:not(:focus) { border-color: var(--z-texto-suave); }
body.smart-style-2 .zsel input.zsel-in:focus,
body.smart-style-2 .zsel.zsel-abierto input.zsel-in { border-color: var(--z-foco); background: var(--z-superficie) !important; }
body.smart-style-2 .zsel.zsel-off input.zsel-in,
body.smart-style-2 .zsel.zsel-off input.zsel-in[readonly] { background: var(--z-superficie-alta) !important; color: var(--z-texto-suave) !important; border-color: var(--z-borde); opacity: .75; }
body.smart-style-2 .zsel.zsel-off::after { opacity: .5; }
body.smart-style-2 .zsel:has(select.error, select.invalid) input.zsel-in,
body.smart-style-2 .state-error .zsel input.zsel-in { background: var(--z-error-suave) !important; border-color: var(--z-error); }
body.smart-style-2 .zsel.zsel-chico .zsel-in { height: 32px; font-size: var(--z-text-sm); }
body.smart-style-2 .zsel .zsel-in::placeholder { color: var(--z-texto-suave); opacity: 1; }
body.smart-style-2 .zsel .zsel-in.zsel-vacio { color: var(--z-texto-suave); }
body.smart-style-2 .zsel .zsel-in:focus,
body.smart-style-2 .zsel.zsel-abierto .zsel-in { border-color: var(--z-foco); box-shadow: var(--z-shadow-foco); outline: 0; background: var(--z-superficie); }
body.smart-style-2 .zsel.zsel-abierto .zsel-in:not([readonly]) { cursor: text; }
body.smart-style-2 .zsel.zsel-off .zsel-in { background: var(--z-superficie-alta); color: var(--z-texto-suave); cursor: not-allowed; }
/* Flecha */
body.smart-style-2 .zsel::after {
  content: ''; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -5px; pointer-events: none;
  border: solid var(--z-texto-suave); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s;
}
body.smart-style-2 .zsel.zsel-abierto::after { margin-top: -2px; transform: rotate(225deg); }
/* Estado de error de jQuery Validate / smart-form */
body.smart-style-2 .zsel:has(select.error, select.invalid) .zsel-in,
body.smart-style-2 .state-error .zsel .zsel-in { border-color: var(--z-error); background: var(--z-error-suave); }
/* La flecha propia de smart-form sobra */
body.smart-style-2 .smart-form .select:has(.zsel) > i { display: none; }

/* Panel desplegable «enriquecido»: [buscador] + lista + [pie con recuento / Todos · Ninguno] */
.zsel-panel {
  position: fixed; z-index: 2000; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; padding: 6px;
  background: var(--z-superficie, #fff); border: 1px solid var(--z-borde, #ddd); border-radius: var(--z-radius-md, 10px);
  box-shadow: var(--z-shadow-lg, 0 14px 40px rgba(0, 0, 0, .22)); font-family: var(--z-font-body);
}
.zsel-panel .zsel-lista { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.zsel-panel .zsel-busca {
  display: flex; align-items: center; gap: 8px; flex: none; margin: 2px 2px 6px; padding: 0 10px; height: 34px;
  background: var(--z-superficie-alta, #efece6); border: 1px solid var(--z-borde, #ddd); border-radius: 8px; color: var(--z-texto-suave);
}
.zsel-panel .zsel-busca:focus-within { border-color: var(--z-foco); box-shadow: var(--z-shadow-foco); }
.zsel-panel .zsel-busca input {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent;
  color: var(--z-texto); font-family: inherit; font-size: var(--z-text-sm, 13px);
}
.zsel-panel .zsel-busca input::placeholder { color: var(--z-texto-suave); opacity: 1; }
.zsel-panel .zsel-pie {
  display: flex; justify-content: space-between; gap: 12px; flex: none; margin-top: 4px; padding: 8px 12px 4px;
  border-top: 1px solid var(--z-borde, #ddd); color: var(--z-texto-suave); font-size: var(--z-text-xs, 12px);
}
.zsel-panel .zsel-pie .zsel-acc { color: var(--z-marca-texto); font-weight: 600; cursor: pointer; }
.zsel-panel .zsel-pie .zsel-acc:hover { text-decoration: underline; }
.zsel-panel .zsel-op {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--z-radius-sm, 6px); color: var(--z-texto); font-size: var(--z-text-md, 15px); line-height: 1.3; cursor: pointer;
}
.zsel-panel .zsel-op .zsel-t { flex: 1 1 auto; min-width: 0; }
.zsel-panel .zsel-op .zsel-det { flex: none; margin-left: auto; color: var(--z-texto-suave); font-size: var(--z-text-xs, 12px); font-weight: 400; }
.zsel-panel .zsel-op.zsel-act { background: var(--z-marca-suave); }
.zsel-panel .zsel-op.zsel-sel { font-weight: var(--z-weight-semibold, 600); }
.zsel-panel .zsel-op.zsel-sel::before { content: '\2713'; display: inline-block; flex: none; width: 18px; margin-left: -4px; color: var(--z-marca-texto); }
.zsel-panel .zsel-op.zsel-dis { color: var(--z-texto-suave); opacity: .55; cursor: not-allowed; }
/* Múltiple: casilla en vez de la marca de verificación */
.zsel-panel .zsel-op.zsel-mul { font-weight: 400; }
.zsel-panel .zsel-op.zsel-mul::before, .zsel-panel .zsel-op.zsel-mul.zsel-sel::before {
  content: ''; display: inline-block; flex: none; box-sizing: border-box; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--z-borde-fuerte); border-radius: 4px;
  font-size: 11px; line-height: 13px; text-align: center; color: #0B0C0E;
}
.zsel-panel .zsel-op.zsel-mul.zsel-sel::before { content: '\2713'; background: var(--z-marca); border-color: var(--z-marca); }
.zsel-panel .zsel-grupo { padding: 8px 12px 4px; color: var(--z-texto-suave); font-size: var(--z-text-xs, 12px); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.zsel-panel .zsel-nada { padding: 10px 12px; color: var(--z-texto-suave); font-size: var(--z-text-sm); }

/* Listas de resultados de los buscadores de los modales (orden, trabajo, asignación, línea de albarán, cobros, altas de cliente, vehículo
   y modelo): el mismo panel que el del desplegable (borde, radio, sombra, filas) y el mismo pie con el recuento. Cada módulo conserva el
   contenido de sus filas; esto solo unifica el contenedor. El recuento va con contadores CSS (sin tocar el JS de cada modal): cuenta las
   filas que no son cabeceras ni avisos de «sin resultados». */
html body.smart-style-2 :is(ul.zon-res, ul.hm-lista, ul.zt-lista, ul.lista-autocompletado) {
  padding: 6px; border: 1px solid var(--z-borde); border-radius: var(--z-radius-md); background: var(--z-superficie);
  box-shadow: var(--z-shadow-lg); counter-reset: zres;
}
html body.smart-style-2 :is(ul.zon-res, ul.hm-lista, ul.zt-lista, ul.lista-autocompletado) > li { border-radius: var(--z-radius-sm, 6px); }
html body.smart-style-2 :is(ul.zon-res, ul.hm-lista, ul.zt-lista, ul.lista-autocompletado) > li:not(.cab):not(.ac-vacio):not([role="presentation"]) { counter-increment: zres; }
html body.smart-style-2 :is(ul.zon-res, ul.hm-lista, ul.zt-lista, ul.lista-autocompletado):has(> li:not(.cab):not(.ac-vacio):not([role="presentation"]))::after {
  content: 'Resultados: ' counter(zres) '  \00b7  \2191\2193  elegir  \00b7  Intro';
  display: block; position: sticky; bottom: -6px; margin: 6px -6px -6px; padding: 8px 16px 10px;
  border-top: 1px solid var(--z-borde); border-radius: 0 0 var(--z-radius-md) var(--z-radius-md); background: var(--z-superficie);
  color: var(--z-texto-suave); font-family: var(--z-font-body); font-size: var(--z-text-xs, 12px); font-weight: 400; line-height: 1.3;
}
/* Modales cortos (cobros, línea de albarán): la lista de resultados es absoluta y el cuerpo del modal solo mide lo que su contenido, así que quedaba
   dentro del scroll del cuerpo. Mientras hay una lista abierta, el cuerpo reserva sitio para ella. */
html body.smart-style-2 .modal-body:has(:is(ul.hm-lista, ul.zt-lista):not([hidden])) { min-height: min(360px, 60vh); }