/* Estilos del tablero de uso que comparten el portal del cliente (/) y el panel del proveedor
   (/admin/). Aquí va solo lo NUEVO; las gráficas (donut, barras, área, aro) usan las clases que cada
   página ya define, con los mismos nombres en las dos. Los colores son las variables de cada página. */

/* ── Barra del período ── */
.tb-barra {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.tb-barra-izq {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.tb-barra .tb-etq {
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.tb-barra select.field {
  width:auto;
  min-width:190px;
  padding:8px 32px 8px 12px;
  font-weight:700;
}

/* Las dos fechas del «rango a medida». */
.tb-fechas {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.78rem;
  color:var(--ink-3);
}

.tb-fechas.hide { display:none; }

.tb-fechas input.field {
  width:auto;
  padding:7px 10px;
  font-weight:600;
}

.tb-rango {
  font-size:.78rem;
  font-weight:600;
  color:var(--ink-2);
}

.tb-rango .tb-corte {
  color:var(--ink-3);
  font-weight:500;
}

/* Aviso bajo la barra: solo cuando lo que se mira no se puede leer como lo demás (el histórico). */
.tb-aviso {
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:var(--warn-soft);
  color:var(--ink);
  border:1px solid var(--warn-line);
  border-radius:12px;
  padding:11px 14px;
  margin-bottom:14px;
  font-size:.8rem;
  line-height:1.45;
}

.tb-aviso .material-symbols-outlined {
  color:var(--warn);
  font-size:19px;
  margin-top:1px;
}

.tb-aviso.hide { display:none; }

/* ── Pestañas dentro de una tarjeta (los tipos, por módulo) ── */
.seg {
  display:inline-flex;
  gap:2px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:3px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

/* «comprobantes» es más larga que el hueco del donut con el tamaño de etiqueta de siempre. */
.donut-center .dc-lbl.tb-unidad {
  font-size:.5rem;
  letter-spacing:.07em;
}

/* Dos tarjetas una sobre otra en la misma celda de una fila; la de abajo ocupa lo que sobre. */
.tb-columna {
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.tb-columna > .card:last-child { flex:1; }

.seg button {
  font-family:inherit;
  font-size:.72rem;
  font-weight:700;
  color:var(--ink-3);
  background:transparent;
  border:none;
  border-radius:7px;
  padding:5px 10px;
  cursor:pointer;
  transition:all .15s ease;
}

.seg button:hover { color:var(--ink-2); }

.seg button.active {
  background:var(--surface);
  color:var(--brand);
  box-shadow:var(--shadow-card);
}

/* Un módulo sin actividad en el período: se puede abrir, pero se ve que está vacío. */
.seg button.vacio:not(.active) { opacity:.55; }

/* ── «Ver todos»: las listas largas se cortan a las primeras filas ── */
.ver-mas {
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:12px;
  font-family:inherit;
  font-size:.74rem;
  font-weight:700;
  color:var(--brand);
  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
}

.ver-mas:hover { text-decoration:underline; }

.ver-mas .material-symbols-outlined { font-size:16px; }

/* ── Notas al pie de una tarjeta: lo que hay que saber para leer bien su número ── */
.tb-nota {
  margin-top:12px;
  font-size:.74rem;
  line-height:1.45;
  color:var(--ink-3);
  font-weight:500;
}

.tb-vacio {
  color:var(--ink-3);
  font-size:.82rem;
  padding:6px 0;
}

/* ── Causas de fallo ── */
.cat-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.cat-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.7rem;
  font-weight:700;
  padding:3px 9px;
  border-radius:999px;
  background:var(--bad-soft);
  color:var(--bad);
  border:1px solid var(--bad-line);
  white-space:nowrap;
}

/* La clave mal puesta o una cancelación: no es que la aplicación falle. */
.cat-chip.usuario {
  background:var(--warn-soft);
  color:var(--warn);
  border-color:var(--warn-line);
}

.cat-chip.sri {
  background:var(--info-soft);
  color:var(--info);
  border-color:var(--info-line);
}

.cat-chip.neutro {
  background:var(--surface-3);
  color:var(--ink-2);
  border-color:var(--line);
}

.cat-chip b { font-weight:800; }

.tb-subtitulo {
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:16px;
}

/* Últimas descargas con error: una línea por fallo; el texto completo se abre al pulsar. */
.fallo {
  border-top:1px solid var(--line-2);
  padding:8px 0;
  font-size:.8rem;
}

.fallo:first-of-type { border-top:none; }

.fallo summary {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  cursor:pointer;
  list-style:none;
  color:var(--ink-2);
  font-weight:600;
}

.fallo summary::-webkit-details-marker { display:none; }

.fallo summary .cuando { color:var(--ink-3); font-weight:500; }

.fallo summary .material-symbols-outlined {
  margin-left:auto;
  font-size:18px;
  color:var(--ink-3);
  transition:transform .15s ease;
}

.fallo[open] summary .material-symbols-outlined { transform:rotate(180deg); }

.fallo .fallo-txt {
  margin-top:6px;
  color:var(--ink);
  line-height:1.45;
}

/* ── Celdas de tabla en dos líneas (fecha arriba y hora debajo; mes arriba y año debajo) ── */
.dos-lineas { white-space:nowrap; }

.dos-lineas .l1 {
  color:var(--ink);
  font-weight:600;
}

.dos-lineas .l2 {
  font-size:.74rem;
  color:var(--ink-3);
  font-weight:500;
  margin-top:1px;
}

/* El segundo número de una fila que NO es un fallo (leídos del PDF, ya estaban en disco…). */
.dato-gris {
  font-size:.74rem;
  color:var(--ink-3);
  font-weight:500;
}

.dato-aviso {
  font-size:.74rem;
  color:var(--warn);
  font-weight:700;
}

.dato-malo {
  font-size:.74rem;
  color:var(--bad);
  font-weight:700;
}

/* Interruptor «solo con error» y parecidos, en una barra de filtros. */
.filtro-check {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.8rem;
  font-weight:600;
  color:var(--ink-2);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}

.filtro-check input { accent-color:var(--brand); width:15px; height:15px; cursor:pointer; }