/* =========================================================================
   facturaonline — app.facturaonline.com (portal de cliente)
   Componentes propios del panel: no reutiliza el CSS de marketing (facturaonline_web),
   solo los tokens de marca (tokens.css) para mantener la identidad.
   ========================================================================= */

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--body);
    background: var(--bg-soft);
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-700); text-decoration: underline; }

h1, h2, h3, h4 { color: var(--ink); margin: 0 0 var(--sp-3); line-height: 1.2; }

/* ---------- Shell: topbar + sidebar + contenido ---------- */

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "topbar topbar"
        "sidebar content";
}

.app-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.app-topbar__brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: var(--ink); }
.app-topbar__brand img { height: 28px; }

.app-topbar__user { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }

.app-sidebar {
    grid-area: sidebar;
    background: var(--bg);
    border-right: 1px solid var(--line);
    padding: var(--sp-5) var(--sp-3);
}

.app-nav { display: flex; flex-direction: column; gap: var(--sp-1); }

.app-nav a {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--body);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.app-nav a:hover { background: var(--bg-soft); text-decoration: none; }
.app-nav a.is-active { background: var(--brand-tint); color: var(--brand-700); }

.app-content {
    grid-area: content;
    padding: var(--sp-6);
    max-width: 1080px;
}

@media (max-width: 860px) {
    .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "content"; }
    .app-sidebar { display: none; }
}

/* ---------- Componentes ---------- */

.card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    padding: var(--sp-5);
}

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.kpi { text-align: left; }
.kpi__label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi__value { font-size: var(--fs-h2); color: var(--ink); font-weight: 700; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.btn--primary { background: var(--brand); color: var(--white); }
.btn--primary:hover { background: var(--brand-600); color: var(--white); text-decoration: none; }
.btn--outline { background: var(--bg); border-color: var(--line-strong); color: var(--body); }
.btn--outline:hover { border-color: var(--brand); color: var(--brand-700); text-decoration: none; }
/* Acción que rompe algo que estaba funcionando (rotar o dar de baja la clave de API).
   Va en rojo para que no se confunda con el botón principal de la pantalla. */
.btn--danger { background: var(--danger); color: var(--white); }
.btn--danger:hover { background: var(--danger); color: var(--white); text-decoration: none; filter: brightness(0.92); }

.badge { display: inline-block; padding: 2px var(--sp-2); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; }
.badge--ok { background: var(--accent-tint); color: var(--accent); }
.badge--warn { background: var(--warn-tint); color: var(--warn); }
.badge--error { background: var(--danger-tint); color: var(--danger); }
.badge--pending { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line); }

table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data th, table.data td { padding: var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; }
table.data th { color: var(--muted); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; }

.form-field { margin-bottom: var(--sp-4); }
.form-field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-bottom: var(--sp-1); }
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
    font-family: inherit;
    background: var(--white);
    color: var(--body);
}
.form-field textarea { min-height: 96px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: 2px solid var(--brand-tint-2); border-color: var(--brand); }
/* Aclaración pequeña debajo de algo. Nació dentro de `.form-field`, pero se usa
   igual en los `dd` de una ficha (administración, token, ficha de envío): sin el
   selector suelto se quedaba pegada en la misma línea que el valor. */
.hint { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; margin-top: var(--sp-1); }

.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.alert--error { background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger-line); }
.alert--info { background: var(--brand-tint); color: var(--brand-700); border: 1px solid var(--brand-tint-2); }
.alert--ok { background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent); }
.alert--warn { background: var(--warn-tint); color: var(--warn); border: 1px solid var(--warn); }

/* Bloque para enseñar un secreto UNA sola vez (el token de API recién creado):
   monoespaciada, se selecciona entero de un clic y no se puede confundir con texto. */
.secreto {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    background: var(--bg-dark);
    color: var(--white);
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    word-break: break-all;
    user-select: all;
}

/* Cabecera de página: título a la izquierda, acciones a la derecha. */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-head h1 { font-size: var(--fs-h3); margin: 0; }

/* Pestañas para filtrar un listado por estado. */
.tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.tabs a {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--muted);
    background: var(--bg-soft);
}
.tabs a:hover { text-decoration: none; color: var(--brand-700); }
.tabs a.is-active { background: var(--brand); color: var(--white); }

/* Pares etiqueta/valor de una ficha. */
.ficha { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); margin: 0; }
.ficha dt { color: var(--muted); font-weight: 600; }
.ficha dd { margin: 0; color: var(--ink); }

