/* Javi 1.2 — panel "Administrador" dentro de la app (Nerio, 23/09/2026).
   Reemplaza al panel aparte /admin (negro y azul) que no le gustaba: las mismas
   estadísticas de adopción y la misma administración del catálogo de música,
   pero con la estética de la app (carbón, rojo y oro) y solo para su cuenta.
   Capa a pantalla completa, igual que la de juegos y la de agenda. */

#admin-capa {
  position: fixed; inset: 0; z-index: 70; display: none; flex-direction: column;
  background: var(--carbon); height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: contain;
}
#admin-capa.on { display: flex; }

/* ---- Barra superior ---- */
#admin-capa .barra {
  flex: none; display: flex; align-items: center; gap: 8px; position: relative;
  height: calc(46px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0;
  background: linear-gradient(180deg, rgba(40, 8, 12, .92), rgba(15, 12, 14, .92));
  border-bottom: 1px solid var(--borde);
}
#admin-capa .barra::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro), var(--rojo2), var(--oro), transparent); opacity: .8;
}
#admin-capa .barra button {
  padding: 6px 12px; border-radius: 10px; border: 1px solid var(--borde); background: rgba(0,0,0,.4);
  font: 600 12.5px var(--f-texto); color: var(--oro2); white-space: nowrap;
}
#admin-capa .barra button:active { transform: scale(.96); }
#admin-capa .barra .titulo {
  flex: 1; min-width: 0; text-align: right; font: 700 12px var(--f-titulo); letter-spacing: 2px;
  color: var(--oro2); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Pestañas (Adopción / Música) ---- */
#admin-capa .pestanas { flex: none; display: flex; gap: 6px; padding: 8px 10px 0; }
#admin-capa .pestanas button {
  flex: 1; padding: 9px 10px; border-radius: 12px 12px 0 0; border: 1px solid var(--borde); border-bottom: none;
  background: rgba(0,0,0,.35); color: var(--mut); font: 600 11.5px var(--f-titulo); letter-spacing: 1.5px; text-transform: uppercase;
}
#admin-capa .pestanas button.on { color: var(--oro3); border-color: var(--oro); background: rgba(220,171,36,.12); }

/* ---- Cuerpo ---- */
#admin-capa .cuerpo {
  flex: 1; min-height: 0; overflow-y: auto; padding: 10px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 900px; margin: 0 auto; font-size: 13.5px;
}
#admin-capa .tarjeta-a {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; backdrop-filter: blur(10px);
}
#admin-capa h4 { margin: 0 0 8px; font: 700 10.5px var(--f-titulo); letter-spacing: 2px; color: var(--oro); text-transform: uppercase; }
#admin-capa .vacio, #admin-capa .nota { color: var(--mut); padding: 6px 0; font-size: 12.5px; }
#admin-capa .err { color: var(--rojo2); padding: 6px 0; }

/* Tarjetas de números */
#admin-capa .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
#admin-capa .kpi { background: rgba(0,0,0,.3); border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; text-align: center; }
/* 18px y sin partir: "10 h 53 min" cabe en una línea y las tarjetas quedan todas del mismo alto. */
#admin-capa .kpi b { display: block; font: 700 18px var(--f-titulo); color: var(--oro3); white-space: nowrap; }
#admin-capa .kpi span { color: var(--mut); font-size: 11.5px; }

/* Barras horizontales de uso por tipo */
#admin-capa .hbar { display: grid; grid-template-columns: minmax(90px, 130px) 1fr auto; gap: 8px; align-items: center; padding: 3px 0; font-size: 12.5px; }
#admin-capa .hbar .n { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#admin-capa .hbar .t { height: 10px; background: rgba(255,255,255,.06); border-radius: 5px; overflow: hidden; }
#admin-capa .hbar .t i { display: block; height: 100%; background: linear-gradient(90deg, var(--rojo2), var(--oro)); border-radius: 5px; }
#admin-capa .hbar .v { color: var(--oro2); font-weight: 600; white-space: nowrap; font-size: 12px; }
#admin-capa .hbar .v small { color: var(--mut); font-weight: 400; }

/* Ranking de lo más y lo menos usado */
#admin-capa .rank { display: flex; gap: 6px; flex-wrap: wrap; }
#admin-capa .rank .chip { padding: 4px 10px; border-radius: 12px; border: 1px solid var(--borde); background: rgba(0,0,0,.35); font-size: 12px; white-space: nowrap; }
#admin-capa .rank .chip b { color: var(--oro2); }
#admin-capa .rank .chip.flojo { border-color: var(--borde2); color: var(--mut); }

/* Un usuario, con su desglose desplegable */
#admin-capa .us { border-top: 1px solid rgba(255,255,255,.06); padding: 8px 0; }
#admin-capa .us .cab { display: flex; align-items: center; gap: 8px; cursor: pointer; }
#admin-capa .us .cab .nom { flex: 1; min-width: 0; }
#admin-capa .us .cab .nom b { display: block; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#admin-capa .us .cab .nom small { display: block; color: var(--mut); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#admin-capa .us .cab .num { flex: none; text-align: right; font-size: 12px; color: var(--mut); }
#admin-capa .us .cab .num b { display: block; color: var(--oro2); font: 700 14px var(--f-titulo); }
#admin-capa .us .cab .flecha { flex: none; color: var(--oro); transition: transform .15s; }
#admin-capa .us.abierto .cab .flecha { transform: rotate(90deg); }
#admin-capa .us .det { display: none; padding: 6px 0 2px 4px; }
#admin-capa .us.abierto .det { display: block; }
#admin-capa .us .det .fila-d { display: flex; gap: 8px; flex-wrap: wrap; color: var(--mut); font-size: 12px; margin-bottom: 6px; }
#admin-capa .us .det .fila-d b { color: var(--fg); font-weight: 600; }

/* ---- Pestaña Música: subir y catálogo ---- */
#admin-capa .form-cancion { display: flex; flex-direction: column; gap: 8px; }
#admin-capa .form-cancion .rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
#admin-capa .form-cancion label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--mut); }
#admin-capa .form-cancion input, #admin-capa .form-cancion select {
  width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--borde);
  background: rgba(0,0,0,.35); color: var(--fg); font: 400 13.5px var(--f-texto);
}
#admin-capa .form-cancion input[type=file] { padding: 7px 8px; font-size: 12px; }
#admin-capa .form-cancion .enviar {
  align-self: flex-start; padding: 9px 18px; border-radius: 12px; border: 1px solid var(--oro);
  background: linear-gradient(135deg, var(--rojo), var(--rojo3)); color: var(--oro3);
  font: 700 12px var(--f-titulo); letter-spacing: 1.5px; text-transform: uppercase;
}
#admin-capa .cancion-a { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); }
#admin-capa .cancion-a .tapa { width: 40px; height: 40px; border-radius: 8px; flex: none; object-fit: cover; border: 1px solid var(--borde); background: rgba(0,0,0,.4); }
#admin-capa .cancion-a .txt { flex: 1; min-width: 0; }
#admin-capa .cancion-a .txt b { display: block; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#admin-capa .cancion-a .txt small { color: var(--mut); font-size: 11.5px; }
#admin-capa .cancion-a .quitar { flex: none; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--borde2); background: rgba(0,0,0,.35); color: var(--rojo2); font-size: 12px; }