/* ══════ BIBLIOTECA DE INTERFAZ · estilos ═══════════════════════════════════
   Los componentes de js/ui.js: desplegable, calendario y diálogos. Regla del
   proyecto (docs/ESTETICA.md §3.1): cero controles nativos. Mismo patrón que el
   .dd del BI (informes.css), con las variables del panel. */
.ui-dd{position:relative}
.ui-dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:34px;padding:6px 10px;border:1px solid var(--linea);border-radius:8px;
  background:var(--sup);color:var(--tinta);font-family:inherit;font-size:13.5px;cursor:pointer;transition:.14s}
.ui-dd-btn:hover{border-color:var(--acc)}
.ui-dd.open .ui-dd-btn{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-suave)}
.ui-dd.open .ui-dd-btn svg{transform:rotate(180deg)}
.ui-dd-btn svg{width:14px;height:14px;stroke:var(--tenue);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .16s}
.ui-dd-btn .ui-dd-vacio{color:var(--flojo)}
.ui-dd-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;display:none;
  min-width:100%;max-height:280px;overflow:auto;background:var(--sup);border:1px solid var(--linea);
  border-radius:10px;padding:5px;box-shadow:var(--sombra-pop)}
.ui-dd.open .ui-dd-pop{display:block}
.ui-dd-item{padding:8px 11px;border-radius:7px;font-size:13px;color:var(--tinta-2);cursor:pointer;white-space:nowrap}
.ui-dd-item:hover{background:var(--sup-2);color:var(--tinta)}
.ui-dd-item.on{background:var(--acc-suave);color:var(--tinta);font-weight:600}

.ui-fch-pop{padding:11px;min-width:264px}
.ui-fch-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:13px;font-weight:600}
.ui-fch-nav{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:1px solid var(--linea);border-radius:7px;background:var(--sup);color:var(--tenue);cursor:pointer}
.ui-fch-nav:hover{border-color:var(--acc);color:var(--acc)}
.ui-fch-nav svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ui-fch-sem{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:2px}
.ui-fch-sem span{text-align:center;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  color:var(--flojo);padding:4px 0}
.ui-fch-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ui-fch-dia{aspect-ratio:1;min-width:0;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:7px;background:none;color:var(--tinta-2);font-family:inherit;font-size:12.5px;cursor:pointer}
.ui-fch-dia:hover:not([disabled]){background:var(--sup-2)}
.ui-fch-dia.otro{color:var(--flojo)}
.ui-fch-dia.hoy{font-weight:700;color:var(--acc)}
.ui-fch-dia.on{background:var(--acc);color:#fff;font-weight:600}
.ui-fch-dia[disabled]{color:var(--flojo);opacity:.4;cursor:default}


/* ── Diálogos ─────────────────────────────────────────────────────────────
   Un diálogo pequeño y centrado para una pregunta o un dato suelto; sustituye a
   confirm() y prompt(). Un formulario de verdad va en la hoja lateral. Los
   botones son los de siempre (.btn, .btn.sec, .btn.mal). Por encima de la hoja
   (95) y por debajo del aviso (120). */
.ui-velo{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(13,17,23,.38)}
.ui-dlg{width:100%;max-width:420px;max-height:calc(100vh - 40px);overflow:auto;background:var(--sup);
  border:1px solid var(--linea);border-radius:var(--r);padding:22px 22px 18px;box-shadow:var(--sombra-pop)}
.ui-dlg h3{margin:0 0 8px;font-size:16px;font-weight:600;line-height:1.3;color:var(--tinta)}
.ui-dlg p{margin:0 0 18px;font-size:13.5px;line-height:1.55;color:var(--tinta-2);
  white-space:pre-line;overflow-wrap:anywhere}
.ui-dlg .fld{margin:0 0 18px}
.ui-dlg .fila{justify-content:flex-end}
/* Opciones grandes, una debajo de otra: elegir qué imprimir (Ocupación). */
.ui-dlg .imp-ops{display:grid;gap:10px;margin:0 0 14px}
.ui-dlg .imp-ops .btn{width:100%;min-height:48px;font-size:14.5px}
/* «.btn.mal» del panel es el contorno rojo de un botón secundario; aquí es el
   botón principal de una acción que destruye, así que va relleno. */
.ui-dlg .btn.mal{background:var(--rojo);border-color:var(--rojo);color:var(--sup)}
.ui-dlg .btn.mal:hover{background:var(--rojo);filter:brightness(1.07)}
@media(max-width:520px){
  .ui-velo{align-items:flex-end;padding:0}
  .ui-dlg{max-width:none;border-radius:var(--r) var(--r) 0 0;border-bottom:none}
  .ui-dlg .fila .btn{flex:1 1 0;min-height:44px}
}

/* ── Entrada con el usuario de OMNI (producción y compras) ────────────────
   La de gestión tal cual (.entrada, .tarjeta, .fld, .err, .btn de panel.css).
   Aquí solo lo que cambia por ir dentro del panel: el ancho fijo (en el
   contenedor flex de producción se encogería al contenido), menos aire
   arriba, la lista de sedes y la entrada sin usuario. */
.ui-omni{width:100%;margin:6vh auto}
.ui-sedes{display:flex;flex-direction:column;gap:8px}
.ui-sede{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:38px;
  padding:8px 12px;border:1px solid var(--linea);border-radius:8px;background:var(--sup);color:var(--tinta);
  font-family:inherit;font-size:13.5px;font-weight:500;text-align:left;cursor:pointer;transition:.14s}
.ui-sede:hover{border-color:var(--acc);background:var(--hover)}
.ui-sede:disabled{opacity:.6;cursor:default}
.ui-sede small{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.ui-demo{width:100%;min-height:38px;margin-top:12px}
.entrada .ui-demo-nota{font-size:12px;margin:6px 0 0}
/* En la cabecera del módulo, mientras se usa la demostración. */
.ui-demo-insignia{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
  background:var(--ambar-suave);color:var(--ambar);font-size:11.5px;font-weight:600;vertical-align:1px}