@media (max-width: 560px) {
    .ficha { grid-template-columns: 1fr; gap: 0; }
    .ficha dd { margin-bottom: var(--sp-3); }
}

/* ---------- Texto ----------
   Estas clases existen para que NINGUNA vista necesite un style="" inline
   (regla de oro nº 3 de CLAUDE.md). Si al escribir una plantilla te falta una,
   añádela aquí con un nombre que diga para qué sirve, no qué pinta tiene. */

.text-muted     { color: var(--muted); }
.text-muted-sm  { color: var(--muted); font-size: var(--fs-sm); }
.text-muted-xs  { color: var(--muted); font-size: var(--fs-xs); }
.text-pre       { white-space: pre-wrap; }

/* Párrafo explicativo justo debajo del título de una sección. */
.section-note   { color: var(--muted); margin-top: var(--sp-3); }

/* Subtítulo pegado al título de la página (sube para no dejar el hueco del h1). */
.page-subtitle  { color: var(--muted); margin-top: calc(var(--sp-3) * -1); }

/* Mensaje de "aquí no hay nada todavía" dentro de una tarjeta. */
.empty-state    { color: var(--muted); margin: 0; }

/* ---------- Bloques de página ---------- */

/* Tarjeta que forma parte de una pila de secciones. */
.page-section       { margin-bottom: var(--sp-5); }
/* Tarjeta que hay que mirar sí o sí (el token recién generado). */
.card--highlight    { border-color: var(--accent); }
/* Título de una sección dentro de una tarjeta. */
.card__title        { font-size: var(--fs-lead); margin-top: 0; }
/* Última línea de una tarjeta, sin hueco sobrante debajo. */
.card__nota         { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

/* Separación automática entre una tabla y lo que venga después dentro de la tarjeta,
   para no tener que pedirla desde la plantilla. */
.card > table.data:not(:last-child) { margin-bottom: var(--sp-4); }

/* Columna de acciones de una tabla: pegada a la derecha. */
.cell-actions   { text-align: right; }

/* Botón que ocupa todo el ancho (formularios de una sola acción). */
.btn--block     { width: 100%; justify-content: center; }

/* Etiqueta junto al logo de la topbar (marca la zona de administración). */
.app-topbar__tag { margin-left: var(--sp-2); }

/* KPI secundario, más pequeño que el principal. */
.kpi__value--sm { font-size: var(--fs-h3); }

/* ---------- Listado de envíos ---------- */

/* Barra de filtros: los campos fluyen y las acciones se pegan al final de la fila. */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    align-items: flex-end;
}
.filtros .form-field { margin-bottom: 0; flex: 1 1 160px; min-width: 140px; }
.filtros__acciones { display: flex; gap: var(--sp-2); flex: 0 0 auto; }

/* Las tablas de datos pueden no caber en móvil: que se desplacen ellas, nunca la página. */
.tabla-scroll { overflow-x: auto; }

.paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
}

/* CSV, huella: cadenas largas que se copian tal cual. */
.dato-fiscal {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    word-break: break-all;
    user-select: all;
}

/* ---------- Pantalla de login (fuera del shell) ---------- */

.auth-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-soft);
    padding: var(--sp-5);
}

.auth-card { width: 100%; max-width: 380px; }
.auth-card__logo { display: flex; align-items: center; gap: var(--sp-2); justify-content: center; margin-bottom: var(--sp-5); font-weight: 700; color: var(--ink); }
.auth-card__logo img { height: 32px; }

/* Textos de las pantallas de acceso: todo centrado y en la misma escala. */
.auth-title    { font-size: var(--fs-h3); text-align: center; }
.auth-subtitle { text-align: center; color: var(--muted); font-size: var(--fs-sm); margin-top: calc(var(--sp-2) * -1); }
.auth-link     { text-align: center; font-size: var(--fs-sm); }
.auth-foot     { text-align: center; font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-4); }

/* Título de la página de error (404), que se pinta sin shell. */
.error-title   { font-size: var(--fs-h3); }

/* ---------- Acciones que hacen daño ----------
   Rotar o dar de baja la clave de API deja al cliente sin poder facturar hasta que
   actúe. Van dentro de un <details> para que haya que abrirlo antes de pulsar: sin
   JavaScript no hay un "¿estás seguro?", y un botón rojo suelto es un accidente
   esperando a pasar. */

.zona-peligro {
    border: 1px solid var(--danger-line);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    margin-top: var(--sp-4);
}
.zona-peligro summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--danger);
}
.zona-peligro[open] summary { margin-bottom: var(--sp-3); }
.zona-peligro p { margin-top: 0; }

