/* ============================================================================
   consumo.css - Vista "Consumo del asistente".
   ----------------------------------------------------------------------------
   Usa los tokens de vidrio.css (--marca, --acento) con valores de respaldo,
   para que la vista se vea bien aunque esa capa no este cargada.
   El tema oscuro va con [data-theme="dark"], igual que el resto del panel.
   ========================================================================== */

#consumo-root { --con-texto: #0f1b16; --con-tenue: #5c6675; --con-linea: rgba(15,81,50,.14);
                --con-fondo: rgba(255,255,255,.72); }
[data-theme="dark"] #consumo-root { --con-texto: #E9EDEF; --con-tenue: #8aa0a8;
                --con-linea: rgba(255,255,255,.12); --con-fondo: rgba(255,255,255,.04); }

/* ---- barra de periodos --------------------------------------------------- */
#consumo-root .con-barra-sup { display: flex; justify-content: flex-end; margin-bottom: 18px; }
#consumo-root .con-periodos { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--con-fondo); border: 1px solid var(--con-linea); }
#consumo-root .con-periodo { border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--con-tenue);
  padding: 7px 15px; border-radius: 999px; }
#consumo-root .con-periodo:hover { color: var(--con-texto); }
#consumo-root .con-periodo.activo { color: #fff;
  background: linear-gradient(180deg, color-mix(in oklab, var(--marca, #0F5132) 82%, #fff),
                                      var(--marca, #0F5132)); }

/* ---- este mes ------------------------------------------------------------ */
#consumo-root .con-mes { padding: 22px 24px; border-radius: 18px; margin-bottom: 18px;
  background: var(--con-fondo); border: 1px solid var(--con-linea); }
#consumo-root .con-mes-cifra { display: flex; align-items: baseline; gap: 10px; }
#consumo-root .con-mes-num { font-size: clamp(30px, 4vw, 42px); font-weight: 800;
  letter-spacing: -.02em; color: var(--con-texto); }
#consumo-root .con-mes-de { font-size: 16px; color: var(--con-tenue); font-weight: 600; }
#consumo-root .con-mes-pie { margin: 4px 0 0; font-size: 13.5px; color: var(--con-tenue); }

#consumo-root .con-barra { position: relative; height: 10px; border-radius: 999px; margin: 16px 0 8px;
  background: color-mix(in oklab, var(--marca, #0F5132) 12%, transparent); overflow: hidden; }
#consumo-root .con-barra i { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--acento, #128C7E), var(--marca, #0F5132)); }
#consumo-root .con-barra--aviso  i { background: linear-gradient(90deg, #E8A33D, #D97706); }
#consumo-root .con-barra--limite i { background: linear-gradient(90deg, #E05D52, #B91C1C); }
#consumo-root .con-barra-marca { position: absolute; top: -3px; width: 2px; height: 16px;
  border-radius: 2px; background: var(--con-texto); opacity: .45; }
#consumo-root .con-mes-estado { margin: 0; font-size: 13px; font-weight: 600; }
#consumo-root .con-mes-estado--ok     { color: var(--con-tenue); }
#consumo-root .con-mes-estado--aviso  { color: #B45309; }
#consumo-root .con-mes-estado--limite { color: #B91C1C; }

/* ---- tarjetas ------------------------------------------------------------ */
#consumo-root .con-tarjetas { display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
#consumo-root .con-tarjeta { padding: 14px 16px; border-radius: 16px;
  background: var(--con-fondo); border: 1px solid var(--con-linea); display: grid; gap: 3px; }
#consumo-root .con-tarjeta-tit { font-size: 12.5px; font-weight: 600; color: var(--con-tenue);
  text-transform: uppercase; letter-spacing: .04em; }
#consumo-root .con-tarjeta-val { font-size: 21px; font-weight: 700; color: var(--con-texto);
  letter-spacing: -.01em; }
#consumo-root .con-tarjeta-pie { font-size: 12.5px; color: var(--con-tenue); }

/* ---- bloques ------------------------------------------------------------- */
#consumo-root .con-bloque { padding: 18px 20px; border-radius: 18px; margin-bottom: 18px;
  background: var(--con-fondo); border: 1px solid var(--con-linea); }
#consumo-root .con-h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--con-texto); }

/* ---- grafico diario ------------------------------------------------------ */
#consumo-root .con-grafico { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
#consumo-root .con-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%; }
#consumo-root .con-col i { display: block; width: 100%; max-width: 22px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--acento, #128C7E), var(--marca, #0F5132)); }
#consumo-root .con-col span { font-size: 10px; color: var(--con-tenue); margin-top: 5px;
  white-space: nowrap; }
