/*
 * Indicadores y panel de inicio (09-11-2026).
 * Colores de datos validados para daltonismo en claro y oscuro (paleta categórica de 6,
 * en orden fijo). El texto nunca usa el color del dato: usa la tinta del tema.
 */

.indicadores,
.panel-mio {
    --ind-serie: #2a78d6;
    --ind-pista: #edf2f8;
    --ind-linea: #e3e1dc;
    --ind-tinta: var(--blue-dark);
    --ind-tenue: var(--muted);
    --ind-tile: var(--soft);
    --ind-1: #2a78d6;
    --ind-2: #eb6834;
    --ind-3: #1baf7a;
    --ind-4: #eda100;
    --ind-5: #e87ba4;
    --ind-6: #008300;
    --ind-sobre-1: #ffffff;
    --ind-sobre-4: #0b0b0b;
}

html[data-theme="dark"] .indicadores,
html[data-theme="dark"] .panel-mio {
    --ind-serie: #3987e5;
    --ind-pista: #2b2d36;
    --ind-linea: #34363f;
    --ind-tile: #191a20;
    --ind-1: #3987e5;
    --ind-2: #d95926;
    --ind-3: #199e70;
    --ind-4: #c98500;
    --ind-5: #d55181;
    --ind-6: #008300;
}

.indicadores {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

/* Cabecera compacta */
.ind-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
}

.ind-cabecera h1 {
    margin: 0;
    color: var(--ind-tinta);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.1;
}

.ind-periodo {
    margin: 6px 0 0;
    color: var(--ind-tenue);
    font-size: 0.95rem;
}

.ind-acciones,
.ind-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Pestañas y filtro en una sola franja */
.ind-barra-herramientas {
    display: grid;
    gap: 14px;
    padding: 12px 16px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.ind-pestanas ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0 0 12px;
    list-style: none;
    border-bottom: 1px solid var(--ind-linea);
}

.ind-pestanas a {
    display: inline-flex;
    min-height: 40px;
    padding: 0 14px;
    align-items: center;
    border-radius: 6px;
    color: var(--ind-tinta);
    font-weight: 800;
    text-decoration: none;
}

.ind-pestanas a:hover {
    background: var(--ind-tile);
}

.ind-pestanas a.is-active {
    color: var(--white);
    background: var(--blue);
}

.ind-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}

.ind-campo {
    display: grid;
    gap: 6px;
}

.ind-campo label {
    color: var(--ind-tinta);
    font-size: 0.85rem;
    font-weight: 800;
}

.ind-campo select,
.ind-campo input,
.ind-tabla-personalizar select,
.ind-orden {
    min-width: 170px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.ind-orden {
    width: 80px;
    min-width: 0;
}

.ind-filtro .button {
    min-height: 42px;
}

.ind-ayuda {
    flex-basis: 100%;
    margin: 0;
    color: var(--ind-tenue);
    font-size: 0.82rem;
}

.ind-aviso {
    margin: 0;
    padding: 12px 16px;
    border-left: 4px solid var(--orange);
    border-radius: 6px;
    background: var(--orange-soft);
    color: var(--text);
    font-weight: 700;
}

/*
 * Grilla de tarjetas: las anchas ocupan la fila; las de media fila van de a dos y se estiran
 * al mismo alto (el empaque del servidor y del JS evita que una quede sola).
 */
.ind-grilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.ind-tarjeta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.ind-ancho--completo {
    grid-column: 1 / -1;
}

/* El pie (total y nota) se apoya en el borde inferior: tarjetas pareadas terminan alineadas. */
.ind-tarjeta {
    display: flex;
    flex-direction: column;
}

.ind-pie {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.ind-tarjeta-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
}

.ind-tarjeta h3 {
    margin: 0;
    color: var(--ind-tinta);
    font-size: 1.05rem;
    line-height: 1.3;
}

.ind-descripcion,
.ind-nota,
.ind-vacio {
    margin: 4px 0 0;
    color: var(--ind-tenue);
    font-size: 0.88rem;
    line-height: 1.45;
}

.ind-nota {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--ind-linea);
}

