/* ============================================================
   STELION Manager — dashboard claro
   Paleta blanco / negro / verde #7cd11a — alineada con la app
   (mobile/src/ui/theme.ts), la landing y stelion.com.uy.
   ============================================================ */
:root {
    /* Superficies */
    --m-bg: #f0f5fa;
    --m-card: #ffffff;
    --m-card-hover: #f6f9fc;
    --m-ink: #111111;              /* negro de marca: navbar */
    --m-border: #d1d5db;
    --m-border-soft: #e5e9ef;

    /* Texto */
    --m-text: #1e293b;
    --m-dim: #6f6a6a;
    --m-on-ink: #ffffff;
    --m-on-ink-dim: #b9bfc7;

    /* Acento */
    --m-accent: #7cd11a;                        /* verde puro: fills, barras, bordes */
    --m-accent-soft: rgba(124, 209, 26, 0.12);
    --m-accent-line: rgba(124, 209, 26, 0.38);
    --m-accent-dark: #1a2e05;                   /* texto SOBRE el verde */
    --m-accent-ink: #3d7a08;                    /* verde legible sobre blanco */

    /* Estados — mismos tonos que la app */
    --m-green: #16a34a;
    --m-amber: #d97706;
    --m-red: #dc2626;

    --m-font: 'Inter', system-ui, -apple-system, sans-serif;
    --m-display: 'Space Grotesk', var(--m-font);
}

body {
    background-color: var(--m-bg);
    color: var(--m-text);
    font-family: var(--m-font);
    -webkit-font-smoothing: antialiased;
}

.manager-bg {
    background-color: var(--m-bg);
    color: var(--m-text);
}

h2, h3, h4, h5, h6 {
    font-family: var(--m-display);
    color: var(--m-ink);
    letter-spacing: -0.01em;
}

/* ---------- Barra de arriba (cristal) ---------- */
/* Blanca translúcida que acompaña el scroll. Los grupos no despliegan una caja:
   cambian los links de la misma línea por los suyos, con una flecha para
   volver. En el teléfono el menú tapa la pantalla debajo de la barra, que
   queda igual. */
.manager-navbar {
    --nb-fg: var(--m-ink);
    --nb-dim: #475569;
    --nb-activo: var(--m-accent-ink);
    --nb-linea: var(--m-border);

    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.78) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    box-shadow: 0 1px 0 rgba(17, 17, 17, 0.06), 0 6px 24px rgba(17, 17, 17, 0.05);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.manager-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-right: 1.5rem;
}

.manager-navbar .marca-leon { height: 30px; width: auto; }
.manager-navbar .marca-palabra { height: 17px; width: auto; }

.manager-navbar .brand-tag {
    font-family: var(--m-font);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nb-dim);
    padding-left: 0.6rem;
    border-left: 1px solid var(--nb-linea);
    line-height: 1.1rem;
}

.manager-navbar .nav-link {
    color: var(--nb-dim) !important;
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.manager-navbar .nav-link:hover,
.manager-navbar .nav-link.active {
    color: var(--nb-activo) !important;
}

.manager-navbar .nav-link.active { font-weight: 600; }

/* Un grupo abierto: sólo él queda en la línea, con sus links. */
.manager-navbar .navbar-nav.en-grupo > .nav-item:not(.abierto),
.manager-navbar .grupo.abierto > .grupo-abrir { display: none; }

.manager-navbar .grupo-links { display: none; list-style: none; margin: 0; padding: 0; }

.manager-navbar .grupo.abierto > .grupo-links {
    display: flex;
    align-items: center;
    animation: grupo-entra 0.22s ease both;
}

.manager-navbar .grupo-abrir::after {
    content: '';
    display: inline-block;
    width: 0.38em;
    height: 0.38em;
    margin-left: 0.4em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.12em) rotate(-45deg);
    opacity: 0.6;
}

.manager-navbar .grupo-volver {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border: 0;
    background: transparent;
    color: var(--nb-fg);
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem 0.5rem 0.25rem;
    margin-right: 0.35rem;
    border-right: 1px solid var(--nb-linea);
    line-height: 1.2;
}

.manager-navbar .grupo-volver svg { flex-shrink: 0; }
.manager-navbar .grupo-volver:hover { color: var(--nb-activo); }

@keyframes grupo-entra {
    from { opacity: 0; transform: translateX(6px); }
    to { opacity: 1; transform: none; }
}

.manager-navbar .btn-salir {
    color: var(--nb-dim);
    border-color: var(--nb-linea);
    font-size: 0.85rem;
    padding: 0.2rem 0.7rem;
}

.manager-navbar .btn-salir:hover {
    color: var(--m-accent-dark);
    background: var(--m-accent);
    border-color: var(--m-accent);
}

/* La hamburguesa: tres rayas que se vuelven una cruz con el menú abierto. */
.manager-navbar .navbar-toggler {
    border: 0;
    padding: 0.5rem;
    box-shadow: none !important;
}

