/* =====================================================================
 *  /policia — Policía Nacional
 *  ---------------------------------------------------------------------
 *  Se apoya en guia.css para todo el armazón (capa, índice, marca,
 *  cuerpo, botones del final, volver arriba). Aquí solo van las piezas
 *  propias de esta página: la tabla del código penal, los diez rangos y
 *  la comparativa de dos columnas.
 *
 *  Ni un color a pelo: todo sale de los tokens de styles.css, igual que
 *  el resto de la web.
 * ===================================================================== */

/* ---------- entradilla de los dos públicos ---------- */

.pol-quien {
  display: inline-block;
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid;
  margin-bottom: 4px;
}
.pol-quien.civil {
  color: var(--dorado);
  background: rgba(232, 179, 58, .11);
  border-color: var(--borde-dorado);
}
.pol-quien.poli {
  color: var(--azul);
  background: rgba(90, 155, 213, .11);
  border-color: rgba(90, 155, 213, .34);
}

/* ---------- código penal ---------- */

.pol-tabla {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--sup-tarjeta);
  box-shadow: var(--luz-superior);
  margin: 0 0 10px;
}
.pol-tabla table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 14.5px;
}
.pol-tabla thead th {
  text-align: left;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-apagado);
  padding: 13px 14px;
  border-bottom: 1px solid var(--borde);
  background: var(--sup-alta);
  white-space: nowrap;
}
.pol-tabla tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
  color: var(--texto-tenue);
  vertical-align: top;
}
.pol-tabla tbody tr:last-child td { border-bottom: 0; }
.pol-tabla .cod {
  font-family: 'Consolas', ui-monospace, monospace;
  font-weight: 700;
  color: var(--dorado);
  white-space: nowrap;
}
.pol-tabla .num {
  text-align: right;
  white-space: nowrap;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.pol-tabla .na  { text-align: right; color: var(--texto-apagado); }
.pol-tabla .mal { color: var(--critico); }

.pol-pie {
  font-size: 12px;
  color: var(--texto-apagado);
  margin: 0 0 26px;
}

/* ---------- los diez rangos ---------- */

.pol-rangos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: rango;
}
.pol-rangos li {
  counter-increment: rango;
  background: var(--sup-tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 11px 13px;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14.5px;
}
.pol-rangos li::before {
  content: counter(rango);
  font-family: 'Consolas', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--texto-apagado);
  min-width: 16px;
}
.pol-rangos li.tope {
  border-color: var(--borde-dorado);
  background: linear-gradient(163deg, rgba(232, 179, 58, .11) 0%, var(--sup-tarjeta) 70%);
}
.pol-rangos li.tope::before { color: var(--dorado); }

/* ---------- comparativa a dos columnas ---------- */

.pol-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  margin: 0 0 22px;
}
.pol-vs-col + .pol-vs-col { border-left: 1px solid var(--borde); }
.pol-vs-cab {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 13px 16px;
  background: var(--sup-alta);
  border-bottom: 1px solid var(--borde);
}
.pol-vs-col.aqui .pol-vs-cab { color: var(--dorado); }
.pol-vs-col.otros .pol-vs-cab { color: var(--texto-apagado); }
.pol-vs-item {
  padding: 12px 16px;
  font-size: 14.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.pol-vs-item:last-child { border-bottom: 0; }
.pol-vs-col.aqui .pol-vs-item { color: var(--texto); }
.pol-vs-col.otros .pol-vs-item { color: var(--texto-apagado); }

/* ---------- chat del juego ---------- */

.pol-chat {
  background: var(--sup-hundida);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--azul);
  border-radius: var(--radio-chico);
  padding: 14px 16px;
  margin: 0 0 24px;
  font-family: 'Consolas', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.8;
  overflow-x: auto;
}
.pol-chat p { margin: 0; white-space: nowrap; }
.pol-chat .dep { color: var(--azul); font-weight: 700; }
.pol-chat .ok  { color: var(--exito); }

/* ---------- móvil ---------- */

@media (max-width: 640px) {
  .pol-vs { grid-template-columns: 1fr; }
  .pol-vs-col + .pol-vs-col { border-left: 0; border-top: 1px solid var(--borde); }
}

/* ---------------------------------------------------------------------
 *  LA HOJA TIENE QUE ESTIRARSE, NO ENCOGERSE A SU CONTENIDO
 *  ---------------------------------------------------------------------
 *  `.gu-hoja` es un item del grid `.gu-capa`, y guia.css le pone
 *  `margin: 0 auto` por debajo de 980px. Un item de grid con margen auto
 *  deja de estirarse y pasa a medir `fit-content`: se hace tan ancho como
 *  su hijo mas ancho.
 *
 *  En /guia y /normas eso da igual, porque todo su contenido es texto que
 *  se parte solo. Aqui NO: la tabla del codigo penal, el chat (que va en
 *  `nowrap`), la comparativa y los rangos tienen ancho minimo propio, y
 *  arrastraban la hoja entera a 563 px dentro de un movil de 375 --
 *  scroll horizontal en toda la pagina.
 *
 *  Con `width: 100%` el porcentaje se resuelve contra la pista del grid,
 *  que si tiene un ancho definido, y cada bloque ancho vuelve a hacer su
 *  propio scroll interno como estaba pensado.
 *
 *  Va al final del archivo a proposito: tiene que ganar a lo que declare
 *  guia.css, que se carga antes.
 * ------------------------------------------------------------------- */
.gu-hoja {
  width: 100%;
  min-width: 0;
}