/* ============================================================
   plazos.css — la fecha límite de los asuntos.

   Va en su propio fichero para no engordar estilos.css: aquí está
   todo lo que se ve del plazo y nada más.
   ============================================================ */

/* La etiqueta que sale junto al tipo y al estado en cada tarjeta.
   Roja si ya venció o vence hoy, ámbar si vence dentro de una semana,
   gris el resto. */
.marca-plazo {
  display: inline-block; border-radius: 20px; padding: 2px 10px;
  font-size: 12px; font-weight: 600; margin-right: 8px;
  border: 1px solid transparent;
}
.plazo-vencido { background: #fdecec; color: #a4302a; border-color: #f2c4c0; }
.plazo-cerca   { background: #fff4d6; color: #8a6100; border-color: #e6c377; }
.plazo-lejos   { background: #eef1f5; color: #5d6b7a; border-color: #d7dde5; }

/* "Lo pide", en la cabecera de la ficha (17-sep-2026, fila 28,
   docs/LO-PIDE.md): mismo dibujo que .marca-estado/.marca-plazo, con
   un color propio para distinguirla de un vistazo. */
.marca-lopide {
  display: inline-block; border-radius: 20px; padding: 2px 10px;
  font-size: 12px; font-weight: 600; margin-right: 8px;
  background: #f0eafb; color: #5b3fa0; border: 1px solid #d6c8f0;
}

/* La casilla de días de plazo de cada tipo, en Ajustes. */
.plazo-tipo {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; white-space: nowrap;
}
.campo-plazo { width: 68px; text-align: center; padding: 5px 6px; }

/* El desplegable de plazo de la cabecera, que si no se lleva los 300px
   de los buscadores. En pantalla estrecha, ancho completo como el resto. */
#filtro-plazo { width: 200px; min-width: 0; }
@media (max-width: 900px) {
  #filtro-plazo { width: 100%; }
}

/* ---------- el aviso de lo que vence ----------
   Va arriba de la pantalla de asuntos abiertos, antes de las tres
   tarjetas, y solo aparece cuando hay algo que decir. */
#panel-avisos { margin: 4px 0 18px; }
.avisos-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- los asuntos que se repiten ---------- */
#panel-recurrentes { margin: 4px 0 18px; }
.recurrentes-lista { margin: 8px 0 0; padding-left: 20px; font-size: 13px; }
.recurrente-pie { flex: 1; font-size: 12px; }