.ind-vista-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ind-vista-form label {
    color: var(--ind-tenue);
    font-size: 0.82rem;
    font-weight: 700;
}

.ind-vista-form select {
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}

.ind-etiqueta-sin-datos {
    display: inline-block;
    padding: 3px 10px;
    border: 1px dashed var(--border);
    border-radius: 999px;
    color: var(--ind-tenue);
    font-weight: 800;
}

/* Cifras: etiqueta, número y detalle alineados en cada fila */
.ind-cifras {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ind-cifras li {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 6px;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--ind-tile);
}

.ind-cifra-etiqueta {
    color: var(--ind-tenue);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
}

.ind-cifra-valor {
    align-self: end;
    color: var(--ind-tinta);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 800;
    line-height: 1;
}

a.ind-cifra-valor,
.ind-barra-valor a,
.ind-col-valor a,
.ind-total a,
.ind-tabla a {
    color: var(--ind-tinta);
    text-decoration: underline;
    text-decoration-color: var(--ind-serie);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

a.ind-cifra-valor:hover,
.ind-barra-valor a:hover,
.ind-col-valor a:hover,
.ind-total a:hover,
.ind-tabla a:hover {
    text-decoration-color: var(--orange);
}

.ind-cifra-detalle {
    color: var(--ind-tenue);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Barras horizontales: una sola serie, un solo color */
.ind-barras,
.ind-leyenda {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* En el ancho completo, las barras bajan por la primera columna y siguen en la segunda. */
.ind-ancho--completo .ind-barras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--mitad, 1), auto);
    grid-auto-flow: column;
    column-gap: 40px;
}

/* Botones secundarios discretos para no competir con los datos. */
.ind-boton {
    display: inline-flex;
    min-height: 40px;
    padding: 0 14px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ind-tinta);
    font-weight: 800;
    text-decoration: none;
}

.ind-boton:hover {
    border-color: var(--ind-serie);
}

.ind-barra-texto,
.ind-leyenda li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--ind-tinta);
    font-size: 0.9rem;
    font-weight: 700;
}