.hamb { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.hamb i {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--nb-fg);
    transition: transform 0.25s ease, opacity 0.2s ease, width 0.25s ease;
}
.hamb i:nth-child(2) { width: 70%; margin-left: auto; }
.navbar-toggler[aria-expanded="true"] .hamb i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .hamb i:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .hamb i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- El menú en el teléfono ---------- */
@media (max-width: 991.98px) {
    .manager-navbar .navbar-collapse { display: none; }

    /* Con el menú abierto la barra queda sólida: el blur haría de marco del
       menú fijo y lo encerraría dentro de la barra. */
    body.menu-abierto .manager-navbar {
        background: #ffffff !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: 0 1px 0 var(--m-border-soft);
    }

    .manager-navbar .navbar-collapse.show {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        top: var(--nb-alto, 60px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1080;
        background: #ffffff;
        padding: 0.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        animation: menu-entra 0.25s ease both;
    }

    .manager-navbar .navbar-collapse .navbar-nav { margin: 0 !important; }

    .manager-navbar .navbar-collapse .navbar-nav:not(.menu-pie) > .nav-item {
        border-bottom: 1px solid var(--m-border-soft);
    }

    .manager-navbar .navbar-collapse .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: var(--m-display);
        font-size: 1.45rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--m-ink) !important;
        padding: 0.85rem 0;
    }

    .manager-navbar .navbar-collapse .nav-link.active { color: var(--m-accent-ink) !important; }

    .manager-navbar .navbar-collapse .grupo-abrir::after {
        width: 0.4em;
        height: 0.4em;
        border-width: 2px;
        transform: rotate(-45deg);
        opacity: 0.45;
    }

    .manager-navbar .navbar-collapse .navbar-nav.en-grupo > .nav-item.abierto { border-bottom: 0; }

    .manager-navbar .navbar-collapse .grupo.abierto > .grupo-links {
        flex-direction: column;
        align-items: stretch;
    }

    .manager-navbar .navbar-collapse .grupo-links > li { border-bottom: 1px solid var(--m-border-soft); }

    .manager-navbar .navbar-collapse .grupo-volver {
        width: 100%;
        margin: 0;
        border-right: 0;
        padding: 0.9rem 0 0.6rem;
        font-size: 0.72rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--nb-dim);
    }

    .manager-navbar .navbar-collapse .nav-cuenta { margin-left: 0.5rem; margin-right: auto; }

    /* La cuenta y Salir, al pie. */
    .manager-navbar .navbar-collapse .menu-pie {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: auto !important;
        padding-top: 1.75rem;
    }

    .manager-navbar .navbar-collapse .menu-pie .nav-link {
        font-family: var(--m-font);
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--nb-dim) !important;
        padding: 0.5rem 0;
    }

    .manager-navbar .navbar-collapse .btn-salir {
        color: var(--m-ink);
        border-radius: 999px;
        padding: 0.45rem 1.4rem;
        font-size: 0.95rem;
    }

    body.menu-abierto { overflow: hidden; }
}

@keyframes menu-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .manager-navbar .navbar-collapse.show,
    .manager-navbar .grupo.abierto > .grupo-links { animation: none; }
}

/* ---------- Page heading ---------- */
.dash-head { margin-bottom: 1.6rem; }
.dash-head h2 { font-size: 1.7rem; font-weight: 700; margin-bottom: 0.15rem; }
.dash-head p { color: var(--m-dim); margin: 0; font-size: 0.95rem; }

/* ---------- Cards (override Bootstrap) ---------- */
.card {
    background: var(--m-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 16px !important;
    color: var(--m-text);
    box-shadow: 0 1px 3px rgba(17, 17, 17, 0.04);
}

.card-title { color: var(--m-ink); font-family: var(--m-display); }

/* ---------- Stat cards ---------- */
.stat-card {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.stat-card .card-body { padding: 1.25rem 1.35rem; }

.stat-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-dim);
    margin-bottom: 0.6rem;
}

.stat-icon {
    width: 30px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    background: var(--m-accent-soft);
    color: var(--m-accent-ink);
}

.stat-value {
    font-family: var(--m-display);
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--m-ink);
}

.stat-card.accent { border-color: var(--m-accent-line) !important; }
.stat-card.accent::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 100% 0%, rgba(124, 209, 26, 0.14), transparent 60%);
    pointer-events: none;
}
.stat-card.accent .stat-value { color: var(--m-accent-ink); }

.stat-card.green .stat-icon { background: rgba(22, 163, 74, 0.12); color: var(--m-green); }
.stat-card.amber .stat-icon { background: rgba(217, 119, 6, 0.12); color: var(--m-amber); }

.stat-note {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--m-dim);
}

/* ---------- Encabezado del tablero + selector de período ---------- */
.dash-head.dash-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Segmentado 7 / 30 / 90. Un `select` acá sería un click de más para la única
   decisión que el operador toma en esta pantalla. */