/* Con 90 dias o un ano no caben las etiquetas: se quedan solo las barras. */
#consumo-root .con-grafico:has(.con-col:nth-child(45)) .con-col span { display: none; }

/* ---- en que se va -------------------------------------------------------- */
#consumo-root .con-grupos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
#consumo-root .con-grupo-cab { display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px; color: var(--con-texto); }
#consumo-root .con-grupo-cab span { color: var(--con-tenue); font-weight: 600; white-space: nowrap; }
#consumo-root .con-grupo-barra { height: 7px; border-radius: 999px; margin: 6px 0 4px;
  background: color-mix(in oklab, var(--marca, #0F5132) 10%, transparent); overflow: hidden; }
#consumo-root .con-grupo-barra i { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--acento, #128C7E), var(--marca, #0F5132)); }
#consumo-root .con-grupo-pie { margin: 0; font-size: 12.5px; color: var(--con-tenue); }

/* ---- tablas y detalle ---------------------------------------------------- */
#consumo-root .con-detalle { margin-top: 18px; }
#consumo-root .con-detalle summary { cursor: pointer; font-size: 13.5px; font-weight: 600;
  color: var(--con-tenue); }
#consumo-root .con-detalle summary:hover { color: var(--con-texto); }
#consumo-root .con-tabla { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px; }
#consumo-root .con-tabla th { text-align: left; font-weight: 600; color: var(--con-tenue);
  padding: 8px 10px; border-bottom: 1px solid var(--con-linea); }
#consumo-root .con-tabla th + th, #consumo-root .con-tabla td + td { text-align: right; }
#consumo-root .con-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--con-linea);
  color: var(--con-texto); }
#consumo-root .con-tabla tbody tr:last-child td { border-bottom: 0; }

/* ---- avisos y nota ------------------------------------------------------- */
#consumo-root .con-aviso { padding: 14px 16px; border-radius: 14px; font-size: 14px;
  color: var(--con-tenue); background: var(--con-fondo); border: 1px solid var(--con-linea); }
#consumo-root .con-aviso--aviso { color: #B45309;
  background: color-mix(in oklab, #E8A33D 12%, transparent); border-color: rgba(232,163,61,.35); }
#consumo-root .con-aviso--error { color: #B91C1C;
  background: color-mix(in oklab, #E05D52 12%, transparent); border-color: rgba(224,93,82,.35); }
#consumo-root .con-cargando { color: var(--con-tenue); font-size: 14px; }
#consumo-root .con-nota { font-size: 12.5px; line-height: 1.6; color: var(--con-tenue); margin: 0; }

@media (max-width: 640px) {
  #consumo-root .con-barra-sup { justify-content: stretch; }
  #consumo-root .con-periodos { width: 100%; justify-content: space-between; }
  #consumo-root .con-grafico { height: 120px; }
  #consumo-root .con-col span { display: none; }
}

/* ---- pestanas y "que le falta" ------------------------------------------- */
#consumo-root .con-barra-sup { justify-content: space-between; flex-wrap: wrap; gap: 10px; }
#consumo-root .con-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--con-fondo); border: 1px solid var(--con-linea); }
#consumo-root .con-tab { border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--con-tenue);
  padding: 7px 16px; border-radius: 999px; }
#consumo-root .con-tab:hover { color: var(--con-texto); }
#consumo-root .con-tab.activo { color: var(--con-texto);
  background: color-mix(in oklab, var(--marca, #0F5132) 16%, transparent); }

#consumo-root .con-sub { margin: -6px 0 14px; font-size: 13px; line-height: 1.6;
  color: var(--con-tenue); max-width: 68ch; }
#consumo-root .con-sub code { font-size: 12.5px; }
#consumo-root .con-vacio { margin: 0; font-size: 14px; color: var(--con-tenue); }
#consumo-root .con-tabla-faltas td { vertical-align: top; }
#consumo-root .con-tabla-faltas .con-nombre { font-weight: 600; text-align: left; }
#consumo-root .con-tabla-faltas .con-desp { text-align: left; font-size: 12.5px;
  color: var(--con-tenue); max-width: 320px; white-space: normal; }

@media (max-width: 760px) {
  #consumo-root .con-tabla-faltas .con-desp { display: none; }
  #consumo-root .con-tabla-faltas thead th:nth-child(4) { display: none; }
}