/*
 * mod_indicators_cl 2.0.4 — INNOVATE
 * Licencia MIT
 *
 * Por defecto los colores se derivan del color de texto de la plantilla (currentColor),
 * así se adaptan solos a fondos claros u oscuros (blanco, azul, gris, etc.).
 * Para fijarlos, redefine las variables en el CSS de tu plantilla, por ejemplo:
 *   .icl { --icl-tile-bg: #eef6ff; --icl-value: #0b3b6f; --icl-muted: #4b5563; }
 */

.icl {
    --icl-text: currentColor;
    --icl-muted: color-mix(in srgb, currentColor 78%, transparent);
    --icl-value: currentColor;
    --icl-tile-bg: color-mix(in srgb, currentColor 9%, transparent);
    --icl-border: color-mix(in srgb, currentColor 25%, transparent);
    --icl-radius: 10px;
    --icl-gap: 10px;
    --icl-accent: currentColor;
    --icl-stale: currentColor;
    --icl-speed: 5s; /* segundos por indicador en la marquesina */

    container-type: inline-size;
    color: inherit;
    font-size: 1rem;
    line-height: 1.3;
}

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

.icl .icl-name {
    color: var(--icl-muted);
    font-weight: 500;
}

.icl .icl-value {
    color: var(--icl-value);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.icl .icl-note {
    color: var(--icl-muted);
    font-size: .75em;
    font-weight: 400;
}

/* ------------------------------------------------------------ Tarjetas */

.icl-cards .icl-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--icl-gap);
}

.icl-cards.icl-cols-2 .icl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* número impar de indicadores: la última tarjeta usa todo el ancho */
.icl-cards.icl-cols-2 .icl-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.icl-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--icl-tile-bg);
    border-radius: var(--icl-radius);
}

.icl-card .icl-name {
    font-size: .875em;
}

.icl-card .icl-value {
    font-size: 1.2em;
}

/* ------------------------------------------------------------ Tabla */

.icl-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.icl-table th,
.icl-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--icl-border);
    vertical-align: middle;
}

.icl-table th {
    text-align: left;
    font-weight: 500;
}

.icl-table th .icl-note {
    display: block;
}

.icl-table td.icl-value {
    text-align: right;
}

.icl-table.icl-table tr:last-child > * {
    border-bottom: 0;
}

.icl-cols-2 .icl-table td.icl-value:not(:last-child) {
    padding-right: 16px;
}

/* ------------------------------------------------------------ Barra */

.icl-bar .icl-bar-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
}

.icl-bar .icl-bar-list li {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* ------------------------------------------------------------ Marquesina */

.icl-ticker-viewport {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.icl-ticker-track {
    display: flex;
    width: max-content;
    animation: icl-scroll calc(var(--icl-items, 5) * var(--icl-speed)) linear infinite;
}

.icl-ticker-viewport:hover .icl-ticker-track,
.icl-ticker-viewport:focus-within .icl-ticker-track {
    animation-play-state: paused;
}

.icl-ticker-list {
    display: flex;
    gap: 28px;
    padding-right: 28px !important;
}

.icl-ticker-list li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

@keyframes icl-scroll {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .icl-ticker-track {
        animation: none;
        width: auto;
    }
    .icl-ticker-list { flex-wrap: wrap; }
    .icl-ticker-list[aria-hidden] { display: none; }
}

/* ------------------------------------------------------------ Pie */

.icl-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 10px;
    font-size: .8em;
    color: var(--icl-muted);
}

.icl-footer .icl-attrib {
    margin-left: auto;
}

.icl-footer .icl-stale {
    flex-basis: 100%;
    order: 3;
}

.icl-footer .icl-credit {
    color: var(--icl-muted);
    text-decoration: none;
}

.icl-footer .icl-credit:hover {
    color: var(--icl-accent);
    text-decoration: underline;
}

.icl-footer .icl-stale {
    color: var(--icl-stale);
    font-weight: 600;
}

.icl-footer .icl-stale::before {
    content: "⚠ ";
}

.icl-ticker .icl-footer,
.icl-bar .icl-footer {
    justify-content: center;
}

.icl-ticker .icl-footer .icl-attrib,
.icl-bar .icl-footer .icl-attrib {
    margin-left: 0;
}

/* ------------------------------------------------------------ Espacios angostos
 * Se mide el ancho del módulo (no de la pantalla): funciona igual en una barra lateral
 * de escritorio que en un celular.
 */

@container (max-width: 230px) {
    .icl-cards.icl-cols-2 .icl-grid {
        grid-template-columns: 1fr;
    }

    .icl-cols-2 .icl-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .icl-cols-2 .icl-table td.icl-empty {
        display: none;
    }

    .icl-cols-2 .icl-table td.icl-value:not(:last-child) {
        padding-right: 8px;
    }
}

/* ------------------------------------------------------------ Error (solo administradores) */

.icl-error {
    font-size: .9em;
}

/* ------------------------------------------------------------ Aviso de series fallidas (solo administradores) */

.icl-admin-note {
    margin-top: 10px;
    font-size: .8em;
}

.icl-admin-note ul {
    margin: 4px 0 0 !important;
    padding-left: 1.2em !important;
    list-style: disc !important;
}