.periodo {
    display: inline-flex;
    background: var(--m-card);
    border: 1px solid var(--m-border);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.periodo button,
.periodo a {
    border: 0;
    background: transparent;
    color: var(--m-dim);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.periodo button:hover,
.periodo a:hover { color: var(--m-ink); }
.periodo a { text-decoration: none; display: inline-block; }

.periodo button.activo,
.periodo a.activo {
    background: var(--m-accent);
    color: var(--m-accent-dark);
}

/* El filtro del tablero: un botón con lo que se está mirando y, al abrirlo,
   los períodos rápidos arriba y el rango y el cargador abajo. */
.filtro-boton {
    background: var(--m-card);
    border: 1px solid var(--m-border);
    border-radius: 999px;
    color: var(--m-ink);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.95rem;
}
.filtro-boton:hover,
.filtro-boton:focus,
.filtro-boton.show { background: var(--m-card); border-color: var(--m-accent-line); color: var(--m-ink); }
.filtro-menu { width: 300px; padding: 0.75rem; }
.filtro-rapidos { display: flex; flex-wrap: wrap; gap: 4px; }
.filtro-rapidos button {
    border: 1px solid var(--m-border);
    background: transparent;
    color: var(--m-dim);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
}
.filtro-rapidos button:hover { color: var(--m-ink); }
.filtro-rapidos button.activo { background: var(--m-accent); border-color: var(--m-accent); color: var(--m-accent-dark); }
.filtro-form { border-top: 1px solid var(--m-border); margin-top: 0.75rem; padding-top: 0.75rem; }
.filtro-form .form-label { font-size: 0.78rem; color: var(--m-dim); margin-bottom: 0.2rem; }

/* ---------- KPI ---------- */
/* La tarjeta entera es el enlace cuando el número lleva a algún lado (las
   fallidas llevan a Errores). Sin subrayado ni color de link: se nota porque
   se levanta al pasar por encima, no porque grite. */
a.stat-card { text-decoration: none; display: block; }
a.stat-card:hover { border-color: var(--m-accent-line) !important; transform: translateY(-1px); }
a.stat-card { transition: transform 0.15s ease, border-color 0.15s ease; }

.stat-value-row {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.stat-unit { font-size: 0.95rem; font-weight: 500; color: var(--m-dim); }

/* Variación contra el período anterior. Es el único lugar del tablero donde el
   verde y el rojo no significan "carga que salió" y "carga que falló", así que
   el signo va siempre escrito: no queda colgado del color. */
.stat-delta {
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.stat-delta.sube { background: rgba(22, 163, 74, 0.12); color: var(--m-green); }
.stat-delta.baja { background: rgba(220, 38, 38, 0.10); color: var(--m-red); }
.stat-delta.plano { background: rgba(17, 17, 17, 0.06); color: var(--m-dim); }

/* Fila chica de números secundarios: mismo formato, media altura. */
.mini-card .card-body { padding: 0.85rem 1.1rem; }
.mini-card .stat-label { margin-bottom: 0.3rem; font-size: 0.72rem; }
.mini-card .stat-value { font-size: 1.25rem; }

/* ---------- Gráficos ---------- */
.chart-card { height: 100%; }
.chart-card .card-body { padding: 1.1rem 1.25rem 1.25rem; }

.chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.chart-title {
    font-family: var(--m-display);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--m-ink);
    margin: 0;
}

.chart-total {
    font-size: 0.8rem;
    color: var(--m-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* El total y el selector de grano conviven a la derecha del título. */
.chart-head-acciones {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* El mismo selector del período, en el tamaño de un encabezado de tarjeta. */
.periodo.mini { padding: 2px; }
.periodo.mini button { font-size: 0.75rem; padding: 0.2rem 0.6rem; }

/* El día que se mira hora por hora. Ancho fijo: sin esto el select cambia de
   tamaño con la fecha que tenga adentro y el encabezado se mueve solo. */
.dia-energia {
    width: auto;
    min-width: 8.5rem;
    font-size: 0.78rem;
    padding: 0.2rem 1.6rem 0.2rem 0.6rem;
    border-radius: 999px;
}

/* El selector de red y el de período, juntos a la derecha del título. */
.dash-head-acciones {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* ---------- Calendario de un día ---------- */
/* Los días con datos no son un rango: un deploy o la instancia dormida dejan
   agujeros en el medio, y un `input type="date"` sólo sabe de mínimo y máximo.
   Por eso el calendario propio, que habilita exactamente los días observados. */
.cal { position: relative; }

.cal-btn {
    border: 1px solid var(--m-border);
    background: var(--m-card);
    color: var(--m-text);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.cal-btn:hover { border-color: var(--m-accent-line); }

.cal-pop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    width: 15rem;
    padding: 0.6rem;
    background: var(--m-card);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.12);
}

.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--m-ink);
    margin-bottom: 0.4rem;
}

.cal-nav button {
    border: 0;
    background: transparent;
    color: var(--m-dim);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.4rem;
    cursor: pointer;
}

.cal-nav button:hover:not(:disabled) { color: var(--m-ink); }
.cal-nav button:disabled { opacity: 0.25; cursor: default; }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.cal-dow {
    font-size: 0.68rem;
    color: var(--m-dim);
    padding-bottom: 0.2rem;
}

.cal-dia {
    border: 0;
    background: transparent;
    color: var(--m-text);
    font-size: 0.78rem;
    padding: 0.28rem 0;
    border-radius: 7px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.cal-dia:hover:not(:disabled) { background: var(--m-accent-soft); }

/* Un día sin pasadas no es un día sin cargas: no se puede elegir. */
.cal-dia:disabled { color: var(--m-border); cursor: default; }

.cal-dia.activo {
    background: var(--m-accent);
    color: var(--m-accent-dark);
    font-weight: 700;
}

.cal-reset {
    width: 100%;
    margin-top: 0.5rem;
    border: 0;
    border-top: 1px solid var(--m-border-soft);
    background: transparent;
    color: var(--m-dim);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.45rem 0 0;
    cursor: pointer;
}

.cal-reset:hover { color: var(--m-accent-ink); }

/* La altura la fija el contenedor y no el canvas: Chart.js con
   `maintainAspectRatio:false` estira el canvas a lo que le den, y sin una
   altura acá el gráfico crece sin fin en cada repintado. */
.chart-box { position: relative; height: 260px; }
.chart-box.alto { height: 300px; }
.chart-box.bajo { height: 210px; }

/* Una tabla larga al lado de un gráfico de 300 px. Sin tope, las 40 filas de
   estaciones de UTE estiran la fila entera y el gráfico de al lado queda con
   media tarjeta en blanco debajo. */
.tabla-alta { max-height: 320px; overflow-y: auto; }

/* Lo que se ve cuando el período no tiene ni una carga. Un gráfico vacío con
   los ejes dibujados parece un gráfico roto. */
.chart-vacio {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m-dim);
    font-size: 0.85rem;
    background: var(--m-card);
}

/* ---------- Mapa del estudio de uso de UTE ---------- */
/* Dos selectores al lado del título no entran en un celular: bajan a la línea
   de abajo en vez de empujar la tarjeta más allá del borde. */
.chart-head.envuelve { flex-wrap: wrap; align-items: center; }
.chart-head.envuelve .chart-head-acciones { flex-wrap: wrap; }

.mapa-uso {
    height: 480px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--m-border-soft);
    background: #eef0f2;
    /* Leaflet apila sus capas con z-index de hasta 1000: sin esto el mapa se
       dibuja encima del menú de la barra y del calendario. */
    position: relative;
    z-index: 0;
}

@media (max-width: 767px) {
    .mapa-uso { height: 360px; }
}

.mapa-momento {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.mapa-momento[hidden] { display: none; }
.mapa-momento input { width: auto; font-variant-numeric: tabular-nums; }

/* El fondo en gris claro: el color del mapa lo ponen las estaciones. */
.mapa-uso .leaflet-tile-pane {
    filter: grayscale(1) brightness(1.06) contrast(0.88);
}

.mapa-leyenda {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--m-border-soft);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-family: var(--m-font);
    font-size: 0.72rem;
    color: var(--m-text);
    font-variant-numeric: tabular-nums;
}

.mapa-escala {
    display: inline-block;
    width: 72px;
    height: 8px;
    border-radius: 999px;
}

/* Lo mismo que se dibuja para una estación sin usos. */
.mapa-cero {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid #8a9099;
    background: #fff;
}

.mapa-pop {
    font-family: var(--m-font);
    font-size: 0.8rem;
    min-width: 170px;
    color: var(--m-text);
}
.mapa-pop strong {
    display: block;
    font-family: var(--m-display);
    font-size: 0.9rem;
    color: var(--m-ink);
}
.mapa-pop em {
    display: block;
    font-style: normal;
    color: var(--m-dim);
    font-size: 0.74rem;
    margin-bottom: 0.35rem;
}
.mapa-pop div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.08rem 0;
}
.mapa-pop div span { color: var(--m-dim); }
.mapa-pop div b { font-weight: 600; font-variant-numeric: tabular-nums; }
.leaflet-popup-content { margin: 0.7rem 0.85rem; }

/* Se lee como un texto: el ancho de línea queda acotado aunque la tarjeta vaya
   a lo ancho de la pantalla. */
.analisis {
    max-width: 72ch;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--m-text);
}
.analisis-titular {
    font-family: var(--m-display);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--m-ink);
    margin: 0.2rem 0 1rem;
}
.analisis p { margin: 0 0 0.85rem; }
.analisis p:last-child { margin-bottom: 0; }
.analisis-entrada + .analisis-entrada {
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--m-border-soft);
}
.analisis-fecha {
    font-size: 0.78rem;
    color: var(--m-dim);
    font-variant-numeric: tabular-nums;
}
.analisis-vacio {
    color: var(--m-dim);
    font-size: 0.85rem;
    padding: 2rem 0;
    text-align: center;
}

