/* ==========================================================================
   Diseño 2026 de AptosAutoescuela
   Se carga después de tema.css (y de portada.css en la portada) y solo
   cambia el aspecto: tipografía propia, colores, cabecera, pie, portada.
   Fuentes alojadas en la propia web (sin Google Fonts: nada de datos a terceros).
   ========================================================================== */

@font-face {
    font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
    font-family: "Jakarta Variable"; font-style: normal; font-display: swap; font-weight: 200 800;
    src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
    --ap-fondo: #f5f7fb;
    --ap-superficie: #ffffff;
    --ap-superficie-2: #f3f6fb;
    --ap-borde: #e1e7ef;
    --ap-borde-suave: #eef2f7;
    --ap-texto: #0f1b2d;
    --ap-texto-2: #4a5a70;
    --ap-texto-3: #7a889c;
    --ap-acento: #1f6feb;
    --ap-acento-hover: #1858c4;
    --ap-acento-suave: #e9f1ff;
    --ap-marca: #0b2545;
    --ap-marca-2: #13386a;
    --ap-verde: #17a34a;
    --ap-verde-suave: #e6f6ec;
    --ap-premium: #b77900;
    --ap-oro: #ffc23d;
    --ap-radio: 12px;
    --ap-radio-s: 8px;
    --ap-sombra: 0 1px 2px rgba(15, 27, 45, .04), 0 2px 6px rgba(15, 27, 45, .05);
    --ap-sombra-alta: 0 12px 32px -8px rgba(15, 27, 45, .18), 0 2px 6px rgba(15, 27, 45, .06);
    --ap-letra: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --ap-letra-titulos: "Jakarta Variable", "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ------------------------------------------------------------------ base */
body.ap { font-size: 15.5px; line-height: 1.55; font-feature-settings: "cv11", "ss01"; text-rendering: optimizeLegibility; }
.ap h1, .ap h2, .ap h3, .ap h4 { font-family: var(--ap-letra-titulos); letter-spacing: -.015em; word-spacing: .03em; }
.ap h1 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; line-height: 1.15; }
.ap h2 { font-size: 24px; font-weight: 800; }
.ap h3 { font-size: 18px; font-weight: 700; }
.ap a { text-underline-offset: 2px; }
.ap ::selection { background: #cfe0ff; }

/* --------------------------------------------------------------- botones */
.ap .btn { border-radius: 10px; font-weight: 650; letter-spacing: -.005em; }
.ap .btn-sm { border-radius: 8px; padding: 6px 12px; font-size: 13.5px; }
.ap .btn-lg { border-radius: 12px; padding: 11px 20px; }
.ap .btn-danger, .ap .btn-primary, .ap .btn-info { box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 4px 12px -4px rgba(31, 111, 235, .55); }
.ap .btn-default { box-shadow: var(--ap-sombra); }

/* -------------------------------------------------------- barra superior */
.ap-barra { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.6) blur(10px); backdrop-filter: saturate(1.6) blur(10px); border-bottom-color: var(--ap-borde-suave); }
.ap-barra-dentro { min-height: 64px; gap: 14px; }
.ap-marca { font-family: var(--ap-letra-titulos); font-size: 18px; font-weight: 800; }
.ap-marca-l { width: 28px; height: 38px; border-radius: 6px; font-family: var(--ap-letra-titulos); }
.ap-marca b { color: var(--ap-acento); font-weight: 800; }
.ap-nav-lista a { padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ap-texto-2); }
.ap-nav-lista a[aria-current=page] { color: var(--ap-marca); background: var(--ap-superficie-2); box-shadow: inset 0 -2px 0 var(--ap-verde); border-radius: 8px 8px 2px 2px; }
.ap-buscar { flex: 0 1 220px; min-width: 120px; }
.ap-buscar input { height: 38px; border-radius: 999px; border-color: var(--ap-borde); background: var(--ap-superficie-2); }
.ap-buscar svg { top: 11px; left: 12px; }
.ap-buscar input { padding-left: 34px; }
.ap-boton-acceso { align-items: center; gap: 6px; flex: none; }
.ap-boton-acceso .btn-default { border: 0; background: none; box-shadow: none; color: var(--ap-texto-2); }
.ap-boton-acceso .btn-default:hover { background: var(--ap-superficie-2); color: var(--ap-texto); }
.ap-boton-acceso .btn-primary { border-radius: 999px; padding: 7px 14px; background: var(--ap-marca); border-color: var(--ap-marca); box-shadow: none; }
.ap-boton-acceso .btn-primary:hover, .ap-boton-acceso .btn-primary:focus { background: var(--ap-marca-2); border-color: var(--ap-marca-2); }
.ap-boton-acceso .btn-primary::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--ap-oro); vertical-align: 1px; }
@media (min-width: 981px) and (max-width: 1180px) {
    .ap-buscar { flex-basis: 150px; }
    .ap-nav-lista a { padding: 8px 8px; font-size: 13.5px; }
}
@media (max-width: 980px) {
    .ap-nav-lista a[aria-current=page] { box-shadow: inset 3px 0 0 var(--ap-verde); border-radius: 8px; }
    .ap-menu-boton { border-radius: 999px; }
}

