/* Kevor Console (hosted) — additions on top of the shared style.css:
   login overlay + native form controls replacing Dash's React widgets. */

/* ——— login (passkey) ——— */
/* explicit display rules beat the UA [hidden] default — restore it */
.login-capa[hidden], .app[hidden], .login-btn[hidden] { display: none; }
.login-capa {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center;
  justify-content: center; background: var(--negro); padding: 20px;
}
.login-card {
  max-width: 360px; width: 100%; padding: 34px 28px; text-align: center;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.login-logo { width: 64px; height: 64px; border-radius: 15px; }
.login-card h1 { font: 700 22px/1.2 var(--f-disp); letter-spacing: -.02em; }
.login-btn { justify-content: center; width: 100%; padding: 11px 16px; font-size: 14.5px; }
.login-msg { min-height: 18px; font-size: 12.5px; color: var(--gris); }
.login-msg.mal { color: var(--coral); }

/* ——— native selects styled like the Dash dropdowns ——— */
select.sel {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: var(--panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%2394a0ae' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>") no-repeat right 10px center;
  border: 1px solid var(--linea2); border-radius: 8px; color: var(--tinta);
  font: 13px var(--f-body); padding: 7px 26px 7px 10px; min-width: 0;
}
select.sel:focus { border-color: var(--cian); outline: none; }

/* native date inputs replacing the react date range picker */
.picker-fechas { display: inline-flex; align-items: center; gap: 6px; }
.picker-fechas input[type="date"] {
  background: var(--panel); border: 1px solid var(--linea2); border-radius: 8px;
  color: var(--tinta); font: 12.5px var(--f-body); padding: 6px 8px;
  color-scheme: light;
}
:root[data-theme="dark"] .picker-fechas input[type="date"] { color-scheme: dark; }
.picker-fechas input[type="date"]:focus { border-color: var(--cian); outline: none; }

/* native range slider replacing rc-slider */
input[type="range"].rango { width: 100%; accent-color: var(--cian); }
.rango-marcas { display: flex; justify-content: space-between; font: 11px var(--f-mono); color: var(--gris2); margin-top: 4px; }

/* layout wrappers that Dash used to inject */
.llmf-fb-fila > select.llmf-fb-prov { flex: 0 0 130px; width: 130px; }
.llmf-fb-fila > select.llmf-fb-model { flex: 1; }
@media (max-width: 520px) {
  .llmf-fb-fila { display: grid; grid-template-columns: 1fr 34px; gap: 6px; align-items: center; }
  .llmf-fb-fila > select.llmf-fb-prov { grid-column: 1 / -1; width: 100%; }
  .llmf-fb-fila > select.llmf-fb-model { grid-column: 1; }
  .llmf-fb-del { grid-column: 2; }
}

/* checkbox rows (pc-switch / pc-check / seg) */
.pc-switch label, .pc-check label, .seg label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.pc-switch input, .pc-check input, .seg input { accent-color: var(--coral); }

/* iOS safe areas + touch targets */
@supports (padding: env(safe-area-inset-bottom)) {
  .contenido { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}
@media (max-width: 620px) {
  .nav-link { padding-top: 9px; padding-bottom: 9px; }
}