/* Comentarios internos de /manager/uso-red. */
.comentario-form {
    border: 1px dashed transparent;
    border-radius: 10px;
    transition: border-color 0.15s;
}
.comentario-form.soltando { border-color: var(--m-accent-line); background: var(--m-accent-soft); }
.comentario-form textarea { font-size: 0.9rem; resize: vertical; }
.comentario-acciones {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.comentario-adjuntar { margin: 0; padding: 0.3rem 0.85rem; }
.comentario-previas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.comentario-previas:not(:empty) { margin-top: 0.6rem; }
.comentario-previa { position: relative; }
.comentario-previa img {
    width: 88px;
    height: 66px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--m-border-soft);
}
.comentario-previa button {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 0;
    background: var(--m-ink);
    color: var(--m-on-ink);
    font-size: 0.8rem;
    line-height: 20px;
    padding: 0;
}
.comentarios { margin-top: 1.1rem; }
.comentario {
    padding: 0.9rem 0;
    border-top: 1px solid var(--m-border-soft);
}
.comentario-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--m-dim);
    font-variant-numeric: tabular-nums;
}
.comentario-head b { color: var(--m-text); font-weight: 600; }
.comentario-head form { margin: 0; }
.comentario-borrar {
    border: 0;
    background: none;
    padding: 0;
    color: var(--m-dim);
    font-size: 0.75rem;
}
.comentario-borrar:hover { color: var(--m-red); }
.comentario-texto {
    margin: 0.35rem 0 0;
    max-width: 90ch;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--m-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.comentario-capturas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.comentario-capturas img {
    display: block;
    max-width: 100%;
    width: 260px;
    height: 160px;
    object-fit: cover;
    object-position: top left;
    border-radius: 8px;
    border: 1px solid var(--m-border-soft);
}

/* Leyenda de la dona de flota: el color no viaja solo, cada estado lleva su
   nombre y su número al lado. */
.flota-leyenda {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.9rem;
}

.flota-leyenda div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--m-text);
}