/* Botonera al final de una tarjeta, separada del texto que la explica.
   Los botones fluyen: en móvil no caben dos en la misma línea. */
.form-acciones { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Un botón deshabilitado tiene que PARECERLO, o se pulsa y no pasa nada. */
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Etiqueta que existe para el lector de pantalla pero no se pinta: la usan los
   campos cuyo nombre ya está escrito justo encima en el propio bloque. */
.visualmente-oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Trámite por pasos ----------
   Para lo que no se resuelve en una sola pantalla porque pasa por el mundo físico
   (imprimir, firmar a mano, escanear): cumplimiento legal. Cada paso es una tarjeta
   numerada, y el número está fuera del texto para que se vea de un vistazo cuántos
   quedan. */

.pasos { list-style: none; margin: 0; padding: 0; }

.paso {
    display: flex;
    gap: var(--sp-4);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}

.paso__num {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--brand-tint);
    color: var(--brand-700);
    font-weight: 700;
}

.paso__cuerpo { flex: 1 1 auto; min-width: 0; }

@media (max-width: 560px) {
    .paso { flex-direction: column; gap: var(--sp-3); }
}

/* Título de un bloque dentro de un paso (p. ej. "Domicilio fiscal"). */
.subseccion {
    font-size: var(--fs-body);
    margin: var(--sp-5) 0 var(--sp-3);
}

/* Varios campos en la misma línea cuando forman UN dato (municipio + vía + número
   son una dirección, no tres preguntas sueltas). */
.campos-fila { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.campos-fila .form-field { flex: 1 1 180px; min-width: 150px; margin-bottom: var(--sp-4); }
.campos-fila__ancho    { flex: 2 1 260px !important; }
.campos-fila__estrecho { flex: 0 1 90px !important; min-width: 80px !important; }

/* ---------- Documentos aportados ---------- */

.doc-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }

.doc-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--sp-4);
    background: var(--bg-soft);
}

.doc-item__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.doc-item__archivo  { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); word-break: break-word; }

/* El envío a revisión cierra el trámite: se separa de las subidas con una línea
   para que no parezca un botón más de la última tarjeta de fichero. */
.enviar-revision {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
}

/* Aviso permanente en el panel mientras falte la autorización. No es un error
   (el servicio funciona), así que va en tono de aviso y con su enlace de salida. */
.aviso-cumplimiento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

/* ---------- Documentación de la API ----------
   Sección de solo lectura y muy larga: lo que manda aquí es que se pueda leer de
   corrido y que un bloque de código se distinga del texto de un vistazo. Sin JS,
   así que nada de pestañas ni de botón de copiar: los bloques se seleccionan
   enteros con user-select y ya. */

/* Menú de la sección: chips que envuelven. Con nueve páginas una fila de pestañas
   no cabe, así que se deja fluir en varias líneas. */
.doc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}
.doc-nav a {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--body);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.doc-nav a:hover { border-color: var(--brand); color: var(--brand-700); text-decoration: none; }
.doc-nav a.is-active { background: var(--brand); border-color: var(--brand); color: var(--white); }

/* Enlaces de anterior/siguiente al final de cada página. El <span> vacío de la
   primera página mantiene el siguiente pegado a la derecha. */
.doc-pager { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }

/* Entradilla de una página: el mismo texto, un punto más grande. */
.doc-lead { font-size: var(--fs-lead); color: var(--body); margin-top: 0; }

/* Bloque de código. Fondo oscuro para que corte el texto de alrededor, y scroll
   propio: una línea larga de JSON no puede desplazar la página entera. */
.code-block { margin: var(--sp-4) 0; }
.code-block__cap {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: var(--sp-1);
}
pre.code {
    margin: 0;
    padding: var(--sp-4);
    background: var(--bg-dark);
    color: var(--on-dark-soft);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.6;
    overflow-x: auto;
    user-select: all;
}
pre.code code { font-family: inherit; }

/* Listas de la documentación: la de puntos y la numerada de pasos. */
.doc-list { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); color: var(--body); font-size: var(--fs-sm); }
.doc-list li { margin-bottom: var(--sp-2); }

.doc-steps { margin: 0; padding-left: var(--sp-5); color: var(--body); font-size: var(--fs-sm); }
.doc-steps li { margin-bottom: var(--sp-3); }
.doc-steps li::marker { color: var(--brand); font-weight: 700; }

