/* Conéctate Fiber GIS — diseño responsive y personal v0.12.0 */

/* ---------- pantallas públicas: registro y nueva clave ---------- */
#publica, #pd-modal { position: fixed; inset: 0; z-index: 90; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start;
  padding: max(24px, env(safe-area-inset-top)) 14px 40px; background: linear-gradient(160deg, #0b2a5b, #102a43 60%, #0f172a); }
#pd-modal { background: #0f172acc; backdrop-filter: blur(4px); }
.pb-caja { width: min(520px, 100%); background: var(--pg-tarjeta, #fff); color: var(--pg-texto, #0f1d3a); border-radius: 20px; padding: 24px 22px; box-shadow: 0 20px 50px #0006; }
.pb-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pb-marca b { display: block; font-size: 17px; } .pb-marca small { color: var(--pg-tenue, #64748b); }
.pb-caja h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.02em; }
.pb-sub { color: var(--pg-tenue, #64748b); margin: 0 0 16px; }
.pb-caja form, .pg-form { display: flex; flex-direction: column; gap: 10px; }
.pb-caja label, .pg-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.pb-caja input, .pg-form input { padding: 11px 12px; border-radius: 10px; font-size: 16px; font-weight: 400; }
.pb-caja button { padding: 13px; border-radius: 12px; font-size: 16px; }
.pb-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pb-nota { margin: -4px 0 0; font-size: 12px; color: var(--pg-tenue, #64748b); }
.pb-error { color: #dc2626; min-height: 1em; margin: 0; font-size: 13.5px; }

/* ---------- panel de usuarios ---------- */
.us-form { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
.us-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--pg-tenue); }
.us-form button { padding: 9px 14px; border-radius: 10px; }
.us-enlace { margin-top: 10px; }
.us-enlace input { width: 100%; padding: 10px; border-radius: 10px; font-family: ui-monospace, monospace; font-size: 12.5px; }
.us-wa { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 10px; background: #16a34a; color: #fff !important; text-decoration: none; font-weight: 600; }
.us-tabla td small, .pg-tabla td small { display: block; color: var(--pg-tenue); font-size: 11.5px; }
.us-tabla tr { cursor: pointer; } .us-tabla tr.inactivo td { opacity: .55; }
.pg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lt-quien a { color: inherit; }

/* ---------- barra y pestañas del celular (ocultas en escritorio) ---------- */
#mv-barra, #mv-tabs, #mv-velo { display: none; }

@media (max-width: 760px) {
  :root { --lateral: 0px; }
  #app { flex-direction: column !important; }
  /* menú lateral como cajón */
  #lateral { position: fixed; top: 0; bottom: 0; left: 0; width: 270px; z-index: 70; transform: translateX(-105%); transition: transform .2s ease;
    padding: max(14px, env(safe-area-inset-top)) 12px 12px; box-shadow: 4px 0 24px #0003; display: flex !important; }
  body.menu-abierto #lateral { transform: none; }
  .lt-nombre, #menu a span, .lt-pie { display: initial; }
  .lt-pie { display: flex; }
  #menu a { justify-content: flex-start; padding: 11px 12px; }
  #mv-velo { position: fixed; inset: 0; z-index: 65; background: #0006; }
  body.menu-abierto #mv-velo { display: block; }
  /* barra superior */
  #mv-barra { display: flex; align-items: center; gap: 10px; padding: max(8px, env(safe-area-inset-top)) 10px 8px; background: var(--pg-tarjeta);
    border-bottom: 1px solid var(--pg-borde); position: relative; z-index: 20; }
  #mv-barra button, #mv-barra a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 19px;
    background: var(--pg-suave); border: 0; color: var(--pg-texto); text-decoration: none; }
  #mv-barra b { flex: 1; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.modo-campo #mv-barra { display: none; }
  /* pestañas inferiores */
  #mv-tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--pg-tarjeta); border-top: 1px solid var(--pg-borde); padding-bottom: env(safe-area-inset-bottom); }
  #mv-tabs a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 0 6px; color: var(--pg-tenue); text-decoration: none; font-size: 10.5px; }
  #mv-tabs a i { font-style: normal; font-size: 19px; line-height: 1.1; }
  #mv-tabs a.activo { color: var(--pg-azul); font-weight: 700; }
  #principal { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  /* mapa */
  #barra-mapa { flex-wrap: nowrap !important; overflow-x: auto; padding: 8px !important; -webkit-overflow-scrolling: touch; }
  #barra-mapa > * { flex: none; }
  #barra-mapa #form-buscar { min-width: 230px; }
  #v-mapa #panel { top: auto !important; bottom: 0; height: 56vh; border-radius: 16px 16px 0 0; }
  #v-mapa #modo { top: auto; bottom: 14px; }
  /* ventanas */
  #v-pagina { padding: 12px 12px 24px; }
  .pg-meta { display: none; }
  .pg-cab h1 { font-size: 21px; } .pg-cab { margin-bottom: 12px; }
  .pg-cab-der { width: 100%; } .pg-sel { min-width: 0; width: 100%; }
  .pg-tarjeta { padding: 14px; border-radius: 14px; }
  .pg-tarjeta, .pg-detalle { overflow-x: auto; }
  .pg-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pg-kpi b { font-size: 20px; }
  .pg-heroe h2 { font-size: 34px; } .pg-heroe { padding-top: 6px; }
  .olt-chasis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .olt-tarjeta { padding: 8px; } .olt-p { font-size: 11px; padding: 6px 0 !important; }
  .cb-buffers { grid-template-columns: repeat(3, 1fr); gap: 6px; } .cb-buffer { padding: 8px !important; }
  .nap-panel { width: 100%; grid-template-columns: repeat(4, 1fr); padding: 10px; gap: 8px; }
  .tz-paso { width: calc(50% - 20px); }
  .us-form { grid-template-columns: 1fr 1fr; } .us-form label:first-child, .us-form button { grid-column: 1 / -1; }
  .pb-dos { grid-template-columns: 1fr; }
  /* superposiciones a pantalla completa por encima de las pestañas */
  #tablero, #rackv, #diagrama { left: 0 !important; bottom: calc(56px + env(safe-area-inset-bottom)) !important; }
  #tablero .tb-top { padding: 8px 10px 4px; } #tablero .tb-top h1 { font-size: 17px; } #tablero .tb-top h1 span, #tablero .tb-migas { display: none; }
  #tablero .tb-barra { flex-wrap: nowrap; overflow-x: auto; margin: 4px 8px 8px; } #tablero .tb-barra > * { flex: none; }
  #tablero .tb-buscar { min-width: 180px; }
  .cp-mapa-full { bottom: calc(56px + env(safe-area-inset-bottom)) !important; }
  #cp-medir, #esc { z-index: 95; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  :root { --lateral: 72px; }
  #lateral { padding: 12px 6px; }
  .lt-nombre, #menu a span, .lt-pie span, .lt-pie .tenue { display: none; }
  #menu a { justify-content: center; padding: 10px 0; }
  .lt-pie button { padding: 6px 4px; font-size: 11px; }
}
.pg-d-acc button.tb-peligro { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }

/* aviso de migraciones faltantes */
#aviso-migr { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 99; width: min(760px, 94vw); background: #7f1d1d; color: #fff;
  padding: 14px 16px; border-radius: 14px; box-shadow: 0 10px 30px #0006; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
#aviso-migr code { display: block; background: #0006; padding: 6px 8px; border-radius: 8px; font-size: 12px; word-break: break-all; user-select: all; }
#aviso-migr button { align-self: flex-end; background: #fff2; color: #fff; border: 0; padding: 6px 12px; border-radius: 8px; }

/* v0.13.0: el contenido se desplaza en el celular (el contenedor no debe crecer más que la pantalla) */
#principal { min-height: 0; }
.vista { min-height: 0; }
#v-pagina { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
@media (max-width: 760px) {
  #principal { flex: 1 1 auto; min-height: 0; }
  #v-pagina { height: 100%; }
  .pg-lateral { max-height: none; position: static; }
  .rk-buscar { width: 100%; } .rk-buscar input { min-width: 0; flex: 1; }
  .rk-vista { flex: none; }
  .pg-cab-der { gap: 6px; }
}