.ind-barra-etiqueta,
.ind-leyenda-etiqueta {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ind-leyenda-etiqueta {
    flex: 1;
}

.ind-barra-valor {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.ind-barra-valor strong,
.ind-barra-valor a {
    font-weight: 800;
}

.ind-barra-valor small {
    min-width: 3.2em;
    color: var(--ind-tenue);
    font-weight: 600;
    text-align: right;
}

.ind-barra-pista {
    display: block;
    height: 8px;
    margin-top: 5px;
    border-radius: 0 4px 4px 0;
    background: var(--ind-pista);
}

.ind-barra-pista span {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: var(--ind-serie);
}

/* Columnas: para meses y otras series ordenadas */
.ind-columnas {
    display: grid;
    grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ind-columnas li {
    /* Contiene los textos sr-only: si no, escapan del desplazamiento y ensanchan la página. */
    position: relative;
    display: grid;
    grid-template-rows: 180px auto;
    gap: 6px;
    min-width: 0;
    text-align: center;
}

.ind-col-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    border-bottom: 1px solid var(--ind-linea);
}

.ind-col-valor {
    color: var(--ind-tinta);
    font-size: 0.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ind-col-marca {
    display: block;
    width: min(24px, 70%);
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: var(--ind-serie);
}

.ind-col-etiqueta {
    overflow: hidden;
    color: var(--ind-tenue);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Barra segmentada: un todo dividido en partes, con leyenda que lleva los datos */
.ind-segmentos {
    display: flex;
    gap: 2px;
    height: 28px;
}

.ind-segmentos + .ind-leyenda {
    margin-top: 12px;
}

.ind-segmento {
    display: flex;
    flex-basis: 0;
    min-width: 3px;
    align-items: center;
    overflow: hidden;
    padding: 0;
    text-indent: 8px;
    border-radius: 4px;
    color: var(--ind-sobre-1);
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.ind-serie-1 { background: var(--ind-1); }
.ind-serie-2 { background: var(--ind-2); }
.ind-serie-3 { background: var(--ind-3); }
.ind-serie-4 { background: var(--ind-4); color: var(--ind-sobre-4); }
.ind-serie-5 { background: var(--ind-5); }
.ind-serie-6 { background: var(--ind-6); }

.ind-leyenda {
    gap: 8px;
}

.ind-muestra {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Tablas */
.ind-tabla {
    width: 100%;
    border-collapse: collapse;
    color: var(--text);
    font-size: 0.9rem;
}

.ind-tabla th,
.ind-tabla td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ind-linea);
    text-align: left;
}

.ind-tabla thead th {
    color: var(--ind-tenue);
    font-size: 0.8rem;
    font-weight: 800;
}

.ind-tabla tbody th {
    color: var(--ind-tinta);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}

.ind-tabla th,
.ind-tabla td {
    vertical-align: middle;
}

.ind-agregar select {
    max-width: 520px;
}

.ind-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.ind-total {
    margin: 0;
    color: var(--ind-tenue);
    font-size: 0.88rem;
    font-weight: 700;
}

.ind-total strong,
.ind-total a {
    color: var(--ind-tinta);
}

/* Personalizar y ciclos */
.ind-personalizar,
.ind-ciclos {
    display: grid;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.ind-ciclos {
    max-width: 680px;
}

.ind-ciclos fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--ind-linea);
    border-radius: 8px;
}

.ind-ciclos legend {
    padding: 0 6px;
    color: var(--ind-tinta);
    font-weight: 800;
}

.ind-tabla-personalizar input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

/* Panel de inicio */
.panel-mio {
    display: grid;
    gap: 14px;
}

.panel-mio h2 {
    margin: 0;
    color: var(--ind-tinta);
    font-size: 1.25rem;
}

.panel-mio h3 {
    margin: 4px 0 0;
    color: var(--ind-tinta);
    font-size: 1rem;
}

.panel-mio .ind-cifras li {
    border: 1px solid var(--border);
    background: var(--surface);
}

.panel-registros {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.panel-registros a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ind-tinta);
    font-weight: 700;
    text-decoration: none;
}

.panel-registros a:hover {
    border-color: var(--ind-serie);
}

.panel-registros small {
    color: var(--ind-tenue);
    font-weight: 600;
}

.ind-tarjeta > * {
    min-width: 0;
}

.ind-informe {
    max-width: 860px;
}

.ind-informe fieldset {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--ind-linea);
    border-radius: 8px;
}

.ind-informe legend {
    padding: 0 6px;
    color: var(--ind-tinta);
    font-weight: 800;
}

.ind-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.ind-opciones label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-weight: 600;
}

.ind-opciones input {
    width: 18px;
    height: 18px;
}

.ind-informe input[type="text"] {
    max-width: 520px;
}

.ind-calculado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: -6px 0 0;
    color: var(--ind-tenue);
    font-size: 0.84rem;
}

.ind-enlace {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ind-tinta);
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--ind-serie);
    text-underline-offset: 3px;
    cursor: pointer;
}

.ind-copiar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

@media (max-width: 1200px) {
    .ind-cifras {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
}

@media (max-width: 980px) {
    .ind-grilla {
        grid-template-columns: minmax(0, 1fr);
    }

    .ind-columnas {
        overflow-x: auto;
        grid-template-columns: repeat(var(--columnas), minmax(44px, 1fr));
    }
}

@media (forced-colors: active) {
    .ind-barra-pista span,
    .ind-col-marca,
    .ind-segmento,
    .ind-muestra {
        forced-color-adjust: none;
        border: 1px solid CanvasText;
    }
}