.flota-leyenda .punto {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.flota-leyenda .n {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--m-ink);
}

/* ---------- Detalle de una carga (modal) ---------- */
/* Sin padding propio: lo pone el `.modal-body` que lo contiene. Antes esto
   vivía en una fila desplegada dentro de la tabla y lo necesitaba. */
.tx-detail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.6rem 1.6rem;
    align-items: start;
}

/* El motivo de la falla ocupa el ancho entero y va primero: es lo que se
   viene a buscar cuando una fila está en rojo. */
.tx-falla {
    grid-column: 1 / -1;
    border-left: 3px solid var(--m-red);
    background: rgba(220, 38, 38, 0.06);
    border-radius: 0 8px 8px 0;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.3rem;
}

.tx-falla-texto { color: var(--m-text); font-size: 0.86rem; line-height: 1.45; }
.tx-falla-codigo { color: var(--m-dim); font-size: 0.75rem; margin-top: 0.25rem; }

.tx-bloque { display: flex; flex-direction: column; gap: 0.2rem; }

/* Un bloque que ocupa el ancho entero de la grilla: lo usa "El arranque y el
   corte", que se lee de corrido y no como una columna al lado de otra. */
.tx-bloque-ancho { grid-column: 1 / -1; }

.tx-bloque-titulo {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-dim);
    margin-bottom: 0.2rem;
}

/* Horario de la carga en la tabla: inicio -> fin arriba, duración abajo. */
.tx-horario { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tx-horario-sub { color: var(--m-dim); font-size: 0.75rem; }

.tx-toggle { cursor: pointer; }

/* ---------- Motivo de una carga que no salió (pestaña Errores) ---------- */
.falla-motivo { color: var(--m-text); font-size: 0.82rem; line-height: 1.4; }
.falla-codigo { color: var(--m-dim); font-size: 0.74rem; margin-top: 0.2rem; }

.tx-detail .d-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--m-dim);
}

.tx-detail .d-row strong { color: var(--m-text); font-weight: 600; }
.tx-detail .d-row.subtotal { border-top: 1px solid var(--m-border); padding-top: 0.3rem; }
.tx-detail .d-row.muted { font-size: 0.78rem; }
.tx-detail .d-row.total-stelion strong { color: var(--m-amber); }
.tx-detail .d-row.total-host strong { color: var(--m-accent-ink); }
.tx-detail .cap-applied { color: var(--m-amber); font-weight: 600; }

/* ---------- Chargers / progress ---------- */
.charger-line { color: var(--m-dim); font-size: 0.92rem; margin-bottom: 0.3rem; }
.charger-line strong { color: var(--m-ink); font-size: 1.05rem; }

