/* Dashboard ULISES. CSS a mano, sin framework ni build step. */

:root {
  --tinta: #1b1b1f;
  --suave: #5c5f6b;
  --linea: #d9dbe3;
  --fondo: #f6f7fa;
  --panel: #ffffff;
  --acento: #2f5bd0;
  --ok: #1f8a4c;
  --alerta: #c2410c;
  --malo: #b91c1c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.5;
}

/* --- Barra superior ----------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.5rem;
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
}
.brand { font-weight: 700; letter-spacing: 0.14em; text-decoration: none; color: var(--tinta); }
.topbar nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.topbar nav a { color: var(--suave); text-decoration: none; }
.topbar nav a:hover { color: var(--acento); text-decoration: underline; }
.who { margin-left: auto; color: var(--suave); font-size: 0.9rem; }
.logout { margin-left: 0.75rem; color: var(--acento); }

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
  color: var(--suave);
  font-size: 0.8rem;
}

h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.75rem; }

/* --- Paneles ------------------------------------------------------------ */
.panel {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.card {
  flex: 1 1 180px;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 1rem;
}
.card .label { color: var(--suave); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.card .value { font-size: 1.7rem; font-weight: 600; margin-top: 0.25rem; }
.card .hint { color: var(--suave); font-size: 0.8rem; }

/* --- Tablas ------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; background: var(--panel); }
.tabla-wrap { overflow-x: auto; border: 1px solid var(--linea); border-radius: 8px; }
th, td { padding: 0.5rem 0.7rem; text-align: left; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th { background: #eef0f6; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--suave); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbff; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Etiquetas ---------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  border: 1px solid var(--linea);
  background: #eef0f6;
  color: var(--suave);
}
.badge.admin { background: #e8edfb; color: var(--acento); border-color: #c6d3f5; }
.badge.ACTIVE { background: #e6f4ec; color: var(--ok); border-color: #b6dfc6; }
.badge.COMPLETED { background: #eef0f6; color: var(--tinta); }
.badge.AUTO_CLOSED { background: #fdf0e6; color: var(--alerta); border-color: #f3d2b5; }
.badge.ABORTED { background: #fdeaea; color: var(--malo); border-color: #f2c2c2; }
.badge.flag { background: #fdeaea; color: var(--malo); border-color: #f2c2c2; margin-right: 0.2rem; }
.badge.ok { background: #e6f4ec; color: var(--ok); border-color: #b6dfc6; }

/* --- Barra certificado vs perdido -------------------------------------- */
.barra {
  display: flex;
  height: 34px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--linea);
  background: #eef0f6;
}
.barra .cert { background: #2f7d4f; }
.barra .perd { background: #d97757; }
.barra span {
  color: #fff;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.leyenda { display: flex; gap: 1.25rem; margin-top: 0.5rem; font-size: 0.85rem; color: var(--suave); }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 0.35rem; }
.leyenda .c { background: #2f7d4f; }
.leyenda .p { background: #d97757; }

/* --- Formularios -------------------------------------------------------- */
form.filtros { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
label { display: block; font-size: 0.8rem; color: var(--suave); margin-bottom: 0.2rem; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--linea);
  border-radius: 6px;
  font: inherit;
  background: #fff;
  min-width: 160px;
}
textarea { width: 100%; min-height: 150px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.9rem; }
button, .boton {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--acento);
  background: var(--acento);
  color: #fff;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.sec { background: #fff; color: var(--acento); }
button.peligro { background: #fff; color: var(--malo); border-color: var(--malo); }

.aviso { padding: 0.6rem 0.9rem; border-radius: 6px; margin-bottom: 1rem; }
.aviso.error { background: #fdeaea; color: var(--malo); border: 1px solid #f2c2c2; }
.aviso.ok { background: #e6f4ec; color: var(--ok); border: 1px solid #b6dfc6; }
.aviso.info { background: #eef0f6; color: var(--suave); border: 1px solid var(--linea); }

code, .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.88rem; }
.payload { background: #1b1b1f; color: #e8e8ea; padding: 0.35rem 0.6rem; border-radius: 5px; display: inline-block; }
.suave { color: var(--suave); }
.vacio { padding: 2rem; text-align: center; color: var(--suave); }

/* --- Login -------------------------------------------------------------- */
.login-box { max-width: 380px; margin: 4rem auto; }
.login-box input { width: 100%; margin-bottom: 0.75rem; }
.login-box button { width: 100%; }

.paginacion { display: flex; gap: 0.75rem; align-items: center; margin-top: 1rem; color: var(--suave); font-size: 0.9rem; }

/* --- Formulario de política --------------------------------------------- */
/* Elegir apps por su nombre en vez de escribir `com.zhiliaoapp.musically` a
   mano. Las casillas son el control correcto: se ve de un vistazo qué está
   bloqueado y qué no, que es justo lo que un textarea no deja ver. */
.titulo-seccion {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--suave);
  margin: 1.75rem 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--linea);
}

.bloque {
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 0.9rem 1rem 1rem;
  margin: 0 0 1rem;
}
.bloque legend {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0 0.4rem;
}
.bloque[disabled] { opacity: 0.6; }

.casillas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}

/* Toda la etiqueta es zona de clic, no solo el cuadradito de 13 px. */
.casilla {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  cursor: pointer;
  background: var(--panel);
}
.casilla:hover { border-color: var(--acento); }
/* :has() deja marcar la píldora entera sin JavaScript, que es la regla de este
   dashboard. Donde no exista, la casilla igual se ve y funciona. */
.casilla:has(input:checked) {
  background: #e8edfb;
  border-color: #c6d3f5;
  color: var(--acento);
  font-weight: 500;
}
.casilla input { margin: 0; }

.grupo-apps + .grupo-apps { margin-top: 0.85rem; }
.grupo-titulo {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--suave);
  margin-bottom: 0.35rem;
}

/* Las políticas van plegadas: con seis o siete, la pantalla era un muro. */
.resumen-form {
  cursor: pointer;
  padding: 0.2rem 0;
  list-style-position: outside;
}
.resumen-form .badge { margin-left: 0.3rem; font-weight: 400; }

/* --- Página pública de descarga ---------------------------------------- */
/* La ve gente que llega a la sala con el teléfono en la mano y sin cuenta
   todavía, así que va sin barra de navegación y en una sola columna angosta:
   se lee de corrido con el pulgar. */
.descarga-main { max-width: 46rem; padding: 2.5rem 1.25rem 4rem; }
.descarga .marca {
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--suave);
  font-size: 0.85rem;
  margin: 0 0 0.6rem;
}
.descarga h1 { font-size: 1.8rem; margin: 0 0 0.6rem; }
.descarga .bajada { color: var(--suave); margin: 0 0 2rem; max-width: 34rem; }
.descarga h2 { font-size: 1rem; margin: 2.5rem 0 0.9rem; }

.boton-descarga {
  display: block;
  background: var(--acento);
  color: #fff;
  text-decoration: none;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1.05rem;
  text-align: center;
}
.boton-descarga:hover { background: #2749a8; }
.boton-descarga span {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 0.25rem;
}
.aviso-falta {
  border: 1px solid #f2c2c2;
  background: #fdeaea;
  color: var(--malo);
  padding: 1rem;
  border-radius: 8px;
}

.pasos ol { margin: 0; padding-left: 1.2rem; }
.pasos li { margin-bottom: 0.9rem; line-height: 1.55; }
.pasos em { color: var(--suave); }

.permisos dl { margin: 0; }
.permisos dt { font-weight: 600; margin-top: 1rem; }
.permisos dd {
  margin: 0.2rem 0 0;
  color: var(--suave);
  line-height: 1.5;
}

/* El QR se dibuja con fill="currentColor", así que hereda este color. */
.qr-caja {
  color: var(--tinta);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 0.9rem;
  width: 11rem;
}
.qr-caja svg { display: block; width: 100%; height: auto; }
.qr .url {
  font-size: 0.8rem;
  color: var(--suave);
  word-break: break-all;
  margin: 0.6rem 0 0;
}

.pie {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  color: var(--suave);
  font-size: 0.82rem;
}
.pie p { margin: 0.3rem 0; }
.pie .huella code { word-break: break-all; font-size: 0.75rem; }