/* Rejilla de enlaces a otras páginas (el mapa de la portada). */
.doc-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
.doc-index a {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}
.doc-index a:hover { border-color: var(--brand); text-decoration: none; }
.doc-index__t { display: block; font-weight: 600; color: var(--brand-700); }
.doc-index__d { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); }

/* Índice de anclas dentro de una página larga (referencia de campos, ejemplos). */
.doc-toc { margin: 0; padding-left: var(--sp-5); columns: 2; column-gap: var(--sp-5); font-size: var(--fs-sm); }
.doc-toc li { margin-bottom: var(--sp-1); break-inside: avoid; }
@media (max-width: 560px) { .doc-toc { columns: 1; } }

/* Título de un apartado con ancla: deja aire por encima al saltar desde el índice. */
.doc-h { font-size: var(--fs-lead); margin-top: var(--sp-6); scroll-margin-top: var(--sp-4); }
.doc-h:first-of-type { margin-top: 0; }

/* Nombre de campo dentro de una tabla de referencia: que no se parta en dos líneas. */
.campo { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink); white-space: nowrap; }

/* Aviso corto embebido en el texto (una advertencia, no un error del sistema). */
.doc-aviso {
    border-left: 3px solid var(--brand);
    background: var(--brand-tint);
    padding: var(--sp-3) var(--sp-4);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--fs-sm);
    color: var(--body);
    margin: var(--sp-4) 0;
}
.doc-aviso--warn { border-left-color: var(--warn); background: var(--warn-tint); }
.doc-aviso p { margin: 0; }
.doc-aviso p + p { margin-top: var(--sp-2); }

/* Un párrafo de cierre pegado a la lista, la ficha o la tabla de arriba se lee como
   parte de ella. El aire se da aquí y no en cada plantilla. */
.ficha + .card__nota,
.ficha + .text-muted-sm,
.doc-steps + .card__nota,
.code-block + .card__nota,
table.data + .card__nota,
table.data + .text-muted-sm { margin-top: var(--sp-4); }

/* ============================================================
   Registro de actividad (auditoría)
   Ver PORTAL_AUDITORIA.md.
   ============================================================ */

/* La fecha no debe partirse en dos líneas: es la columna por la que se recorre la
   tabla de arriba abajo y con el salto se pierde el hilo. */
.log-cuando { white-space: nowrap; }

/* El contexto en JSON, plegado. Se usa `<details>` nativo porque el portal no lleva
   JavaScript; abierto, el bloque se lee como código y con su propio scroll para que
   un valor largo no ensanche la tabla entera. */
.log-detalle { margin-top: var(--sp-2); }

.log-detalle > summary {
    cursor: pointer;
    color: var(--brand-600);
    font-size: 0.85rem;
}

.log-detalle > pre {
    margin: var(--sp-2) 0 0;
    padding: var(--sp-3);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--body);
    max-width: 42rem;
    overflow-x: auto;
}

/* ============================================================
   Consumo del plan
   Ver PORTAL_CONSUMO.md.
   ============================================================ */

/* Bloque de la barra de consumo: cifras, barra y porcentaje como una sola pieza. */
.consumo { margin-bottom: var(--sp-4); }

.consumo__cifras {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    color: var(--body);
    margin-bottom: var(--sp-3);
}

.consumo__cifras strong { font-size: var(--fs-lead); color: var(--ink); }

/* `<progress>` nativo (sin `style` inline y con lectura accesible del valor), pero
   hay que pintarlo a mano: cada navegador lo dibuja distinto y el de serie no dice
   nada del estado. `appearance: none` + los dos pseudoelementos, uno para WebKit y
   otro para Firefox, que no comparten selector. */
.consumo__barra {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: 10px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--line);
    overflow: hidden;
}

.consumo__barra::-webkit-progress-bar { background: var(--line); }
.consumo__barra::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-pill); }
.consumo__barra::-moz-progress-bar      { background: var(--accent); border-radius: var(--radius-pill); }

/* El color dice lo mismo que el badge de al lado: verde dentro del plan, ámbar cerca
   del límite, rojo por encima. Nunca es el ÚNICO indicador — siempre hay texto. */
.consumo__barra--cerca::-webkit-progress-value  { background: var(--warn); }
.consumo__barra--cerca::-moz-progress-bar       { background: var(--warn); }
.consumo__barra--pasado::-webkit-progress-value { background: var(--danger); }
.consumo__barra--pasado::-moz-progress-bar      { background: var(--danger); }