/* Elecciones › Padrón › Histórico (tarea M62): la página /padron/historico/ con el análisis histórico de los padrones. Usa los
   tokens de shell.css (claro y oscuro) y define los propios de los gráficos (--ph-*), con una paleta categórica de ocho tonos
   validada para daltonismo, uno para cada tema. Nada en línea: los colores de los datos se ponen desde el JavaScript con el
   CSSOM. */

.ph {
    --ph-fg: var(--text);
    --ph-fg-muted: var(--text-soft);
    --ph-muted-text: var(--text-muted);
    --ph-panel: var(--surface-solid);
    --ph-bg: var(--input-bg);
    --ph-border: var(--border-strong);
    --ph-line: var(--border);
    --ph-chart-muted: #cbd5e1;
    --ph-chart-grid: #e2e8f0;
    --ph-chart-axis: #94a3b8;
    --ph-chart-reference: #64748b;
    --ph-bad: #b42318;
    --ph-warn: #8a5a00;
    --ph-serie-1: #2a78d6;
    --ph-serie-2: #eb6834;
    --ph-serie-3: #1baf7a;
    --ph-serie-4: #eda100;
    --ph-serie-5: #e87ba4;
    --ph-serie-6: #008300;
    --ph-serie-7: #6250d6;
    --ph-serie-8: #e34948;
    --ph-esqueleto-a: #e2e8f0;
    --ph-esqueleto-b: #f1f5f9;
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.25rem;
    width: min(100%, 76rem);
    min-width: 0;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
    color: var(--ph-fg);
    font-size: .875rem;
    line-height: 1.5;
}

html[data-theme="dark"] .ph {
    --ph-chart-muted: #475569;
    --ph-chart-grid: rgba(148, 163, 184, .18);
    --ph-chart-axis: #64748b;
    --ph-chart-reference: #94a3b8;
    --ph-bad: #f07070;
    --ph-warn: #fab219;
    --ph-serie-1: #3987e5;
    --ph-serie-2: #d95926;
    --ph-serie-3: #199e70;
    --ph-serie-4: #c98500;
    --ph-serie-5: #d55181;
    --ph-serie-6: #2e9b2e;
    --ph-serie-7: #9085e9;
    --ph-serie-8: #e66767;
    --ph-esqueleto-a: #1e293b;
    --ph-esqueleto-b: #273449;
}

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

