/* Ordenatec · lista desplegable común (07/11/2026). Va con lista.js.
   Modelo: los campos con etiqueta de Indicadores (.dir-fi, «Línea · Mis líneas») para la caja cerrada y su menú «Exportar»
   (.dir-menu-l) para la lista: radio 14, borde de línea, sombra --o-sh-2, relleno 6, opciones de 600 y 13,5 px con radio 8,
   la misma flecha (7 px a 45°, gris pizarra) y la misma entrada (.2 s). Colores solo de la paleta de marca. */

/* ---------- 1. Caja cerrada: la misma flecha en todos los select de una línea ---------- */
html:not(#o):not(#p) select:not([multiple]):not([data-ot-nativo]) {
  -webkit-appearance: none !important; appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.2 6 8l3.8-3.8' fill='none' stroke='%23607089' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px 12px !important;
  padding-right: 34px !important; cursor: pointer; text-overflow: ellipsis;
}
html[data-ot-theme=dark]:not(#o):not(#p) select:not([multiple]):not([data-ot-nativo]),
html[data-ot-lista-tema=dark]:not(#o):not(#p) select:not([multiple]):not([data-ot-nativo]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.2 6 8l3.8-3.8' fill='none' stroke='%2397A8C4' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E") !important;
}
html:not(#o):not(#p) select[size]:not([size="0"]):not([size="1"]) { background-image: none !important; padding-right: revert !important; }
html:not(#o):not(#p) select:disabled { cursor: default; opacity: .7; }
/* Los campos que ya dibujan su flecha en la caja (.dir-fi, .o-field.sel) se quedan como están: sin segunda flecha */
html:not(#o):not(#p) :is(.dir-fi, .o-field.sel) select:not([multiple]) { background-image: none !important; padding-right: 4px !important; }
html:not(#o):not(#p) .dir-fi select:not([multiple]) { padding-right: 0 !important; }
/* Con la lista abierta, la caja se ve con foco, como al pulsarla */
html:not(#o):not(#p) select[aria-expanded=true] { border-color: var(--o-focus, #0D8EF2) !important; }
html:not(#o):not(#p) :is(.dir-fi, .o-field.sel):has(> select[aria-expanded=true], > span > select[aria-expanded=true]) { border-color: var(--o-focus, #0D8EF2) !important; box-shadow: 0 0 0 3px rgba(13,142,242,.15) !important; }

/* ---------- 2. La lista ---------- */
.ot-lista {
  --l-bg: var(--o-surface, #FFFFFF); --l-line: var(--o-line, #E3EAF5); --l-line2: var(--o-line-2, #EDF2F9);
  --l-ink: var(--o-ink, #0B1B33); --l-muted: var(--o-muted, #607089); --l-faint: var(--o-faint, #93A1B6);
  --l-pri: var(--o-primary, #0B64F0); --l-soft: var(--o-primary-soft, rgba(11,100,240,.08)); --l-hover: var(--o-hover, rgba(11,27,51,.04));
  --l-focus: var(--o-focus, #0D8EF2); --l-sh: var(--o-sh-2, 0 16px 40px rgba(11,27,51,.14));
  position: fixed; z-index: 2147483000; box-sizing: border-box; left: 0; top: 0;
  min-width: 160px; max-width: calc(100vw - 32px);
  background: var(--l-bg); border: 1px solid var(--l-line); border-radius: 14px; box-shadow: var(--l-sh);
  padding: 6px; margin: 0; color: var(--l-ink);
  font: 600 13.5px/1.35 var(--o-font, "Plus Jakarta Sans", Arial, sans-serif); letter-spacing: normal; text-transform: none; text-align: left;
  animation: ot-lista-abajo .2s ease both;
}
.ot-lista[data-lado=arriba] { animation-name: ot-lista-arriba; }
@keyframes ot-lista-abajo { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ot-lista-arriba { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ot-lista { animation: none; } }
html[data-ot-theme=dark] .ot-lista, .ot-lista[data-ot-tema=dark], html[data-ot-lista-tema=dark] .ot-lista {
  --l-bg: var(--o-surface, #0B1B33); --l-line: var(--o-line, #1C3358); --l-line2: var(--o-line-2, #16294A);
  --l-ink: var(--o-ink, #F4F8FF); --l-muted: var(--o-muted, #97A8C4); --l-faint: var(--o-faint, #6E819F);
  --l-pri: var(--o-primary, #17B8F6); --l-soft: var(--o-primary-soft, rgba(23,184,246,.12)); --l-hover: var(--o-hover, rgba(255,255,255,.04));
  --l-focus: var(--o-focus, #17B8F6); --l-sh: var(--o-sh-2, 0 16px 40px rgba(0,0,0,.5));
}
/* Fuera de la hoja base (p. ej. Stats) el oscuro no trae las variables: valores de la marca */
html[data-ot-lista-tema=dark] .ot-lista, html[data-ot-theme=dark]:not(.ot-pieces) .ot-lista {
  --l-bg: #0B1B33; --l-line: #1C3358; --l-line2: #16294A; --l-ink: #F4F8FF; --l-muted: #97A8C4; --l-faint: #6E819F;
  --l-pri: #17B8F6; --l-soft: rgba(23,184,246,.12); --l-hover: rgba(255,255,255,.04); --l-focus: #17B8F6; --l-sh: 0 16px 40px rgba(0,0,0,.5);
}
.ot-lista-l {
  display: flex; flex-direction: column; gap: 1px; max-height: 380px; overflow-y: auto; overscroll-behavior: contain;
  outline: 0; scrollbar-width: thin; scrollbar-color: var(--l-line) transparent; box-sizing: border-box;
}
.ot-lista-op {
  display: flex; align-items: center; gap: 9px; min-height: 36px; box-sizing: border-box; padding: 8px 8px 8px 10px; border-radius: 8px;
  cursor: pointer; color: var(--l-ink); white-space: normal; overflow-wrap: anywhere; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ot-lista-op > span { flex: 1 1 auto; min-width: 0; }
.ot-lista-op > svg { flex: none; width: 16px; height: 16px; color: var(--l-pri); visibility: hidden; }
.ot-lista-op.activa { background: var(--l-hover); }
.ot-lista[data-teclado] .ot-lista-op.activa { background: var(--l-soft); box-shadow: inset 0 0 0 1.5px var(--l-focus); }
.ot-lista-op[aria-selected=true] { color: var(--l-pri); font-weight: 700; }
.ot-lista-op[aria-selected=true] > svg { visibility: visible; }
.ot-lista-op[aria-disabled=true] { color: var(--l-faint); cursor: default; background: none; box-shadow: none; }
.ot-lista-op.accion { color: var(--l-pri); }
.ot-lista-g { display: flex; flex-direction: column; gap: 1px; }
.ot-lista-gt { font-size: 11px; font-weight: 800; color: var(--l-muted); text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px 3px; }
.ot-lista-sep { flex: none; height: 1px; background: var(--l-line2); margin: 5px 6px; }
@media (pointer: coarse) { .ot-lista-op { min-height: 44px; } }
@media (forced-colors: active) {
  .ot-lista { border: 1px solid CanvasText; }
  .ot-lista-op.activa { outline: 2px solid Highlight; outline-offset: -2px; }
  .ot-lista-op[aria-selected=true] > svg { color: CanvasText; }
}
@media print { .ot-lista { display: none !important; } }