/* Estadísticas interactivas por provincia (estadisticas-provincia.php) */

.ep {
    --ep-superficie: #ffffff;
    --ep-fondo: #f4f6f9;
    --ep-borde: #dde3ea;
    --ep-texto: #1f2933;
    --ep-texto-2: #52606d;
    --ep-texto-3: #7b8794;
    --ep-acento: #446e9b;          /* azul del tema de la web */
    --ep-s1: #2a78d6;              /* serie 1: la provincia */
    --ep-s2: #eb6834;              /* serie 2: la autoescuela que se compara */
    --ep-barra: #2a78d6;
    --ep-barra-pista: #e8eef5;
    --ep-media: #1f2933;
    --ep-conv-0: #1d4f8c;          /* convocatorias: de oscuro (1ª) a claro (5ª+) */
    --ep-conv-1: #2a78d6;
    --ep-conv-2: #7eb0ea;
    --ep-conv-3: #c6dbf4;
    --ep-radio: 6px;

    color: var(--ep-texto);
    font-size: 15px;
    text-align: left;
}

.ep h1, .ep h2 { color: var(--ep-texto); }
.ep .ep-sub { color: var(--ep-texto-2); margin: 4px 0 0; }

/* ------------------------------------------------------------- cabecera */
.ep-cabecera { margin: 10px 0 18px; }
.ep-cabecera h1 { font-size: 30px; margin: 0; font-weight: 700; }
.ep-periodo { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.ep-periodo label, .ep-filtros label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    color: var(--ep-texto-2); margin: 0;
}
.ep-periodo select { min-width: 160px; }

/* Selector de provincias */
.ep-provincias {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 20px 0;
}
.ep-provincias a {
    display: block; padding: 10px 12px; background: var(--ep-superficie);
    border: 1px solid var(--ep-borde); border-radius: var(--ep-radio);
    color: var(--ep-acento); font-weight: 600;
}
.ep-provincias a:hover, .ep-provincias a:focus { border-color: var(--ep-acento); text-decoration: none; background: var(--ep-fondo); }

/* --------------------------------------------------------------- filtros */
.ep-filtros {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    padding: 14px; margin-bottom: 18px;
    background: var(--ep-fondo); border: 1px solid var(--ep-borde); border-radius: var(--ep-radio);
    position: sticky; top: 0; z-index: 5;
}
.ep-filtros label { flex: 1 1 140px; }
.ep-filtros .ep-filtro-ancho { flex: 2 1 200px; }
.ep-filtros input[type=number] { max-width: 120px; }
.ep-filtros select, .ep-filtros input { text-transform: none; font-weight: normal; letter-spacing: 0; }

