/* ===========================================================================
   EL TABLERO DEL ROL · hoja aparte
   ---------------------------------------------------------------------------
   En archivo propio y no al final de estilo.css a propósito: así esta
   propuesta se revisa y se revierte borrando dos archivos y tres renglones,
   sin reescribir los 23 KB de la hoja principal. Reescribir un archivo grande
   entero para añadirle cuarenta líneas es como se corrompe un archivo.

   No introduce ningún color nuevo: usa las variables que ya existen.
   =========================================================================== */

/* --- el armazón de dos columnas ------------------------------------------- */
/* Izquierda la cola —lo que está esperando ahora, una cosa por renglón— y
   derecha el estado —los seis frentes con su cifra—. Por debajo de 1100 px la
   cola pasa arriba: en un teléfono, lo primero es qué hay que hacer. */
.tablero-rol{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}
.col-tarjetas{display:flex;flex-direction:column;gap:16px;min-width:0}
@media(max-width:1100px){.tablero-rol{grid-template-columns:1fr}}

.cab-cola{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:12px;margin-bottom:14px}
.cab-cola .tit{margin:0}

/* --- la cola --------------------------------------------------------------- */
/* La lista crece con la página: una barra dentro de otra no. */
.pendientes{display:flex;flex-direction:column;gap:8px;
  overflow-y:auto;overscroll-behavior:contain;padding-right:4px;margin-bottom:12px}
.pendiente{display:flex;flex-direction:column;gap:5px;padding:12px 13px;border-radius:16px;
  border:0;text-align:left;cursor:pointer;width:100%;color:inherit;font:inherit;
  background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
  transition:transform .15s cubic-bezier(.16,1,.3,1),background .15s}
.pendiente:hover{transform:translateX(2px);background:rgba(255,255,255,.36)}
.pendiente.mal{background:rgba(225,29,72,.10);box-shadow:inset 0 0 0 1px rgba(225,29,72,.30)}
.pendiente.aviso{background:rgba(180,134,69,.13);box-shadow:inset 0 0 0 1px rgba(180,134,69,.32)}
.pendiente.neutro{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.pendiente .cab{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pendiente .dias{font-family:var(--font-mono);font-size:9.5px;color:var(--text-faint);
  font-variant-numeric:tabular-nums}
.pendiente h4{font-family:var(--font-display);font-size:12px;font-weight:800;line-height:1.3;
  margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pendiente .det{font-size:10.5px;color:var(--text-dim);line-height:1.45;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pendiente .pie{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.pendiente .area{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#94a3b8;font-weight:700}
.pendiente .importe{font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  color:var(--text-dim);font-variant-numeric:tabular-nums}

/* --- las seis tarjetas ----------------------------------------------------- */
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:1500px){.tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1100px){.tarjetas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.tarjetas{grid-template-columns:1fr}}
.tarjeta{display:flex;flex-direction:column;gap:9px;padding:18px;border-radius:20px;border:0;text-align:left;cursor:pointer;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s;min-height:172px;color:inherit;font:inherit}
.tarjeta:hover{transform:translateY(-2px);background:rgba(255,255,255,.34)}
.tarjeta.apagado{background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);cursor:default}
.tarjeta.apagado:hover{transform:none;background:rgba(255,255,255,.10)}
.tarjeta.aviso{background:rgba(180,134,69,.13);box-shadow:inset 0 0 0 1px rgba(180,134,69,.34)}
.tarjeta.mal{background:rgba(225,29,72,.10);box-shadow:inset 0 0 0 1px rgba(225,29,72,.32)}
.tarjeta.ok{background:rgba(5,150,105,.10);box-shadow:inset 0 0 0 1px rgba(5,150,105,.30)}
.tarjeta.neutro{background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.tarjeta .cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tarjeta .titulo{font-family:var(--font-display);font-size:12px;font-weight:800;line-height:1.3;letter-spacing:.01em;margin:0}
.tarjeta .cifra{font-family:var(--font-mono);font-variant-numeric:lining-nums tabular-nums;font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em}
.tarjeta.mal .cifra{color:#9f1239}
.tarjeta.aviso .cifra{color:#7a5b2c}
.tarjeta.apagado .cifra{color:#94a3b8;font-size:26px}
.tarjeta .sub{font-family:var(--font-mono);font-variant-numeric:lining-nums tabular-nums;font-size:11.5px;color:var(--text-dim)}
.tarjeta .pie{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:10.5px;color:var(--text-faint);line-height:1.45}
.tarjeta .accion{font-family:var(--font-display);font-size:11px;font-weight:800;color:#1e293b;display:inline-flex;align-items:center;gap:5px}
.tarjeta.apagado .accion{color:#94a3b8;font-weight:700}
.tarjeta .vacio-txt{font-size:11px;color:var(--text-faint);line-height:1.55}
.tarjeta .desbloquea{font-size:10px;color:#64748b;background:rgba(71,85,105,.10);border-radius:999px;padding:3px 9px;display:inline-flex;align-items:center;gap:5px;box-shadow:inset 0 0 0 1px rgba(71,85,105,.18)}

/* El punto del semáforo. WCAG 2.2 SC 1.4.11 pide 3:1 contra lo adyacente, y
   SC 1.4.1 que el color no vaya solo: en el marcado siempre lleva su palabra. */
.punto{width:8px;height:8px;border-radius:50%;flex:0 0 auto;display:inline-block}
.punto.mal{background:var(--accent-danger);box-shadow:0 0 0 1px rgba(159,18,57,.45)}
.punto.aviso{background:var(--accent-gold);box-shadow:0 0 0 1px rgba(122,91,44,.45)}
.punto.ok{background:var(--accent-safe);box-shadow:0 0 0 1px rgba(4,108,78,.45)}
.punto.neutro{background:#64748b;box-shadow:0 0 0 1px rgba(71,85,105,.4)}
.punto.apagado{background:#94a3b8;box-shadow:0 0 0 1px rgba(100,116,139,.4)}

@media (prefers-reduced-motion:reduce){
  .tarjeta:hover,.pendiente:hover{transform:none !important}
}
@media print{
  .tarjeta,.pendiente{box-shadow:none;background:#fff;border:1px solid #cbd5e1}
  .pendientes{max-height:none;overflow:visible}
  .tablero-rol{grid-template-columns:1fr}
}