/* ------------------------------------------------------- franja gratuita */
.ap-gratis-franja {
    border: 0; border-radius: var(--ap-radio); padding: 10px 12px 10px 14px; font-size: 14px;
    background: linear-gradient(90deg, #fff6df, #fffaf0); box-shadow: inset 0 0 0 1px #f3e2b3;
}
.ap-gratis-franja .btn { border-radius: 999px; }

/* ------------------------------------------------------------- contenido */
.ap-contenido { padding-top: 20px; }
.ap-hoja, .ap-contenido > .ap-hoja { border-color: var(--ap-borde-suave); border-radius: var(--ap-radio); }
.ap-titulo p { font-size: 16.5px; }
.ap-seccion-titulo { font-family: var(--ap-letra) !important; letter-spacing: .08em; }

/* Tarjetas */
.ap-tarjetas { gap: 16px; }
.ap-tarjeta { border-color: var(--ap-borde-suave); border-radius: 14px; padding: 20px 20px 18px; gap: 6px; }
.ap-tarjeta h2, .ap-tarjeta h3 { font-size: 17px; font-weight: 750; }
.ap-tarjeta p { font-size: 14px; line-height: 1.5; }
a.ap-tarjeta:hover, a.ap-tarjeta:focus-visible { border-color: #bcd2f7; transform: translateY(-2px); }
.ap-tarjeta-icono { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 8px; }
.ap-tarjeta-nuevo {
    top: 16px; right: 16px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; letter-spacing: .06em;
    background: var(--ap-verde-suave); color: #11803a;
}
.ap-tarjeta-destacada { background: var(--ap-superficie); border-color: var(--ap-borde-suave); box-shadow: var(--ap-sombra), inset 0 3px 0 var(--ap-acento); }

/* Tablas */
.ap .table-responsive { border-color: var(--ap-borde-suave); border-radius: var(--ap-radio); box-shadow: var(--ap-sombra); }
.ap .table > thead > tr > th, .ap .table:not(:has(> thead)) > tbody > tr:first-child > td { font-size: 11.5px; letter-spacing: .05em; color: var(--ap-texto-3); background: var(--ap-superficie-2); border-bottom-width: 1px; }
.ap .table > tbody > tr > td { padding-top: 10px; padding-bottom: 10px; }
.ap .table-hover > tbody > tr:hover > td { background: #f5f9ff; }
.ap .table td, .ap .table th { font-variant-numeric: tabular-nums; }

/* Formularios */
.ap .form-control { border-radius: 10px; height: 40px; }
.ap textarea.form-control { height: auto; }
.ap .boxlogin { border-radius: 18px; border-color: var(--ap-borde-suave); }
.ap .alert { border-radius: var(--ap-radio); }

/* ==================================================================== portada */
.ap-portada .ap-contenido { padding-top: 0; }
.ap-portada .ap-gratis-franja { margin: 16px 0 0; }

.ap-hero {
    position: relative; isolation: isolate; overflow: hidden;
    margin: 16px calc(50% - 50vw) 0; padding: 64px 16px 56px;
    color: #fff; text-align: center;
    background:
        radial-gradient(900px 420px at 85% -10%, rgba(31, 111, 235, .55), transparent 60%),
        radial-gradient(700px 380px at 5% 110%, rgba(23, 163, 74, .35), transparent 60%),
        linear-gradient(180deg, #0b2545 0%, #0a1f3b 100%);
}
.ap-portada .ap-gratis-franja + .ap-hero, .ap-portada .ap-oferta-aviso + .ap-hero { margin-top: 16px; }
/* Línea discontinua de carretera al pie del bloque */
.ap-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 4px; z-index: -1; opacity: .35;
    background: repeating-linear-gradient(90deg, #fff 0 46px, transparent 46px 92px);
    -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
            mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.ap-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%);
            mask: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%);
}
.ap-hero-dentro { max-width: 860px; margin: 0 auto; }
.ap-hero-etiqueta {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; margin-bottom: 18px;
    border-radius: 999px; font-size: 13px; font-weight: 600; color: #d6e4ff;
    background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.ap-hero-etiqueta b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ap-verde); color: #fff; }
.ap-hero-etiqueta svg { width: 12px; height: 12px; }
.ap .ap-hero h1 {
    margin: 0 auto 14px; max-width: 820px; color: #fff;
    font-size: clamp(30px, 5vw, 52px); line-height: 1.08; letter-spacing: -.025em; word-spacing: .04em; font-weight: 800;
}
.ap-hero h1 em { font-style: normal; color: #7ee2a0; background: linear-gradient(90deg, #7ee2a0, #8fc1ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ap-hero-sub { margin: 0 auto; max-width: 640px; font-size: 18px; line-height: 1.5; color: #b9c8de; }

/* Buscador con pestañas */
.ap-hero-buscador {
    max-width: 680px; margin: 30px auto 0; padding: 8px; text-align: left;
    background: #fff; border-radius: 18px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255,255,255,.1);
}
.ap-hero-pestanas { display: none; gap: 4px; padding: 0 0 8px; }
.ap-hero-buscador.ap-con-pestanas .ap-hero-pestanas { display: flex; }
.ap-hero-pestanas button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 10px; border: 0; border-radius: 12px; background: none; cursor: pointer;
    font: 600 14px/1.2 var(--ap-letra); color: var(--ap-texto-2); transition: background .15s, color .15s;
}
.ap-hero-pestanas button svg { width: 16px; height: 16px; }
.ap-hero-pestanas button:hover { background: var(--ap-superficie-2); color: var(--ap-texto); }
.ap-hero-pestanas button[aria-selected=true] { background: var(--ap-acento-suave); color: var(--ap-acento); }
.ap-hero-panel { display: flex; gap: 8px; }
.ap-hero-panel + .ap-hero-panel { margin-top: 8px; }
.ap-hero-buscador.ap-con-pestanas .ap-hero-panel + .ap-hero-panel { margin-top: 0; }
.ap-hero-panel[hidden] { display: none; }
.ap-hero-campo { position: relative; flex: 1; margin: 0; font-weight: normal; }
.ap-hero-campo > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ap-texto-3); pointer-events: none; }
.ap-hero-campo input, .ap-hero-campo select {
    width: 100%; height: 54px; padding: 8px 14px 8px 46px; font-size: 17px; color: var(--ap-texto);
    background: var(--ap-superficie-2); border: 1px solid transparent; border-radius: 12px; -webkit-appearance: none; appearance: none;
}
.ap-hero-campo select {
    cursor: pointer; padding-right: 40px;
    background: var(--ap-superficie-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
}
.ap-hero-campo input:focus, .ap-hero-campo select:focus { outline: none; background-color: #fff; border-color: var(--ap-acento); box-shadow: 0 0 0 4px var(--ap-acento-suave); }
.ap-hero-panel .btn { height: 54px; padding: 0 22px; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 16px; }
.ap-hero-panel .btn-default { background: var(--ap-marca); border-color: var(--ap-marca); color: #fff; box-shadow: none; }
.ap-hero-panel .btn-default:hover, .ap-hero-panel .btn-default:focus { background: var(--ap-marca-2); border-color: var(--ap-marca-2); color: #fff; }

.ap-hero-rapidas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 20px auto 0; max-width: 860px; }
.ap-hero-rapidas > span { font-size: 13px; color: #8ea3c0; margin-right: 2px; }
.ap .ap-hero-rapidas a {
    padding: 5px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none;
    color: #e3ecfa; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    transition: background .15s, color .15s;
}
.ap .ap-hero-rapidas a:hover, .ap .ap-hero-rapidas a:focus-visible { background: rgba(255, 255, 255, .16); color: #fff; }

.ap-hero-ventajas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 14px; color: #c6d4e8; }
.ap-hero-ventajas li { display: inline-flex; align-items: center; gap: 8px; }
.ap-hero-ventajas svg { width: 18px; height: 18px; color: #7ee2a0; }

/* En la portada el buscador ya está en el bloque principal: fuera el de la barra en escritorio */
@media (min-width: 981px) { .ap-portada .ap-buscar { visibility: hidden; } }
/* Títulos de sección generados por helpers (mapa, etc.) con el mismo aspecto en la portada */
.ap .ap-portada-seccion .ap-seccion-titulo, .ap-portada .ap-seccion-titulo { margin: 44px 0 16px; font: 800 26px/1.2 var(--ap-letra-titulos) !important; text-transform: none; letter-spacing: -.015em; color: var(--ap-texto) !important; }

/* Cabecera de sección de la portada */
.ap-seccion-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 20px; margin: 44px 0 18px; }
.ap .ap-seccion-cab h2 { margin: 0; font-size: 26px; }
.ap-seccion-cab p { margin: 4px 0 0; color: var(--ap-texto-2); }
.ap-seccion-cab > a { font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.ap-seccion-cab > a svg { width: 16px; height: 16px; }

/* Tarjetas de la portada: icono de color distinto en cada una y flecha al pasar */
.ap-portada .ap-tarjetas-centradas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap-portada .ap-tarjetas-centradas > li { min-width: 0; }
.ap-portada .ap-tarjeta { padding-bottom: 40px; }
.ap-portada .ap-tarjeta::after {
    content: "→"; position: absolute; left: 20px; bottom: 14px; font-weight: 700; color: var(--ap-acento);
    opacity: 0; transform: translateX(-6px); transition: opacity .15s, transform .15s;
}
.ap-portada a.ap-tarjeta:hover::after, .ap-portada a.ap-tarjeta:focus-visible::after { opacity: 1; transform: none; }
.ap-portada .ap-tarjetas > li:nth-child(8n+2) .ap-tarjeta-icono { background: #e6f6ec; color: #11803a; }
.ap-portada .ap-tarjetas > li:nth-child(8n+3) .ap-tarjeta-icono { background: #f1ecff; color: #6d43d9; }
.ap-portada .ap-tarjetas > li:nth-child(8n+4) .ap-tarjeta-icono { background: #ffeef0; color: #d03b4f; }
.ap-portada .ap-tarjetas > li:nth-child(8n+5) .ap-tarjeta-icono { background: #fff4e0; color: #c47600; }
.ap-portada .ap-tarjetas > li:nth-child(8n+6) .ap-tarjeta-icono { background: #e3f7f7; color: #0f8a8a; }
.ap-portada .ap-tarjetas > li:nth-child(8n+7) .ap-tarjeta-icono { background: #eef0ff; color: #3d4fd6; }
/* La tarjeta premium, oscura como el bloque premium */
.ap-portada .ap-tarjeta.ap-tarjeta-premium { background: linear-gradient(150deg, #13386a, #0b2545); border-color: #0b2545; color: #fff !important; box-shadow: var(--ap-sombra-alta); }
.ap-portada .ap-tarjeta-premium h3 { color: #fff; }
.ap-portada .ap-tarjeta-premium p { color: #b9c8de; }
.ap-portada .ap-tarjetas > li .ap-tarjeta-premium .ap-tarjeta-icono { background: rgba(255, 194, 61, .16); color: var(--ap-oro); }
.ap-portada .ap-tarjeta-premium .ap-tarjeta-nuevo { background: var(--ap-oro); color: #3a2a00; }
.ap-portada .ap-tarjeta-premium::after { color: var(--ap-oro); }

/* Guías populares: lista de enlaces en rejilla */
.ap-guias-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; }
.ap .ap-guias-lista a {
    display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border-radius: 12px;
    background: var(--ap-superficie); border: 1px solid var(--ap-borde-suave); box-shadow: var(--ap-sombra);
    color: var(--ap-texto); font-weight: 650; text-decoration: none; transition: border-color .15s, transform .15s;
}
.ap .ap-guias-lista a:hover, .ap .ap-guias-lista a:focus-visible { border-color: #bcd2f7; transform: translateY(-1px); }
.ap-guias-lista a > svg:first-child { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--ap-superficie-2); color: var(--ap-marca); }
.ap-guias-lista a > svg:last-child { margin-left: auto; flex: none; width: 16px; height: 16px; color: var(--ap-texto-3); }

/* Bloque premium */
.ap-portada .ap-promo-premium { margin-top: 44px; padding: 34px 36px; border-radius: 20px; background: radial-gradient(600px 300px at 95% 0%, rgba(255, 194, 61, .28), transparent 60%), linear-gradient(120deg, #13386a, #0b2545 70%); }
.ap-portada .ap-promo-premium h2 { font-size: 28px; }
.ap .btn.ap-promo-premium-boton { border-radius: 12px; background: var(--ap-oro); }

@media (max-width: 1100px) {
    .ap-portada .ap-tarjetas-centradas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-guias-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .ap-hero { padding: 40px 14px 44px; }
    .ap-hero-sub { font-size: 16px; }
    .ap-hero-buscador { padding: 6px; border-radius: 16px; }
    .ap-hero-pestanas button { flex-direction: column; gap: 3px; font-size: 12.5px; padding: 8px 4px; }
    .ap-hero-panel { flex-direction: column; }
    .ap-hero-panel .btn { justify-content: center; }
    .ap-hero-ventajas { gap: 6px 14px; margin-top: 22px; font-size: 13px; }
    .ap-seccion-cab { margin-top: 32px; }
    .ap .ap-seccion-cab h2 { font-size: 22px; }
    /* En móvil las tarjetas son filas compactas */
    .ap-portada .ap-tarjetas-centradas { grid-template-columns: 1fr; gap: 10px; }
    .ap-portada .ap-tarjeta { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 2px; padding: 14px 16px; }
    .ap-portada .ap-tarjeta-icono { grid-row: span 2; margin: 0; }
    .ap-portada .ap-tarjeta h3 { font-size: 16px; padding-right: 64px; }
    .ap-portada .ap-tarjeta p { font-size: 13.5px; }
    .ap-portada .ap-tarjeta-nuevo { top: 14px; right: 12px; }
    .ap-portada .ap-tarjeta::after { display: none; }
    .ap-guias-lista { grid-template-columns: 1fr; }
    .ap-portada .ap-promo-premium { padding: 24px 20px; }
    .ap-portada .ap-promo-premium h2 { font-size: 22px; }
}

/* ===================================================================== pie */
.ap-pie { margin-top: 56px; border-top: 0; background: #0a1f3b; color: #9fb0c8; }
.ap-pie .ap-pie-dentro { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); align-items: start; gap: 28px 40px; padding: 44px 16px 28px; font-size: 14px; color: #9fb0c8; }
.ap-pie-marca .ap-marca { color: #fff !important; margin-bottom: 12px; }
.ap-pie-marca .ap-marca b { color: #8fc1ff; }
.ap-pie-marca p { margin: 0; max-width: 360px; line-height: 1.55; }
.ap-pie nav { display: flex; flex-direction: column; gap: 9px; }
.ap-pie nav strong { color: #fff; font-family: var(--ap-letra-titulos); font-size: 14px; margin-bottom: 4px; }
.ap .ap-pie a { color: #c6d4e8; text-decoration: none; }
.ap .ap-pie a:hover, .ap .ap-pie a:focus-visible { color: #fff; text-decoration: underline; }
.ap-pie .ap-pie-legal { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: #7f93b0; }
.ap-pie .ap-pie-anuncio { display: block; padding: 0 16px 24px; }
@media (max-width: 760px) {
    .ap-pie .ap-pie-dentro { grid-template-columns: 1fr 1fr; padding-top: 32px; }
    .ap-pie-marca { grid-column: 1 / -1; }
}

/* ======================================================= páginas interiores */
/* Luz suave arriba, detrás del título */
body.ap:not(.ap-portada) {
    background: radial-gradient(1100px 340px at 50% -140px, #dce8ff 0%, rgba(220, 232, 255, 0) 70%) no-repeat, var(--ap-fondo);
}
/* Rayita de color bajo el título principal */
.ap:not(.ap-portada) .ap-contenido h1:first-of-type::after {
    content: ""; display: block; width: 56px; height: 4px; margin-top: 12px; border-radius: 4px;
    background: linear-gradient(90deg, var(--ap-verde), var(--ap-acento));
    transform-origin: left center; animation: ap-raya .7s cubic-bezier(.2, .7, .2, 1) both .1s;
}
.ap:not(.ap-portada) .ap-contenido h1.text-center:first-of-type::after,
.ap-contenido:has(.boxlogin) h1:first-of-type::after { margin-left: auto; margin-right: auto; transform-origin: center; }
@keyframes ap-raya { from { transform: scaleX(0); } }
.ap-contenido > h1:first-child, .ap-titulo h1, .ap-ficha h1 { animation: ap-sube .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ap-sube { from { opacity: 0; transform: translateY(8px); } }

/* Pestañas de ficha: subrayado que se desliza */
.ap-pestanas a { position: relative; border-bottom: 0; transition: color .15s; }
.ap-pestanas a::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
    background: var(--ap-acento); transform: scaleX(0); transition: transform .2s ease;
}
.ap-pestanas a:hover::after { transform: scaleX(.5); background: var(--ap-borde); }
.ap-pestanas a[aria-current=page]::after { transform: scaleX(1); background: var(--ap-acento); }

/* Rejillas de enlaces (provincias, centros, letras) */
.ap-rejilla a, .ap-rejilla > p.list-group-item { border-color: var(--ap-borde-suave) !important; border-radius: 10px !important; box-shadow: var(--ap-sombra); transition: border-color .15s, transform .15s, box-shadow .15s, color .15s; }
.ap-rejilla a:hover { transform: translateY(-2px); box-shadow: var(--ap-sombra-alta); border-color: #bcd2f7 !important; background: var(--ap-superficie); }
.ap-letras a, .ap-anyos a { transition: background .15s, color .15s, border-color .15s, transform .15s; }
.ap-letras a:hover, .ap-anyos a:hover { transform: translateY(-1px); }

/* Botones: se elevan un poco al pasar y se hunden al pulsar */
.ap .btn { transition: background-color .15s, border-color .15s, transform .12s, box-shadow .15s; }
.ap .btn:hover { transform: translateY(-1px); }
.ap .btn:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- tablas */
.ap .table-responsive { overflow-x: auto; }
.ap .table > tbody > tr > td, .ap .table > tbody > tr > th { transition: background-color .15s; }
.ap .table-hover > tbody > tr:hover > td, .ap .table > tbody > tr:hover > td, .ap .table > tbody > tr:hover > th { background: #f3f8ff; }
.ap .table > tbody > tr:hover > :first-child { box-shadow: inset 3px 0 0 var(--ap-acento); }
.ap .table:not(:has(> thead)) > tbody > tr:first-child:hover > :first-child { box-shadow: none; }
.ap .table > tbody > tr:nth-child(even):not(.info):not(.warning):not(.danger):not(.active):not(.success):not(.ap-rk-top) > td { background-color: #fbfcfe; }
.ap .table > tbody > tr:nth-child(even):not(.info):not(.warning):not(.danger):not(.active):not(.success):not(.ap-rk-top):hover > td { background: #f3f8ff; }

/* Barras bajo los porcentajes (inc/js/efectos.js) */
.ap td.ap-pct {
    --ap-pct-color: var(--ap-acento);
    background-image: linear-gradient(var(--ap-pct-color), var(--ap-pct-color)), linear-gradient(var(--ap-borde-suave), var(--ap-borde-suave));
    background-repeat: no-repeat; background-position: 8px calc(100% - 5px), 8px calc(100% - 5px);
    background-size: calc((100% - 16px) * var(--ap-p, 0%) / 100%) 3px, calc(100% - 16px) 3px;
    font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; padding-bottom: 12px !important;
    transition: background-size .9s cubic-bezier(.2, .7, .2, 1);
}
.ap td.ap-pct.ap-pct-bien { --ap-pct-color: var(--ap-verde); }
.ap td.ap-pct.ap-pct-mal { --ap-pct-color: #e5484d; }
/* Antes de verse la tabla, la barra está vacía; al entrar en pantalla crece */
html.ap-efectos table:not(.ap-pct-visto) td.ap-pct { background-size: 0 3px, calc(100% - 16px) 3px; }

/* ------------------------------------------------- aparición al hacer scroll */
html.ap-efectos .ap-revela { opacity: 0; transform: translateY(16px); }
html.ap-efectos .ap-revela.ap-visto {
    opacity: 1; transform: none;
    transition: opacity .55s ease var(--ap-retraso, 0ms), transform .55s cubic-bezier(.2, .7, .2, 1) var(--ap-retraso, 0ms);
}
/* Las tarjetas mantienen su efecto al pasar el ratón */
.ap-tarjetas > li.ap-revela.ap-visto { transform: none; }

/* Tarjetas: brillo que cruza al pasar el ratón */
.ap-tarjeta { overflow: hidden; }
.ap-tarjeta::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-18deg); opacity: 0;
}
a.ap-tarjeta:hover::before { animation: ap-brillo .8s ease; }
@keyframes ap-brillo { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
.ap-tarjeta:hover .ap-tarjeta-icono { transform: scale(1.08) rotate(-4deg); }
.ap-tarjeta-icono { transition: transform .2s cubic-bezier(.2, .7, .2, 1.4); }

/* Hero de la portada: brillo que se mueve despacio */
.ap-hero { background-size: 140% 140%, 140% 140%, 100% 100%; animation: ap-hero-luz 18s ease-in-out infinite alternate; }
@keyframes ap-hero-luz { from { background-position: 0% 0%, 0% 0%, 0 0; } to { background-position: 100% 30%, 60% 100%, 0 0; } }
.ap-hero h1, .ap-hero-sub, .ap-hero-buscador, .ap-hero-etiqueta { animation: ap-sube .6s cubic-bezier(.2, .7, .2, 1) both; }
.ap-hero-etiqueta { animation-delay: 0s; }
.ap-hero h1 { animation-delay: .06s; }
.ap-hero-sub { animation-delay: .12s; }
.ap-hero-buscador { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
    .ap-hero, .ap-hero *, .ap-contenido h1, .ap-contenido h1::after { animation: none !important; }
    .ap-tarjeta::before { display: none; }
    .ap .btn:hover, .ap .btn:active { transform: none; }
}
@media print {
    html.ap-efectos .ap-revela { opacity: 1 !important; transform: none !important; }
    body.ap:not(.ap-portada) { background: #fff; }
}

/* Buscador de la barra: en pantallas medianas se queda en una lupa y se abre al pulsar */
@media (min-width: 981px) and (max-width: 1400px) {
    .ap-buscar { flex: 0 0 38px; min-width: 0; height: 38px; }
    .ap-buscar input { width: 38px; padding-right: 0; cursor: pointer; color: transparent; transition: width .2s ease, box-shadow .15s; }
    .ap-buscar input::placeholder { color: transparent; }
    .ap-buscar input:focus { position: absolute; right: 0; top: 0; z-index: 3; width: 260px; cursor: text; color: var(--ap-texto); }
    .ap-buscar input:focus::placeholder { color: var(--ap-texto-3); }
    .ap-buscar svg { z-index: 4; }
}
/* Móvil: marca, «Hazte premium» y menú en una sola fila; «Entrar» pasa al menú */
.ap-nav-entrar { display: none; }
@media (max-width: 600px) {
    .ap-barra-dentro { gap: 8px; min-height: 58px; }
    .ap-marca { font-size: 16px; gap: 8px; }
    .ap-marca-l { width: 24px; height: 34px; font-size: 19px; }
    .ap-boton-acceso { order: 2; margin-left: auto; }
    .ap-boton-acceso .btn-default { display: none; }
    .ap-boton-acceso .btn-primary { padding: 6px 11px; font-size: 13px; }
    .ap-boton-acceso .btn-primary::before { display: none; }
    .ap-menu-boton { order: 3; margin-left: 0; width: 40px; height: 36px; padding: 0; justify-content: center; font-size: 0; }
    .ap-nav { order: 4; }
    .ap-nav-entrar { display: block; padding: 10px 12px; border-radius: 8px; font-weight: 600; color: var(--ap-texto) !important; background: var(--ap-superficie-2); text-decoration: none !important; }
}

/* ================================================================ gráficas */
/* Tarjeta de cada gráfica de aptos / no aptos por mes (inc/js/graficas.js, App\Helpers\Grafica) */
.ap-grafica-tarjeta {
    margin: 0 0 22px; padding: 0 0 14px; overflow: hidden;
    background: var(--ap-superficie); border: 1px solid var(--ap-borde-suave); border-radius: 16px; box-shadow: var(--ap-sombra);
}
.ap-grafica-cab {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 18px 20px;
    background: linear-gradient(120deg, #0b2545, #13386a 60%, #1f5fb4); color: #fff;
}
.ap-grafica-cab::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--ap-verde), #8fc1ff, var(--ap-oro));
}
.ap-grafica-icono {
    flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
    background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: #7ee2a0;
}
.ap-grafica-icono svg { width: 26px; height: 26px; }
.ap-grafica-titulos { flex: 1 1 260px; min-width: 0; }
.ap-grafica-antetitulo { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8fc1ff; }
.ap .ap-grafica-titulo { margin: 2px 0 8px; color: #fff; font-size: 22px; font-weight: 800; line-height: 1.2; }
.ap-grafica-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-chip {
    display: inline-block; max-width: 100%; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #dbe6f7; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.ap-chip-permiso { color: #0b2545; background: #8fc1ff; box-shadow: none; }
.ap-chip-anyo { color: #3a2a00; background: var(--ap-oro); box-shadow: none; }
.ap-grafica-kpis { display: flex; gap: 8px; margin: 0; }
.ap-grafica-kpis > div { min-width: 82px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ap-grafica-kpis dt { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #a9bbd6; }
.ap-grafica-kpis dd { margin: 0; font: 800 20px/1.2 var(--ap-letra-titulos); font-variant-numeric: tabular-nums; color: #fff; }
.ap-kpi-pct dd { color: #7ee2a0; }
.ap-kpi-no dd { color: #ff9a9d; }

.ap-grafica { padding: 14px 16px 0; }
.ap-grafica-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 13px; font-weight: 600; color: var(--ap-texto-2); }
.ap-grafica-leyenda li { display: inline-flex; align-items: center; gap: 7px; }
.ap-grafica-leyenda span { width: 12px; height: 12px; border-radius: 4px; }
.ap-grafica-leyenda-pct span { width: 18px; height: 0; border-top: 2.5px solid var(--ap-acento); border-radius: 0; }
.ap-grafica-marco { position: relative; width: 100%; }
.ap-grafica-marco svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--ap-letra); }
.ap-grafica-rejilla line { stroke: var(--ap-borde-suave); stroke-width: 1; stroke-dasharray: 3 4; }
.ap-grafica-rejilla line.ap-grafica-base { stroke: var(--ap-borde); stroke-dasharray: none; }
.ap-grafica-rejilla text, .ap-grafica-ejex text { font-size: 12px; fill: var(--ap-texto-3); font-variant-numeric: tabular-nums; }
.ap-grafica-rejilla text.ap-grafica-eje-pct { fill: var(--ap-acento); opacity: .7; }
.ap-grafica-resalte { fill: var(--ap-acento-suave); opacity: .7; }
.ap-grafica-linea { fill: none; stroke: var(--ap-acento); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 2px 3px rgba(31, 111, 235, .35)); }
.ap-grafica-punto { fill: #fff; stroke: var(--ap-acento); stroke-width: 2; }
.ap-grafica-tip {
    position: absolute; top: 0; z-index: 2; min-width: 160px; padding: 9px 12px; pointer-events: none;
    background: rgba(11, 37, 69, .96); color: #e3ecfa; border-radius: 10px; box-shadow: var(--ap-sombra-alta);
    font-size: 13px; line-height: 1.55;
}
.ap-grafica-tip strong { display: block; color: #fff; text-transform: capitalize; }
.ap-grafica-tip span { display: block; }
.ap-grafica-tip i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px; }
.ap-grafica-tip b { color: #fff; font-variant-numeric: tabular-nums; }
.ap-grafica-tip-pie { margin-top: 3px; padding-top: 3px; border-top: 1px solid rgba(255, 255, 255, .15); color: #8fc1ff; font-weight: 600; }

/* Animaciones: las barras crecen desde abajo y la línea se dibuja */
.ap-grafica-animar path, .ap-grafica-animar rect { transform-box: fill-box; transform-origin: 50% 100%; animation: ap-barra-crece .7s cubic-bezier(.2, .7, .2, 1) both; }
path.ap-grafica-linea.ap-grafica-animar { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ap-linea-dibuja 1s ease-out forwards; }
@keyframes ap-barra-crece { from { transform: scaleY(0); } }
@keyframes ap-linea-dibuja { to { stroke-dashoffset: 0; } }
.ap-grafica-punto { animation: ap-aparece .4s ease both .9s; }
@keyframes ap-aparece { from { opacity: 0; } }

/* Gráfica de evolución (ficha-evolucion.js) con el mismo estilo */
.ap .ap-evolucion { padding: 0 0 8px; overflow: hidden; border-radius: 16px; border-color: var(--ap-borde-suave); }
.ap .ap-evolucion > .ap-evolucion-titulo, .ap .ap-evolucion > .ap-evolucion-sub { margin: 0; padding: 0 20px; color: #fff; background: linear-gradient(120deg, #0b2545, #13386a 60%, #1f5fb4); }
.ap .ap-evolucion > .ap-evolucion-titulo { padding-top: 18px; font-size: 22px; font-weight: 800; }
.ap .ap-evolucion > .ap-evolucion-titulo::before {
    content: "Evolución"; display: block; margin-bottom: 2px; font: 700 11.5px/1.4 var(--ap-letra); letter-spacing: .09em; text-transform: uppercase; color: #8fc1ff;
}
.ap .ap-evolucion > .ap-evolucion-sub { padding-bottom: 21px; color: #b9c8de; background: linear-gradient(90deg, var(--ap-verde), #8fc1ff, var(--ap-oro)) left bottom / 100% 3px no-repeat, linear-gradient(120deg, #0b2545, #13386a 60%, #1f5fb4); }
.ap .ap-evolucion > .ap-evolucion-filtros { margin: 14px 16px 10px; }
.ap .ap-evolucion > .ap-evolucion-grafica, .ap .ap-evolucion > .ap-evolucion-tabla { margin-left: 16px; margin-right: 16px; }
.ap-ev-rejilla line { stroke-dasharray: 3 4; }
.ap-ev-rejilla line.ap-ev-base { stroke: var(--ap-borde); stroke-dasharray: none; }
.ap .ap-evolucion-tip { background: rgba(11, 37, 69, .96); color: #e3ecfa; border: 0; border-radius: 10px; }
.ap .ap-evolucion-tip strong, .ap .ap-evolucion-tip b { color: #fff; }
.ap .ap-ev-tip-pie { color: #8fc1ff; }
.ap-evolucion-leyenda { font-weight: 600; }
.ap-evolucion-leyenda span { border-radius: 4px !important; }

@media (max-width: 600px) {
    .ap-grafica-cab { padding: 16px; }
    .ap .ap-grafica-titulo { font-size: 19px; }
    .ap-grafica-kpis { width: 100%; }
    .ap-grafica-kpis > div { flex: 1; min-width: 0; padding: 6px 10px; }
    .ap-grafica-kpis dd { font-size: 17px; }
    .ap-grafica { padding: 12px 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ap-grafica-animar path, .ap-grafica-animar rect, .ap-grafica-punto { animation: none; }
    path.ap-grafica-linea.ap-grafica-animar { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 600px) {
    .ap-grafica-icono { display: none; }
}

/* ================================================================ rankings */
.ap-rk-filtros-texto { margin: 6px 0 14px; font-weight: 600; color: var(--ap-texto-2); }
.ap-rk-filtro { margin-bottom: 10px; }
.ap-rk-otra { margin: 36px 0 10px; font-size: 20px; }
.ap .ap-rk-selector { max-width: 360px; margin-bottom: 14px; }

/* Podio de los tres primeros (inc/js/ranking.js) */
.ap-podio {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px;
    margin: 8px 0 22px; padding: 26px 20px 0; border-radius: 18px; overflow: hidden;
    background: radial-gradient(500px 220px at 50% 0%, rgba(255, 194, 61, .25), transparent 70%), linear-gradient(160deg, #0b2545, #13386a);
}
.ap-podio-puesto {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0;
    color: #fff; animation: ap-sube .6s cubic-bezier(.2, .7, .2, 1) both;
}
.ap-podio-1 { animation-delay: .1s; }
.ap-podio-2 { animation-delay: .25s; }
.ap-podio-3 { animation-delay: .4s; }
.ap-podio-medalla {
    display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 10px; border-radius: 50%;
    font: 800 22px/1 var(--ap-letra-titulos); color: #3a2a00;
    background: radial-gradient(circle at 35% 30%, #fff3c4, #ffc23d 55%, #c98a00);
    box-shadow: 0 6px 18px rgba(255, 194, 61, .45), inset 0 -3px 0 rgba(0, 0, 0, .15);
}
.ap-podio-1 .ap-podio-medalla { width: 66px; height: 66px; font-size: 28px; }
.ap-podio-2 .ap-podio-medalla { color: #2b3440; background: radial-gradient(circle at 35% 30%, #ffffff, #cfd8e3 55%, #8d9bab); box-shadow: 0 6px 18px rgba(207, 216, 227, .35), inset 0 -3px 0 rgba(0, 0, 0, .15); }
.ap-podio-3 .ap-podio-medalla { color: #3b1d05; background: radial-gradient(circle at 35% 30%, #ffe0c2, #d98b4a 55%, #9a5520); box-shadow: 0 6px 18px rgba(217, 139, 74, .35), inset 0 -3px 0 rgba(0, 0, 0, .15); }
.ap .ap-podio-nombre { margin: 0 0 2px; max-width: 100%; font-size: 16px; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
.ap .ap-podio-nombre a { color: #fff; text-decoration: none; }
.ap .ap-podio-nombre a:hover { text-decoration: underline; }
.ap-podio-lugar { margin: 0 0 6px; font-size: 12.5px; color: #a9bbd6; }
.ap-podio-valor { margin: 0 0 12px; font-size: 13px; color: #c6d4e8; }
.ap-podio-valor strong { font: 800 22px/1.1 var(--ap-letra-titulos); color: #fff; }
.ap-podio-valor span { display: block; margin-top: 2px; font-weight: 600; color: #7ee2a0; }
.ap-podio-peana {
    width: 100%; display: grid; place-items: center; border-radius: 12px 12px 0 0;
    font: 800 26px/1 var(--ap-letra-titulos); color: rgba(255, 255, 255, .35);
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
    transform-origin: bottom; animation: ap-barra-crece .7s cubic-bezier(.2, .7, .2, 1) both .2s;
}
.ap-podio-1 .ap-podio-peana { height: 110px; background: linear-gradient(180deg, rgba(255, 194, 61, .45), rgba(255, 194, 61, .1)); color: rgba(255, 255, 255, .55); }
.ap-podio-2 .ap-podio-peana { height: 80px; }
.ap-podio-3 .ap-podio-peana { height: 58px; }

/* Tabla de ranking */
.ap .ap-ranking { font-size: 14px; }
.ap .ap-ranking > thead > tr > th { white-space: nowrap; }
.ap-rk-puesto { width: 64px; }
.ap-rk-medalla {
    display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px;
    font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ap-texto-2); background: var(--ap-superficie-2);
}
.ap-rk-medalla-1 { color: #3a2a00; background: linear-gradient(135deg, #ffe48a, #ffc23d); box-shadow: 0 2px 6px rgba(255, 194, 61, .5); }
.ap-rk-medalla-2 { color: #2b3440; background: linear-gradient(135deg, #f1f4f8, #c9d2dd); box-shadow: 0 2px 6px rgba(140, 155, 171, .4); }
.ap-rk-medalla-3 { color: #3b1d05; background: linear-gradient(135deg, #f6c79c, #d98b4a); box-shadow: 0 2px 6px rgba(217, 139, 74, .4); }
.ap .ap-ranking .ap-rk-nombre a { font-weight: 700; color: var(--ap-texto); text-decoration: none; }
.ap .ap-ranking .ap-rk-nombre a:hover { color: var(--ap-acento); text-decoration: underline; }
.ap-rk-tipo { font-size: 12.5px; color: var(--ap-texto-2); }
.ap .ap-ranking td.ap-rk-medida {
    min-width: 110px; padding-bottom: 12px !important; font-variant-numeric: tabular-nums;
    background-image: linear-gradient(90deg, var(--ap-acento), #6aa5ff), linear-gradient(var(--ap-borde-suave), var(--ap-borde-suave));
    background-repeat: no-repeat; background-position: 8px calc(100% - 5px), 8px calc(100% - 5px);
    background-size: calc((100% - 16px) * var(--ap-rel, 0%) / 100%) 4px, calc(100% - 16px) 4px;
    transition: background-size .9s cubic-bezier(.2, .7, .2, 1);
}
.ap .ap-ranking[data-rk-medida="No aptos"] td.ap-rk-medida { background-image: linear-gradient(90deg, #e5484d, #ff8a8d), linear-gradient(var(--ap-borde-suave), var(--ap-borde-suave)); }
.ap .ap-ranking[data-rk-medida="Aptos"] td.ap-rk-medida { background-image: linear-gradient(90deg, var(--ap-verde), #5fcf8a), linear-gradient(var(--ap-borde-suave), var(--ap-borde-suave)); }
.ap .ap-ranking > tbody > tr.ap-rk-top > td { background-color: #fffbf0; }
.ap .ap-ranking > tbody > tr.ap-rk-top:hover > td { background-color: #fff5dc; }
.ap .ap-ranking > tbody > tr.ap-rk-top-1 > td:first-child { box-shadow: inset 4px 0 0 var(--ap-oro); }
.ap .ap-ranking > tbody > tr.ap-rk-top-2 > td:first-child { box-shadow: inset 4px 0 0 #c9d2dd; }
.ap .ap-ranking > tbody > tr.ap-rk-top-3 > td:first-child { box-shadow: inset 4px 0 0 #d98b4a; }
.ap .ap-ranking > tbody > tr.ap-rk-total > td { background: var(--ap-superficie-2); font-weight: 700; border-top: 2px solid var(--ap-borde); }
.ap .ap-ranking > tbody > tr.ap-rk-total > td:first-child { color: var(--ap-texto-2); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.ap .ap-rk-caja .pagination { margin: 14px 12px; }

@media (max-width: 700px) {
    .ap-podio { gap: 8px; padding: 20px 10px 0; }
    .ap .ap-podio-nombre { font-size: 13.5px; }
    .ap-podio-lugar { display: none; }
    .ap-podio-valor strong { font-size: 18px; }
    .ap-podio-medalla { width: 44px; height: 44px; font-size: 18px; }
    .ap-podio-1 .ap-podio-medalla { width: 52px; height: 52px; font-size: 22px; }
    .ap-podio-1 .ap-podio-peana { height: 84px; }
    .ap-podio-2 .ap-podio-peana { height: 60px; }
    .ap-podio-3 .ap-podio-peana { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .ap-podio-puesto, .ap-podio-peana { animation: none; }
}