/* ------------------------------------------------------------------ KPIs */
.ep-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.ep-kpi {
    background: var(--ep-superficie); border: 1px solid var(--ep-borde); border-radius: var(--ep-radio);
    padding: 14px 16px; display: flex; flex-direction: column;
}
.ep-kpi-valor { font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ep-kpi-texto { color: var(--ep-texto-2); font-size: 13px; }

/* -------------------------------------------------------------- gráficas */
.ep-graficas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.ep-grafica {
    margin: 0; padding: 14px 16px; background: var(--ep-superficie);
    border: 1px solid var(--ep-borde); border-radius: var(--ep-radio); min-width: 0;
}
.ep-grafica figcaption { font-weight: 700; margin-bottom: 10px; color: var(--ep-texto); }
.ep-grafica figcaption small { font-weight: normal; color: var(--ep-texto-3); }
.ep-sin-datos { color: var(--ep-texto-3); margin: 20px 0; }

.ep-lienzo { position: relative; }
.ep-lienzo svg { display: block; width: 100%; height: auto; overflow: visible; }
.ep-rejilla { stroke: var(--ep-borde); stroke-width: 1; }
.ep-eje { fill: var(--ep-texto-3); font-size: 11px; }
.ep-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ep-linea.ep-s1 { stroke: var(--ep-s1); }
.ep-linea.ep-s2 { stroke: var(--ep-s2); }
.ep-punto { stroke: var(--ep-superficie); stroke-width: 2; }
.ep-punto.ep-s1 { fill: var(--ep-s1); }
.ep-punto.ep-s2 { fill: var(--ep-s2); }
.ep-guia { stroke: var(--ep-texto-3); stroke-width: 1; stroke-dasharray: 3 3; }
.ep-mes-elegido { fill: var(--ep-fondo); }
.ep-tooltip {
    position: absolute; top: 34px; pointer-events: none; z-index: 2;
    background: var(--ep-texto); color: #fff; border-radius: 4px; padding: 6px 9px; font-size: 12px;
    display: flex; flex-direction: column; gap: 2px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.ep-tooltip[hidden] { display: none; }
.ep-tooltip i, .ep-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
i.ep-s1 { background: var(--ep-s1); }
i.ep-s2 { background: var(--ep-s2); }
.ep-leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 6px; font-size: 13px; color: var(--ep-texto-2); }

/* Barras horizontales (centros y top 10) */
.ep-lista-barras { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ep-lista-barras li { display: grid; grid-template-columns: minmax(90px, 38%) 1fr 48px; align-items: center; gap: 8px; font-size: 13px; }
.ep-barra-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ep-texto-2); }
.ep-barra-pista { position: relative; height: 14px; background: var(--ep-barra-pista); border-radius: 0 4px 4px 0; }
.ep-barra { display: block; height: 100%; background: var(--ep-barra); border-radius: 0 4px 4px 0; }
.ep-destacado .ep-barra { background: var(--ep-s2); }
.ep-destacado .ep-barra-nombre { color: var(--ep-texto); font-weight: 700; }
.ep-media { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ep-media); }
.ep-barra-valor { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ep-nota-grafica { font-size: 12px; color: var(--ep-texto-3); margin: 8px 0 0; }
.ep-media-muestra { display: inline-block; width: 2px; height: 12px; background: var(--ep-media); vertical-align: -2px; margin-right: 4px; }

/* Convocatorias: barra al 100 % */
.ep-conv { margin-bottom: 12px; }
.ep-conv-nombre { margin: 0 0 4px; font-size: 13px; color: var(--ep-texto-2); }
.ep-conv-barra { display: flex; height: 26px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--ep-superficie); }
.ep-conv-barra span { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; min-width: 0; overflow: hidden; }
.ep-conv-0 { background: var(--ep-conv-0); color: #fff; }
.ep-conv-1 { background: var(--ep-conv-1); color: #fff; }
.ep-conv-2 { background: var(--ep-conv-2); color: var(--ep-texto); }
.ep-conv-3 { background: var(--ep-conv-3); color: var(--ep-texto); }
.ep-leyenda .ep-conv-0, .ep-leyenda .ep-conv-1, .ep-leyenda .ep-conv-2, .ep-leyenda .ep-conv-3 { border-radius: 2px; }

/* ----------------------------------------------------------------- tabla */
.ep-tabla-bloque { background: var(--ep-superficie); border: 1px solid var(--ep-borde); border-radius: var(--ep-radio); padding: 14px 16px; }
.ep-tabla-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ep-tabla-cabecera h2 { font-size: 22px; margin: 0; }
.ep-tabla { margin-bottom: 8px; font-size: 14px; }
.ep-tabla thead th { border-bottom: 2px solid var(--ep-borde); white-space: nowrap; vertical-align: bottom; }
.ep-tabla th button {
    background: none; border: 0; padding: 0; font-weight: 700; color: var(--ep-texto);
    display: inline-flex; align-items: center; gap: 4px;
}
.ep-tabla th button::after { content: '↕'; color: var(--ep-texto-3); font-size: 11px; }
.ep-tabla th[aria-sort=ascending] button::after { content: '▲'; color: var(--ep-acento); }
.ep-tabla th[aria-sort=descending] button::after { content: '▼'; color: var(--ep-acento); }
.ep-tabla th button:focus-visible, .ep-comparar:focus-visible { outline: 2px solid var(--ep-acento); outline-offset: 2px; }
.ep-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ep-tabla th.ep-num button { flex-direction: row-reverse; }
.ep-codigo { color: var(--ep-texto-3); font-size: 12px; }
.ep-pct { min-width: 150px; }
.ep-minibarra {
    display: inline-block; position: relative; width: 60px; height: 8px; margin-right: 8px;
    background: var(--ep-barra-pista); border-radius: 0 3px 3px 0; vertical-align: 0;
}
.ep-minibarra span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ep-barra); border-radius: 0 3px 3px 0; }
.ep-minibarra i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ep-media); }
.ep-dif { display: block; color: var(--ep-texto-3); font-size: 11px; }
.ep-comparar {
    border: 1px solid var(--ep-borde); background: var(--ep-superficie); color: var(--ep-texto-2);
    border-radius: 10px; font-size: 11px; padding: 0 7px; margin-left: 4px; line-height: 18px;
}
.ep-comparar:hover { border-color: var(--ep-s2); color: var(--ep-texto); }
.ep-comparar[aria-pressed=true] { background: var(--ep-s2); border-color: var(--ep-s2); color: #fff; }
.ep-fila-comparada td { background: #fdf1eb; }
.ep-corto { display: none; }
.ep-tabla-vacia { text-align: center; color: var(--ep-texto-3); padding: 24px !important; }
.ep-paginas { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ep-nota { color: var(--ep-texto-3); font-size: 12px; margin: 12px 0 0; }
.ep-vacio { padding: 30px; text-align: center; background: var(--ep-fondo); border-radius: var(--ep-radio); }

/* -------------------------------------------------------------- móvil */
@media (max-width: 900px) {
    .ep-graficas { grid-template-columns: minmax(0, 1fr); }
    .ep-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ep-cabecera h1 { font-size: 24px; }
    .ep-filtros { position: static; }
    .ep-filtros label { flex: 1 1 calc(50% - 12px); }
    .ep-kpi-valor { font-size: 22px; }
    .ep-grafica, .ep-tabla-bloque { padding: 12px; }
}

/* La web pone a los <p> de .jumbotron un tamaño de 21px: aquí se devuelve el tamaño propio. */
.ep p { font-size: 15px; font-weight: normal; line-height: 1.45; }
.ep p.ep-sub { font-size: 16px; }
.ep p.ep-leyenda, .ep p.ep-conv-nombre { font-size: 13px; }
.ep p.ep-nota-grafica, .ep p.ep-nota { font-size: 12px; }
.ep p.ep-sin-datos { font-size: 14px; }

@media (max-width: 600px) {
    /* En el móvil se quitan columnas secundarias para que la tabla quepa sin desplazarse. */
    .ep-tabla th:nth-child(2), .ep-tabla td:nth-child(2),
    .ep-tabla th:nth-child(4), .ep-tabla td:nth-child(4),
    .ep-tabla th:nth-child(5), .ep-tabla td:nth-child(5) { display: none; }
    .ep-tabla { font-size: 13px; }
    .ep-tabla { table-layout: fixed; width: 100%; }
    .ep-tabla th:nth-child(3) { width: 52px; }
    .ep-tabla th:nth-child(6) { width: 66px; }
    .ep-tabla th:nth-child(7) { width: 50px; }
    .ep-tabla thead th { white-space: normal; }
    .ep-tabla th button::after { display: none; }
    .ep-tabla > thead > tr > th, .ep-tabla > tbody > tr > td { padding: 6px 4px; }
    .ep-tabla td:first-child { overflow-wrap: anywhere; }
    .ep-codigo { display: block; }
    .ep-largo { display: none; }
    .ep-corto { display: inline; }
    .ep-dif { display: none; }
    .ep-pct { min-width: 0; }
    .ep-minibarra { display: none; }
    .ep-comparar { display: block; margin: 3px 0 0; width: max-content; }
    .ep p.ep-sub { font-size: 14px; }
}