/* ══════════════════════════════════════════════════════════════
   IDIEM — Dashboard Mesa de Ayuda
   Brand guide: #b70000 rojo | #008D8D teal | #1A1A1A dark grey
   Estados: #26BF00 éxito | #F2C72D alerta | #b70000 error
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 24px;   /* base escalada para TV — 1rem = 24px */
}

body {
  min-height: 100vh;
  font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  background: #F4F4F4;
  color: #1A1A1A;
  overflow-y: auto;
}

/* ── Layout ─────────────────────────────────────────────────── */
.dashboard-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0.2rem 0.2rem;
  gap: 0.75rem;
}

/* ── Header ─────────────────────────────────────────────────── */
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #b70000;
  /* background: #1A1A1A; */

  border-radius: 10px;
  padding: 0.7rem 1.5rem;
  flex-shrink: 0;
  /* Línea roja IDIEM en la parte inferior del header */
  border-bottom: 6px solid #1A1A1A;
  /* border-bottom: 4px solid #b70000; */


}

/* ── Indicadores económicos ──────────────────────────────────── */
.indicators-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.indicator-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
}

.ind-label {
  font-size: 1rem;        /* ~small IDIEM */
  font-weight: 700;
  color: #ffffff;           /* grey 60% */
  text-transform: uppercase;
  letter-spacing: 0.12em;   /* +12% para labels */
}

.ind-value {
  font-size: 1.5rem;      /* entre H3 y H2 IDIEM */
  /* font-weight: 800; */
  color: #FFFFFF;
  letter-spacing: -0.03em;  /* -3% IDIEM H2 */
  font-variant-numeric: tabular-nums;
}

.indicator-sep {
  width: 1px;
  height: 2.2rem;
  background: #474747;      /* grey 80% */
}

/* ── Reloj ───────────────────────────────────────────────────── */
.dash-clock {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;           /* grey 40% */
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Fila de tarjetas ────────────────────────────────────────── */
.cards-row {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  gap: 1rem;
  min-height: 0;
  align-content: flex-start;
}

/* ══════════════════════════════════════════════════════════════
   TICKET CARD
   ══════════════════════════════════════════════════════════════ */
.ticket-card {
  flex: 1 1 260px;          /* crece libre, se encoge, mínimo 260px antes de bajar */
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
  box-shadow: 0 2px 12px rgba(26,26,26,0.10);
  /* Borde superior de color indica prioridad */
  border-top: 8px solid #D1D1D1;
  transition: border-top-color 0.4s ease;
}

.ticket-card.status-red    { border-top-color: #b70000; }  /* error IDIEM  */
.ticket-card.status-yellow { border-top-color: #F2C72D; }  /* alert IDIEM  */
.ticket-card.status-green  { border-top-color: #1c8b00; }  /* éxito IDIEM  */
.ticket-card.status-loading { border-top-color: #D1D1D1; }

/* ── Título del área ─────────────────────────────────────────── */
.card-title {
  text-align: center;
  font-size: 2.25rem;       /* H1-ish IDIEM */
  font-weight: 800;
  color: #1A1A1A;
  letter-spacing: -0.05em;  /* -5% H1 IDIEM */
  text-transform: uppercase;
  padding: 0.5rem;
  border-bottom:2px solid #ccc;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Número total ────────────────────────────────────────────── */
.card-total {
  flex: 1;
  padding:1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5.25rem;   /* 100px base → 150px a 24px root */
  font-weight: 300;
  color: #1A1A1A;
  letter-spacing: -0.03em;
  line-height: 1;
  min-height: 0;
}

/* ── Barra verde / amarillo / rojo ───────────────────────────── */
.card-counts {
  display: flex;
  flex-shrink: 0;
  border-top: 1px solid #E8E8E8;  /* grey 10% IDIEM */
}

.count-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  padding: 0.2rem 0;
  color: #FFFFFF;
}

.count-cell + .count-cell {
  border-left: 2px solid rgba(255,255,255,0.35);
}

.count-cell.c-green  { background: #1c8b00; }   /* éxito IDIEM */
.count-cell.c-yellow { background: #F2C72D; color: #1A1A1A; }  /* alerta IDIEM */
.count-cell.c-blue    { background: #008D8D; }   /* error IDIEM */
.count-cell.c-red    { background: #b70000; }   /* error IDIEM */

/* Celda con número + sublabel (usado en AcquisitionCard) */
.count-cell.is-zero  { opacity: 0.5; }

.count-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 0.15rem;
}

.count-num { font-size: 2rem; font-weight: 800; letter-spacing: -0.05em; }

.count-sublabel {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.85;
}


/* ── Footer — fondo blanco ───────────────────────────────────── */
.card-footer {
  flex-shrink: 0;
  background: #FFFFFF;
  border-top: 2px solid #E8E8E8;
  padding: 0.9rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.footer-unassigned {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 1.375rem;      /* H3 IDIEM */
  font-weight: 300;
  color: #1A1A1A;
  letter-spacing: -0.01em;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #E8E8E8;
  margin-bottom: 0.1rem;
}

.footer-unassigned .fu-count {
  font-weight: 700;
  flex-shrink: 0;
}

.footer-person {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #474747;           /* grey 80% IDIEM */
  letter-spacing: -0.01em;
}

.footer-person + .footer-person {
  border-top: 1px solid #D1D1D1;
  padding-top: 0.3rem;
}

.fp-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.fp-count {
  flex-shrink: 0;
  font-weight: 800;
  color: #1A1A1A;
}

/* ── Cargando ────────────────────────────────────────────────── */
.card-loading-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #A3A3A3;
  gap: 0.75rem;
}

.spinner {
  width: 2rem; height: 2rem;
  border: 0.3rem solid #E8E8E8;
  border-top-color: #008D8D;   /* teal IDIEM */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════
   ACQUISITION CARD — estilo diferenciado para Reparos
   ══════════════════════════════════════════════════════════════ */

/* Reemplaza el borde superior por uno lateral izquierdo teal */
.ticket-card.acq-card {
  border-top: none;
  border-left: 8px solid #b70000;
  border-right: 8px solid #b70000;
  background: #F7FAFA;              /* fondo levemente frío */
  box-shadow: 0 2px 16px rgba(0,141,141,0.12);
}


/* Encabezado oscuro con texto blanco */
.acq-card .card-title {
  background: #1A1A1A;
  color: #FFFFFF;
  padding:0.7rem 0.5rem 0.5rem;
  letter-spacing: 0.02em;   /* más legible sobre fondo oscuro */
}

/* Número total en rojo; negro si es 0 */
.acq-card .card-total {
  color: #b70000;
}

.acq-card .card-total.is-zero {
  color: #1A1A1A;
}

/* Barra de conteos sin borde superior (el título oscuro ya separa) */
.acq-card .card-counts {
  border-top: none;
}

/* Footer con fondo blanco limpio */
.acq-card .card-footer {
  background: #FFFFFF;
  border-top: 2px solid #D9EEEE;   /* teal muy suave */
}

/* Línea divisoria entre personas en tono teal suave */
.acq-card .footer-person + .footer-person {
  border-top-color: #C5E3E3;
}