/* Panel admin de PokeDistrict — mobile-first.
   Pensado para usarse con una mano, parado en la oficina, con el celular:
   objetivos táctiles de 44px, navegación abajo (al alcance del pulgar) y
   tipografía grande. En pantallas anchas la misma estructura se estira. */

:root {
  --fondo: #0e1116;
  --fondo-2: #161b23;
  --fondo-3: #1e2530;
  --borde: #2a323f;
  --texto: #e8edf4;
  --texto-2: #9aa7b8;
  --marca: #e63946;      /* rojo Pokémon District */
  --marca-2: #ffb703;    /* dorado, para acentos */
  --ok: #2dd4a7;
  --alerta: #f7b955;
  --error: #ff6b6b;
  --radio: 14px;
  --sombra: 0 6px 24px rgba(0, 0, 0, .35);
  --nav-alto: 62px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: contain;
}

body.con-nav #vista {
  padding-bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom, 0px) + 16px);
}

/* ------------------------------------------------------------- estructura */

header.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
  background: rgba(14, 17, 22, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
header.barra h1 { font-size: 18px; margin: 0; flex: 1; font-weight: 650; }
header.barra .sub { font-size: 12px; color: var(--texto-2); font-weight: 400; }

main { padding: 16px; max-width: 900px; margin: 0 auto; }

nav.inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--fondo-2);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
nav.inferior button {
  background: none; border: 0; color: var(--texto-2);
  font-size: 11px; padding: 8px 2px; min-height: var(--nav-alto);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: pointer;
}
nav.inferior button .icono { font-size: 20px; line-height: 1; }
nav.inferior button[aria-current="page"] { color: var(--marca-2); }

/* ------------------------------------------------------------- componentes */

.tarjeta {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px; margin-bottom: 12px;
}
.tarjeta h2 { margin: 0 0 12px; font-size: 15px; color: var(--texto-2);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--fondo-3); border-radius: 12px; padding: 12px; }
.kpi .valor { font-size: 22px; font-weight: 700; line-height: 1.2; }
.kpi .etiqueta { font-size: 12px; color: var(--texto-2); margin-top: 2px; }
.kpi.acento .valor { color: var(--marca-2); }
.kpi.alerta .valor { color: var(--alerta); }

.fila {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--borde);
  min-height: 56px;
}
.fila:last-child { border-bottom: 0; }
.fila .miniatura {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
  background: var(--fondo-3); flex-shrink: 0;
}
.fila .cuerpo { flex: 1; min-width: 0; }
.fila .titulo { font-weight: 600; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .detalle { font-size: 12.5px; color: var(--texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .derecha { text-align: right; flex-shrink: 0; font-size: 13px; }

.chip {
  display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: var(--fondo-3); color: var(--texto-2); border: 1px solid var(--borde);
  white-space: nowrap;
}
.chip.ok { color: var(--ok); border-color: rgba(45, 212, 167, .4); }
.chip.alerta { color: var(--alerta); border-color: rgba(247, 185, 85, .4); }
.chip.error { color: var(--error); border-color: rgba(255, 107, 107, .4); }
.chip.marca { color: var(--marca-2); border-color: rgba(255, 183, 3, .4); }

button, .boton {
  font: inherit; font-weight: 600; border-radius: 10px; border: 1px solid var(--borde);
  background: var(--fondo-3); color: var(--texto);
  padding: 11px 14px; min-height: 44px; cursor: pointer;
}
button:active { transform: scale(.985); }
button.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
button.fantasma { background: transparent; }
button.chico { min-height: 36px; padding: 6px 10px; font-size: 13px; }
button:disabled { opacity: .5; cursor: default; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.acciones button { flex: 1 1 auto; }

label { display: block; font-size: 13px; color: var(--texto-2); margin: 12px 0 4px; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--texto);
  background: var(--fondo-3); border: 1px solid var(--borde);
  border-radius: 10px; padding: 11px 12px; min-height: 44px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--marca-2); outline-offset: 1px;
}
.linea { display: flex; gap: 10px; align-items: flex-end; }
.linea > * { flex: 1; }
.interruptor { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.interruptor input { width: 22px; height: 22px; min-height: 0; flex: 0 0 auto; }
.interruptor label { margin: 0; color: var(--texto); font-size: 15px; }

.buscador { display: flex; gap: 8px; margin-bottom: 12px; }
.pestanas { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; }
.pestanas button { min-height: 38px; padding: 7px 13px; font-size: 13.5px; white-space: nowrap; }
.pestanas button[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }

.vacio { text-align: center; color: var(--texto-2); padding: 32px 12px; font-size: 14px; }
.cargando { text-align: center; color: var(--texto-2); padding: 24px; }

table.datos { width: 100%; border-collapse: collapse; font-size: 13px; }
table.datos th, table.datos td {
  text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--borde);
  vertical-align: top;
}
table.datos th { color: var(--texto-2); font-weight: 600; font-size: 12px; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.barra-progreso { height: 8px; background: var(--fondo-3); border-radius: 999px; overflow: hidden; }
.barra-progreso > div { height: 100%; background: var(--marca-2); transition: width .3s; }

/* Hoja modal: en celular sube desde abajo, en desktop queda centrada. */
dialog.hoja {
  border: 0; padding: 0; background: transparent; max-width: 100%; width: 100%;
  margin: auto auto 0; color: var(--texto);
}
dialog.hoja::backdrop { background: rgba(0, 0, 0, .6); }
dialog.hoja .contenido {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio) var(--radio) 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 88vh; overflow-y: auto; box-shadow: var(--sombra);
}
dialog.hoja h2 { margin: 0 0 4px; font-size: 18px; }
@media (min-width: 640px) {
  dialog.hoja { max-width: 560px; margin: auto; }
  dialog.hoja .contenido { border-radius: var(--radio); }
}

#aviso {
  position: fixed; left: 16px; right: 16px; z-index: 60;
  bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom, 0px) + 12px);
  background: var(--fondo-3); border: 1px solid var(--borde);
  border-radius: 12px; padding: 12px 14px; box-shadow: var(--sombra);
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s;
}
#aviso.visible { opacity: 1; }
#aviso.error { border-color: var(--error); color: var(--error); }
#aviso.ok { border-color: var(--ok); }

/* Login: pantalla completa, sin navegación. */
#login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
#login .caja { width: 100%; max-width: 360px; }
#login .marca { text-align: center; margin-bottom: 24px; }
#login .marca .nombre { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
#login .marca .nombre span { color: var(--marca); }
#login .marca .bajada { color: var(--texto-2); font-size: 13px; }
.oculto { display: none !important; }