.ph-raiz {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.ph [hidden] {
    display: none !important;
}

/* --- Cabecera, filtro y pestañas ------------------------------------------------------------------------------------- */
.ph-cabecera {
    display: grid;
    gap: .5rem;
    min-width: 0;
}

.ph-eyebrow {
    margin: 0;
    color: var(--orange-700);
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html[data-theme="dark"] .ph-eyebrow {
    color: var(--orange-400);
}

.ph-cabecera h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.625rem, 3.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.ph-lead {
    max-width: 52rem;
    margin: 0;
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.6;
}

.ph .ph-num {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ph-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    min-width: 0;
    padding: .875rem 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
}

.ph-campo {
    display: grid;
    gap: .25rem;
    min-width: 0;
    max-width: 100%;
    color: var(--text-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.ph select,
.ph input[type="search"] {
    min-width: 0;
    max-width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: .75rem;
    background: var(--input-bg);
    color: var(--input-text);
    font: inherit;
    font-size: .875rem;
}

.ph-filtros select {
    width: min(100%, 18rem);
}

.ph select:focus-visible,
.ph input:focus-visible,
.ph button:focus-visible,
.ph summary:focus-visible,
.ph [role="tabpanel"]:focus-visible {
    outline: 3px solid var(--orange-500);
    outline-offset: 2px;
}

.ph-boton {
    cursor: pointer;
    padding: .5rem .875rem;
    border: 1px solid var(--border-strong);
    border-radius: .75rem;
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: .8125rem;
    font-weight: 700;
}

.ph-boton:hover {
    color: var(--orange-600);
}

.ph-filtro-nota {
    flex: 1 1 12rem;
    margin: 0;
    color: var(--text-soft);
    font-size: .8125rem;
}

.ph .ph-filtro-nota b {
    color: var(--text);
}

/* Las pestañas: la clase pestanas de resultados.css (desplazables a lo ancho, con el desvanecido de desplazables.js). */
.ph .ph-tabs {
    margin: 0;
    min-width: 0;
    max-width: 100%;
}

.ph .ph-tabs button {
    font-size: .875rem;
}

.ph-pagina {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

/* --- Tarjetas, notas y avisos -------------------------------------------------------------------------------------- */
.ph-grid2 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    min-width: 0;
}

.ph-card {
    display: grid;
    gap: .625rem;
    align-content: start;
    min-width: 0;
    margin: 0;
    padding: 1.125rem;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    background: var(--surface);
}

.ph-cap {
    display: grid;
    gap: .375rem;
    min-width: 0;
}

.ph-card h2,
.ph-card h3,
.ph-sec {
    margin: 0;
    color: var(--text);
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ph-sec {
    margin-top: .5rem;
    font-size: 1.25rem;
}

.ph-sub {
    margin: .25rem 0 0;
    color: var(--text);
    font-size: .9375rem;
    font-weight: 700;
}

.ph-note {
    max-width: 80ch;
    margin: 0;
    color: var(--text-soft);
    font-size: .8125rem;
    line-height: 1.55;
}

.ph .ph-note b,
.ph .ph-aviso b,
.ph .ph-obs b,
.ph .ph-est-cajas b {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ph-aviso {
    max-width: 80ch;
    margin: 0;
    padding: .625rem .875rem;
    border: 1px solid var(--border-strong);
    border-left: 4px solid var(--orange-500);
    border-radius: .75rem;
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: .8125rem;
    line-height: 1.55;
}

.ph-aviso--fuerte {
    color: var(--text);
}

.ph-explicacion {
    display: grid;
    gap: .375rem;
    max-width: 80ch;
    margin: 0;
    padding: .75rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 1rem;
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: .875rem;
    line-height: 1.6;
}

.ph-explicacion strong {
    color: var(--text);
}

.ph-obs {
    display: grid;
    gap: .25rem;
    align-content: start;
    max-width: 80ch;
    margin: 0;
    padding-left: 1.2em;
    color: var(--text-soft);
    font-size: .8125rem;
    line-height: 1.5;
}

.ph-est-cajas {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    color: var(--text-soft);
    font-size: .8125rem;
}

.ph-bloque {
    display: grid;
    gap: .5rem;
    align-content: start;
    min-width: 0;
}

.ph-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem 1rem;
    min-width: 0;
}

.ph-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    max-width: 100%;
    padding: .25rem;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background: var(--surface);
}

.ph-seg button {
    cursor: pointer;
    padding: .375rem .875rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: .8125rem;
    font-weight: 700;
}

.ph-seg button[aria-pressed="true"] {
    background: var(--orange-500);
    color: #ffffff;
}

/* --- Indicadores --------------------------------------------------------------------------------------------------- */
.ph-kpis {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    min-width: 0;
}

.ph-kpi {
    display: grid;
    gap: .25rem;
    align-content: start;
    min-width: 0;
    padding: .875rem 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface-soft);
}

.ph-kpi-l {
    color: var(--text-soft);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
}

.ph-kpi-v {
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.ph-kpi-s {
    color: var(--text-muted);
    font-size: .8125rem;
    line-height: 1.4;
}

/* --- Gráficos ------------------------------------------------------------------------------------------------------ */
.ph-chart {
    position: relative;
    min-width: 0;
    max-width: 100%;
}

.ph-alto-120 { min-height: 120px; }
.ph-alto-156 { min-height: 156px; }
.ph-alto-240 { min-height: 240px; }
.ph-alto-260 { min-height: 260px; }
.ph-alto-280 { min-height: 280px; }
.ph-alto-300 { min-height: 300px; }
.ph-alto-320 { min-height: 320px; }
.ph-alto-330 { min-height: 330px; }
.ph-alto-350 { min-height: 350px; }
.ph-alto-360 { min-height: 360px; }
.ph-alto-380 { min-height: 380px; }
.ph-alto-420 { min-height: 420px; }

.ph-svg {
    display: block;
    overflow: visible;
}

.ph-desliza {
    max-width: 100%;
    overflow-x: auto;
}

.ph-scroll {
    max-height: 40rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.ph-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .875rem;
    color: var(--text-soft);
    font-size: .8125rem;
}

.ph-leg-i {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.ph-sw {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.ph-sw-linea,
.ph-sw-marca {
    width: 14px;
    height: 2px;
    border-radius: 1px;
}

.ph-sw-contorno {
    background: none;
    border: 1.25px solid var(--ph-fg);
    border-radius: 1px;
}

.ph-sw-rayado {
    background: repeating-linear-gradient(135deg, var(--ph-fg-muted) 0 1px, transparent 1px 4px);
    box-shadow: inset 0 0 0 1px var(--ph-line);
}

.ph-sw-muted { background: var(--ph-chart-muted); }
.ph-sw-diag { background: var(--ph-border); }
.ph-sw-vacio {
    background: none;
    box-shadow: inset 0 0 0 1px var(--ph-border);
}

.ph-grad {
    display: inline-block;
    flex: none;
    width: 72px;
    height: 10px;
    border-radius: 2px;
}

.ph-axis text,
text.ph-axis {
    fill: var(--ph-fg-muted);
    font-family: inherit;
    font-size: 12px;
}

.ph-axis .ph-axis-sub,
text.ph-axis-sub {
    opacity: .75;
}

.ph-grid line {
    stroke: var(--ph-chart-grid);
    stroke-width: 1;
}

.ph-cero {
    stroke: var(--ph-chart-axis);
    stroke-width: 1;
}

.ph-ref {
    stroke: var(--ph-chart-reference);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.ph-regla {
    stroke: var(--ph-chart-axis);
    stroke-width: 1;
    pointer-events: none;
}

.ph-marca {
    stroke: var(--ph-fg);
    stroke-width: 2;
    pointer-events: none;
}

.ph-val {
    fill: var(--ph-fg-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.ph-fin {
    fill: var(--ph-fg);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.ph-linea {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.ph-punto {
    stroke: var(--ph-panel);
    stroke-width: 1.5;
    pointer-events: none;
}

.ph-contorno {
    fill: none;
    stroke: var(--ph-fg);
    stroke-width: 1.25;
    pointer-events: none;
}

.ph-puente {
    fill: var(--ph-chart-muted);
    opacity: .18;
}

.ph-hit {
    fill: transparent;
    cursor: crosshair;
}

.ph-hit:hover {
    fill: var(--ph-chart-grid);
    fill-opacity: .35;
}

.ph-clic {
    cursor: pointer;
}

.ph-od-marco {
    fill: none;
    stroke: var(--ph-line);
    stroke-width: .5;
}

.ph-od-diag {
    fill: var(--ph-border);
    opacity: .7;
}

.ph-od-celda:hover,
.ph-mat-celda:hover {
    stroke: var(--ph-fg);
    stroke-width: 1.5;
}

.ph-od-sel {
    fill: none;
    stroke: var(--ph-fg);
    stroke-width: 1.5;
    pointer-events: none;
}

.ph-mat-v {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.ph-porcion {
    stroke: var(--ph-panel);
    stroke-width: 2;
    cursor: crosshair;
}

.ph-porcion:hover {
    opacity: .85;
}

.ph-pastel-v {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.ph-pastel-t {
    fill: var(--ph-fg);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ph-sk-nodo {
    stroke: var(--ph-panel);
    stroke-width: 1;
}

.ph-sk-enlace {
    fill: none;
    stroke-opacity: .38;
}

.ph-sk-enlace:hover {
    stroke-opacity: .6;
}

.ph-sk-t,
.ph-sk-v {
    font-size: 12px;
    paint-order: stroke;
    stroke: var(--ph-panel);
    stroke-width: 3px;
    stroke-linejoin: round;
    pointer-events: none;
}

.ph-sk-t {
    fill: var(--ph-fg);
}

.ph-sk-v {
    fill: var(--ph-fg-muted);
    font-variant-numeric: tabular-nums;
}

.ph-sk-col {
    fill: var(--ph-fg-muted);
    font-size: 12px;
    font-weight: 700;
}

/* El globo de los gráficos: opaco, encima del gráfico. */
.ph-tip {
    position: absolute;
    z-index: 3;
    display: grid;
    gap: 2px;
    min-width: 11rem;
    max-width: min(20rem, 90vw);
    padding: .375rem .625rem;
    border: 1px solid var(--border-strong);
    border-radius: .75rem;
    background: var(--surface-solid);
    box-shadow: var(--card-shadow);
    color: var(--text);
    font-size: .8125rem;
    line-height: 1.4;
    pointer-events: none;
}

.ph-tip-t {
    margin-bottom: 2px;
    color: var(--text-soft);
}

.ph-tip-r {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.ph-tip-n {
    flex: 1;
}

.ph-tip-v {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: right;
}

.ph-fallo,
.ph-vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: inherit;
    margin: 0;
    color: var(--text-soft);
    font-size: .8125rem;
    text-align: center;
}

.ph-fallo-punto {
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: var(--ph-bad);
}

/* Los gráficos chicos de «Estadísticas por padrón»: botones que eligen el territorio. */
.ph-multiples {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    min-width: 0;
}

.ph-mini {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: .375rem .5rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--surface-soft);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ph-mini:hover {
    border-color: var(--text-muted);
}

.ph-mini-t {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
    font-size: .8125rem;
}

.ph-mini-t span:first-child {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-mini-t span:last-child {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ph-mini-chart {
    display: block;
    min-height: 120px;
}

/* --- Tablas --------------------------------------------------------------------------------------------------------- */
.ph-tabla-ctl {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ph input[type="search"] {
    width: min(100%, 20rem);
}

.ph-tabla-caja {
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 1rem;
}

.ph-alta {
    max-height: 34rem;
}

.ph-est-caja {
    max-height: 44rem;
}

.ph-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.ph-table caption {
    padding: .5rem .625rem;
    color: var(--text-soft);
    font-size: .8125rem;
    font-weight: 700;
    text-align: left;
}

.ph-table th,
.ph-table td {
    padding: .375rem .625rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.ph-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-solid);
    color: var(--text-soft);
    font-weight: 700;
    white-space: nowrap;
}

.ph-table tbody th {
    color: var(--text);
    font-weight: 600;
}

.ph-table .num {
    text-align: right;
    white-space: nowrap;
}

.ph-table td.ph-ancha {
    min-width: 16rem;
    white-space: normal;
}

.ph-table .ph-cod {
    white-space: nowrap;
}

.ph-table .ph-sup {
    background-image: repeating-linear-gradient(135deg, var(--border-strong) 0 1px, transparent 1px 5px);
    color: var(--text-muted);
    text-align: center;
}

.ph-table .ph-nd {
    color: var(--text-muted);
    text-align: center;
}

.ph-table .ph-centro {
    text-align: center;
}

.ph-table tbody tr:hover > * {
    background-color: var(--ph-chart-grid);
}

.ph-table th button {
    all: unset;
    cursor: pointer;
}

.ph-table th[aria-sort] button::after {
    content: " ↕";
    opacity: .4;
}

.ph-table th[aria-sort="ascending"] button::after {
    content: " ↑";
    opacity: 1;
}

.ph-table th[aria-sort="descending"] button::after {
    content: " ↓";
    opacity: 1;
}

.ph-table tbody tr.ph-sel > * {
    background-color: color-mix(in srgb, var(--orange-500) 14%, var(--surface-solid));
    font-weight: 700;
}

.ph-est {
    width: auto;
    min-width: 100%;
}

.ph-est th,
.ph-est td {
    padding: .25rem .5rem;
}

.ph-est thead th {
    text-align: center;
}

.ph-est thead th.ph-izq {
    text-align: left;
}

.ph-est .ph-sep {
    border-left: 1px solid var(--border);
}

.ph-est .ph-fija {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface-solid);
}

.ph-est .ph-fija2 {
    left: var(--ph-fija2, 2.75rem);
    white-space: nowrap;
}

.ph-est thead th.ph-fija {
    z-index: 3;
}

.ph-est tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 1;
    border-top: 1px solid var(--text-soft);
    border-bottom: 0;
    background: var(--surface-solid);
    color: var(--text);
    font-weight: 700;
}

.ph-est tfoot td.ph-fija {
    z-index: 2;
}

.ph-datos summary {
    width: fit-content;
    color: var(--orange-700);
    font-size: .8125rem;
    font-weight: 700;
    cursor: pointer;
}

html[data-theme="dark"] .ph-datos summary {
    color: var(--orange-400);
}

.ph-datos[open] {
    display: grid;
    gap: .5rem;
}

.ph-datos .ph-tabla-caja {
    max-height: 26rem;
}

.ph-chip {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid currentColor;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.ph-chip-ALTA { color: var(--ph-bad); }
.ph-chip-MEDIA { color: var(--ph-warn); }
.ph-chip-BAJA,
.ph-chip-INFORMATIVA { color: var(--text-muted); }

.ph-llamada {
    color: var(--text-muted);
    font-size: .75rem;
}

.ph-notas-reglas {
    display: grid;
    gap: .375rem;
    max-width: 80ch;
    margin: 0;
    padding-left: 1.4em;
    color: var(--text-soft);
    font-size: .8125rem;
    line-height: 1.55;
}

.ph-notas-reglas b {
    color: var(--text);
}

/* --- Definiciones, balance y hallazgos ----------------------------------------------------------------------------- */
.ph-defs {
    display: grid;
    gap: .5rem 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    margin: 0;
}

.ph-defs dt {
    display: flex;
    align-items: center;
    gap: .375rem;
    color: var(--text);
    font-weight: 700;
}

.ph-defs dd {
    margin: 2px 0 0;
    color: var(--text-soft);
    font-size: .8125rem;
    line-height: 1.45;
}

.ph-balance {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    align-items: center;
}

.ph-bal {
    display: grid;
    gap: 2px;
    min-width: 0;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.ph-bal div {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .25rem 0;
    border-bottom: 1px dashed var(--border-strong);
}

.ph-bal dt {
    min-width: 0;
    color: var(--text-soft);
}

.ph-bal dd {
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

.ph-bal .ph-bal-total {
    border-top: 1px solid var(--text-soft);
    border-bottom: 0;
}

.ph-bal .ph-bal-total dt {
    color: var(--text);
    font-weight: 700;
}

.ph-bal-ancho {
    max-width: 36rem;
}

.ph-hallazgos {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding-left: 1.6em;
}

.ph-hallazgo {
    padding: .875rem 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface-soft);
}

.ph-hallazgo-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
}

.ph-hallazgo-cab h3 {
    flex: 1 1 18rem;
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.ph-hallazgo-periodo {
    color: var(--text-muted);
    font-size: .8125rem;
}

.ph-hallazgo-dl {
    display: grid;
    gap: .375rem;
    margin: .5rem 0 0;
}

.ph-hallazgo-dl dt {
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ph-hallazgo-dl dd {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.55;
}

/* --- Método -------------------------------------------------------------------------------------------------------- */
.ph-texto {
    display: grid;
    gap: .625rem;
    max-width: 80ch;
}

.ph-texto h2 {
    margin: .75rem 0 0;
    font-size: 1.125rem;
}

.ph-texto h2:first-child {
    margin-top: 0;
}

.ph-texto p,
.ph-texto li {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.6;
}

.ph-texto ul,
.ph-texto ol {
    display: grid;
    gap: .375rem;
    margin: 0;
    padding-left: 1.2em;
}

.ph-texto b,
.ph-texto strong {
    color: var(--text);
}

.ph-licencia {
    color: var(--text-muted);
}

/* --- Carga ---------------------------------------------------------------------------------------------------------- */
.ph-cargando {
    position: relative;
    color: transparent !important;
}

.ph-cargando > * {
    visibility: hidden;
}

.ph-cargando::after {
    content: "";
    position: absolute;
    inset: 18% 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ph-esqueleto-a) 25%, var(--ph-esqueleto-b) 50%, var(--ph-esqueleto-a) 75%);
    background-size: 200% 100%;
    animation: ph-esqueleto 1.4s ease-in-out infinite;
}

div.ph-cargando::after {
    inset: 0;
    border-radius: 1rem;
}

b.ph-cargando,
span.ph-cargando {
    display: inline-block;
    min-width: 4em;
    vertical-align: baseline;
}

td.ph-cargando {
    height: 2.2em;
}

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

@media (prefers-reduced-motion: reduce) {
    .ph-cargando::after {
        animation: none;
    }
}

@media (max-width: 640px) {
    .ph {
        padding: 1.25rem .75rem 2rem;
    }

    .ph-card {
        padding: .875rem;
    }

    .ph-kpi-v {
        font-size: 1.25rem;
    }

    .ph-filtros select {
        width: 100%;
    }

    .ph-campo {
        flex: 1 1 100%;
    }
}