/* Estilos propios del panel admin (sesión 6.5). Mínimos, encima de Pico:
   badges de estado, botones destructivos y la barra de anclas. */

/* --- Badges de estado de entrada ---------------------------------------- */
/* Fondo claro + texto oscuro: se leen igual en tema claro y oscuro de Pico. */
.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.badge-creada   { background: #e4e6eb; color: #3a3f4b; }
.badge-asignada { background: #d6e8fb; color: #0b4f86; }
.badge-vendida  { background: #d5efdd; color: #14602c; }
.badge-validada { background: #e6ddf7; color: #4b2a86; }
.badge-anulada  { background: #fadcd9; color: #8c1d18; }

/* --- Botones destructivos ------------------------------------------------ */
/* Pico define los colores del botón con variables; alcanza con pisarlas. */
.peligro {
  --pico-background-color: #b3261e;
  --pico-border-color: #b3261e;
  --pico-color: #fff;
}
.peligro:is(:hover, :active, :focus) {
  --pico-background-color: #8c1d18;
  --pico-border-color: #8c1d18;
}

/* Variante liviana (borde rojo, sin relleno) para acciones destructivas
   dentro de una tabla, donde un botón rojo lleno por fila sería demasiado. */
.peligro-suave {
  --pico-background-color: transparent;
  --pico-border-color: #b3261e;
  --pico-color: #b3261e;
}
.peligro-suave:is(:hover, :active, :focus) {
  --pico-background-color: #b3261e;
  --pico-color: #fff;
}

/* --- Barra de anclas del detalle del evento ------------------------------ */
/* Botones de verdad, no links: se tocan bien con el dedo. En pantallas
   angostas se reparten el ancho y bajan de renglón en vez de desbordar. */
.anclas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.anclas [role="button"] {
  flex: 1 1 auto;
  margin: 0;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  text-align: center;
  white-space: nowrap;
}

/* --- Secciones plegables (<details> de configuración) -------------------- */
details.seccion {
  border: var(--pico-border-width) solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: 0 1rem;
  margin-bottom: 1rem;
}
details.seccion > summary {
  font-weight: 600;
  padding: 0.75rem 0;
}
details.seccion[open] > summary {
  margin-bottom: 0.5rem;
}
details.seccion > :last-child {
  margin-bottom: 1rem;
}

/* Botón chico para acciones dentro de tablas. */
.boton-chico {
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
}

/* --- Tablas de listados en móvil (sesión 7) ------------------------------ */
/* Varias tablas del panel son más anchas que un viewport de celular. En vez
   de que la tabla fuerce el ancho de toda la página (obligando a hacer zoom
   out), el scroll horizontal queda contenido en su propio recuadro. */
.tabla-scroll {
  overflow-x: auto;
}