.progress {
    background-color: var(--m-bg);
    border: 1px solid var(--m-border);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
}
.progress-bar.bg-danger { background-color: var(--m-amber) !important; }   /* ocupados */
.progress-bar.bg-info { background-color: var(--m-accent) !important; }    /* disponibles */
.progress-bar.bg-secondary { background-color: #cbd2da !important; }       /* offline */

/* ---------- Table ---------- */
.table {
    color: var(--m-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--m-text);
    margin-bottom: 0;
}
.table thead th {
    color: var(--m-dim);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--m-border);
    background: transparent;
}
/* thead .table-light de Bootstrap dentro de nuestras cards */
.table thead.table-light th {
    background: var(--m-bg);
    color: var(--m-dim);
}
.table td {
    border-color: var(--m-border-soft);
    vertical-align: middle;
    color: var(--m-text);
}
.table-sm td, .table-sm th { padding: 0.7rem 0.6rem; }
.table.table-hover tbody tr:hover > * {
    background: var(--m-card-hover);
    color: var(--m-text);
}

tr.active-row > * { background: rgba(124, 209, 26, 0.09); transition: background 200ms ease-in-out; }

.amount-cell { font-variant-numeric: tabular-nums; }
/* `.table td` fija el color de la celda, asi que hace falta ganarle en especificidad. */
.table td.estimated-amount { font-weight: 700; color: var(--m-accent-ink); }

/* ---------- Badges ---------- */
.badge {
    font-weight: 600;
    padding: 0.4em 0.7em;
    border-radius: 999px;
}
.badge.bg-primary { background-color: var(--m-accent-soft) !important; color: var(--m-accent-ink) !important; }
.badge.bg-success { background-color: rgba(22, 163, 74, 0.14) !important; color: var(--m-green) !important; }
.badge.bg-warning { background-color: rgba(217, 119, 6, 0.14) !important; color: var(--m-amber) !important; }
.badge.bg-danger { background-color: rgba(220, 38, 38, 0.12) !important; color: var(--m-red) !important; }
.badge.bg-info { background-color: var(--m-accent-soft) !important; color: var(--m-accent-ink) !important; }
.badge.bg-secondary { background-color: rgba(17, 17, 17, 0.08) !important; color: var(--m-dim) !important; }

/* ---------- Buttons ---------- */
.btn-primary {
    background-color: var(--m-accent);
    border-color: var(--m-accent);
    color: var(--m-accent-dark);
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #6fbd15;
    border-color: #6fbd15;
    color: var(--m-accent-dark);
}

.btn-outline-secondary {
    color: var(--m-ink);
    border-color: var(--m-border);
}
.btn-outline-secondary:hover {
    background-color: var(--m-ink);
    border-color: var(--m-ink);
    color: var(--m-on-ink);
}

.btn-outline-danger {
    color: var(--m-red);
    border-color: rgba(220, 38, 38, 0.45);
}
.btn-outline-danger:hover {
    background-color: var(--m-red);
    border-color: var(--m-red);
    color: #fff;
}

.text-muted { color: var(--m-dim) !important; }
.text-dark { color: var(--m-text) !important; }
.text-primary { color: var(--m-ink) !important; }

/* ---------- Formularios ---------- */
.form-label { color: var(--m-text); font-weight: 500; font-size: 0.9rem; }
.form-text { color: var(--m-dim); }

.form-control, .form-select {
    border-color: var(--m-border);
    color: var(--m-text);
    border-radius: 10px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--m-accent);
    box-shadow: 0 0 0 0.2rem var(--m-accent-soft);
}

.form-check-input:checked {
    background-color: var(--m-accent);
    border-color: var(--m-accent);
}
.form-check-input:focus {
    border-color: var(--m-accent);
    box-shadow: 0 0 0 0.2rem var(--m-accent-soft);
}

.input-group-text {
    background-color: var(--m-bg);
    border-color: var(--m-border);
    color: var(--m-dim);
}

/* ---------- Alerts / code (OCPP ready) ---------- */
.alert-info {
    background-color: var(--m-accent-soft);
    border-color: var(--m-accent-line);
    color: var(--m-text);
}
.alert-danger {
    background-color: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.35);
    color: var(--m-red);
}

.bg-light { background-color: var(--m-bg) !important; }

code { color: var(--m-accent-ink); }

/* ---------- Spinner / active sessions ---------- */
.badge-spinner {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid rgba(124, 209, 26, 0.3);
    border-top-color: var(--m-accent-ink);
    animation: spin 1s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

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

.mini-progress {
    height: 6px;
    background: linear-gradient(90deg, rgba(124, 209, 26, 0.15) 0%, rgba(124, 209, 26, 0.75) 50%, rgba(124, 209, 26, 0.15) 100%);
    background-size: 200% 100%;
    animation: prog 1.2s linear infinite;
    border-radius: 6px;
    margin-top: 6px;
}

@keyframes prog {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.active-session-time { font-size: 0.85rem; color: var(--m-dim); }

/* «En curso» comparte fila con «Cargas por día»: con muchas cargas a la vez la
   lista corre adentro de la tarjeta en vez de estirar la fila. */
.en-curso-lista { max-height: 300px; overflow-y: auto; }
.en-curso-lista > div:last-child { margin-bottom: 0 !important; }

/* ---------- Login ---------- */
/* La misma barra cristal del panel arriba y una tarjeta en el centro. */
.login-fondo {
    min-height: calc(100vh - 58px);
    min-height: calc(100dvh - 58px);
    padding: 2rem 0 4rem;
    background:
        radial-gradient(90% 55% at 50% 0%, rgba(124, 209, 26, 0.10) 0%, rgba(124, 209, 26, 0) 70%),
        var(--m-bg);
}

.manager-login {
    width: 100%;
    max-width: 380px;
    padding: 0 1rem;
}

.login-tarjeta {
    background: var(--m-card);
    border: 1px solid var(--m-border-soft);
    border-radius: 18px;
    padding: 2rem 1.75rem 1.75rem;
    box-shadow: 0 1px 0 rgba(17, 17, 17, 0.03), 0 18px 48px rgba(17, 17, 17, 0.07);
}

.login-titulo {
    font-family: var(--m-display);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--m-ink);
    margin-bottom: 1.5rem;
}

.login-tarjeta .form-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-dim);
    margin-bottom: 0.35rem;
}

.login-tarjeta .form-control {
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
}

.login-boton {
    padding: 0.65rem;
    border-radius: 999px;
    font-weight: 600;
}

/* ============================================================
   Tickets — la lista, la ficha y el hilo.
   Mismas cinco etiquetas de estado que el sistema de correcciones
   de Stelion Books (pedir.uy/stelion/books).
   ============================================================ */

/* El contador de abiertos, en la pestaña de la barra. */
.manager-navbar .nav-cuenta {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 0.35rem;
    margin-left: 0.15rem;
    border-radius: 999px;
    background: var(--m-accent);
    color: var(--m-accent-dark);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}

.tk-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
}

.tk-kpi-k {
    color: var(--m-dim);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tk-kpi-v {
    color: var(--m-ink);
    font-family: var(--m-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.tk-filtros {
    display: flex;
    gap: 0.25rem;
    padding: 3px;
    background: var(--m-bg);
    border: 1px solid var(--m-border-soft);
    border-radius: 999px;
}

.tk-filtros a {
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    color: var(--m-dim);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
}

.tk-filtros a:hover { color: var(--m-ink); }

.tk-filtros a.activo {
    background: var(--m-card);
    color: var(--m-ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.tk-fila { cursor: pointer; }

/* Estado y prioridad: la misma pastilla en la lista y en la ficha. */
.tk-estado,
.tk-prio {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.tk-nuevo { background: var(--m-accent-soft); color: var(--m-accent-ink); }
.tk-en_curso { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.tk-pendiente_tercero { background: rgba(217, 119, 6, 0.12); color: var(--m-amber); }
.tk-resuelto { background: rgba(22, 163, 74, 0.12); color: var(--m-green); }
.tk-cerrado { background: rgba(17, 17, 17, 0.07); color: var(--m-dim); }

.tk-prio-baja { background: rgba(17, 17, 17, 0.06); color: var(--m-dim); }
.tk-prio-media { background: rgba(17, 17, 17, 0.06); color: var(--m-text); }
.tk-prio-alta { background: rgba(220, 38, 38, 0.10); color: var(--m-red); }

.tk-volver {
    color: var(--m-dim);
    font-size: 0.85rem;
    text-decoration: none;
}

.tk-volver:hover { color: var(--m-ink); }

.tk-numero {
    margin: 0;
    font-family: var(--m-display);
    font-size: 1.5rem;
    font-weight: 700;
}

.tk-titulo {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.tk-descripcion {
    color: var(--m-text);
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-wrap;
    margin-bottom: 1.25rem;
}

.tk-datos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.9rem 1.5rem;
    margin: 0;
}

.tk-datos .tk-ancho { grid-column: 1 / -1; }

.tk-datos dt {
    color: var(--m-dim);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tk-datos dd {
    margin: 0.15rem 0 0;
    color: var(--m-text);
    font-size: 0.9rem;
    white-space: pre-wrap;
}

.tk-seccion {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--m-dim);
    margin-bottom: 0.85rem;
}

.tk-hilo {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

.tk-hilo li {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--m-border-soft);
}

.tk-hilo li:last-child { border-bottom: none; }

.tk-hilo-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.tk-hilo-autor { font-size: 0.84rem; font-weight: 600; color: var(--m-ink); }
.tk-hilo-fecha { font-size: 0.76rem; color: var(--m-dim); }

.tk-hilo-texto {
    margin-top: 0.2rem;
    font-size: 0.88rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

/* Una nota interna se lee distinto de una respuesta: el usuario no la ve. */
.tk-hilo li.tk-interna {
    background: rgba(217, 119, 6, 0.06);
    border-left: 2px solid var(--m-amber);
    padding-left: 0.6rem;
}

.tk-hilo-tag {
    margin-top: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--m-amber);
}


/* La columna de actividad acompaña el scroll de la ficha, que ahora es larga:
   contestar sin tener que volver arriba. Arranca debajo de la barra, que
   también queda pegada arriba. */
@media (min-width: 992px) {
    .tk-actividad {
        position: sticky;
        top: 4.5rem;
        max-height: calc(100vh - 5.5rem);
        overflow-y: auto;
    }
}


/* ---------- Teléfono ---------- */
/* Las tablas en un teléfono: cada fila pasa a ser una tarjeta con «etiqueta
   valor» por renglón. Las etiquetas las pone manager_base.html copiando el
   encabezado de cada columna en `data-label`, también en las tablas que arma el
   JavaScript de cada pantalla. Una tabla que no tiene que apilarse lleva
   `no-apilar`. */
@media (max-width: 767.98px) {
    .container-fluid.py-4 { padding-left: 0.75rem; padding-right: 0.75rem; }
    h2, .dash-head h2 { font-size: 1.45rem; }

    table.tabla-apilada thead { display: none; }
    table.tabla-apilada,
    table.tabla-apilada tbody,
    table.tabla-apilada tr,
    table.tabla-apilada td { display: block; width: 100%; }
    table.tabla-apilada tr {
        padding: 0.65rem 0.9rem;
        border-bottom: 1px solid var(--m-border-soft);
    }
    table.tabla-apilada tr:last-child { border-bottom: 0; }
    table.tabla-apilada td {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: flex-end;
        column-gap: 0.45rem;
        padding: 0.18rem 0 !important;
        border: 0 !important;
        text-align: right !important;
        white-space: normal !important;
        min-height: 1.6rem;
    }
    table.tabla-apilada td::before {
        content: attr(data-label);
        flex-shrink: 0;
        margin-right: auto;
        padding-right: 0.75rem;
        text-align: left;
        color: var(--m-dim);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    /* Sin encabezado (columna de botones) o la fila de «no hay nada»: el
       contenido solo, sin etiqueta. */
    table.tabla-apilada td[data-label=""]::before,
    table.tabla-apilada td[colspan]::before { content: none; }
    table.tabla-apilada td[colspan] { justify-content: center; text-align: center !important; }
    table.tabla-apilada td[data-label=""] { justify-content: flex-end; }
    table.tabla-apilada td > form { margin-left: auto; }

    /* Los encabezados de gráfico con selectores (Energía despachada: total,
       día y Por día/Por hora) no entran al lado del título: bajan a la línea
       de abajo en vez de empujar la tarjeta más allá del borde. */
    .chart-head { flex-wrap: wrap; align-items: center; row-gap: 0.5rem; }
    .chart-head-acciones { flex-wrap: wrap; row-gap: 0.5rem; min-width: 0; max-width: 100%; }
    .chart-head-acciones .dia-energia { min-width: 0; max-width: 100%; }
    .chart-box { min-width: 0; max-width: 100%; }

    /* Los números grandes de las tarjetas no se parten: un «$1800.0» arriba y
       un «0» abajo se lee como otro número. */
    .stat-card .stat-value { font-size: 1.45rem; white-space: nowrap; }
    .table-responsive:has(> table.tabla-apilada) { overflow-x: visible; }
}
}

/* ---------------------------------------------------------------------------
   Cargadores: una tarjeta por equipo y un bloque por manguera.
   --------------------------------------------------------------------------- */
.cg-card .min-w-0 { min-width: 0; }
.cg-info {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 0.5rem 1.5rem;
}
.cg-hose {
    border: 1px solid var(--m-border-soft);
    border-left: 4px solid var(--m-border);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.6rem;
    background: var(--m-card);
}
.cg-hose--available { border-left-color: var(--m-green); }
.cg-hose--charging { border-left-color: var(--m-accent); background: var(--m-accent-soft); }
.cg-hose--faulted { border-left-color: var(--m-red); }
.cg-hose--unavailable { border-left-color: var(--m-amber); }
.cg-hose-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.cg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--m-border);
    flex-shrink: 0;
}
.cg-hose--available .cg-dot { background: var(--m-green); }
.cg-hose--charging .cg-dot { background: var(--m-accent); }
.cg-hose--faulted .cg-dot { background: var(--m-red); }
.cg-hose--unavailable .cg-dot { background: var(--m-amber); }
.cg-hose-sub { margin-top: 0.15rem; }
.cg-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.6rem 0 0.35rem;
}
.cg-k { color: var(--m-dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cg-v {
    font-family: var(--m-display);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--m-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 575.98px) {
    .cg-info { grid-template-columns: 1fr 1fr; }
    .cg-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}