/* Apartado «Trucos y consejos para aprobar» (App\Helpers\TrucosAprobar). Usa los tokens --ap-* de diseno.css. */
.tr { --tr-c: #1f6feb; --tr-s: #e9f1ff; }
.tr-tono-azul { --tr-c: #1f6feb; --tr-s: #e9f1ff; }
.tr-tono-verde { --tr-c: #15803d; --tr-s: #e6f6ec; }
.tr-tono-naranja { --tr-c: #c2410c; --tr-s: #fff1e6; }
.tr-tono-morado { --tr-c: #7c3aed; --tr-s: #f1eafe; }
.tr-tono-turquesa { --tr-c: #0f766e; --tr-s: #e3f6f3; }
.tr-tono-rojo { --tr-c: #c0262d; --tr-s: #fdeaea; }
.tr-tono-ambar { --tr-c: #a16207; --tr-s: #fdf4dc; }

.tr svg { width: 1em; height: 1em; vertical-align: -0.125em; }
.tr-bloque { margin: 34px 0; }
.tr-titulo { display: flex; align-items: center; gap: 10px; font-size: 22px !important; margin: 0 0 12px; }
.tr-titulo svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--tr-s); color: var(--tr-c); }
.tr-intro { color: var(--ap-texto-2); margin: -4px 0 14px; max-width: 760px; }
.tr-nota { color: var(--ap-texto-3); font-size: 13px; margin: 10px 0 0; }

/* Navegación entre secciones */
.tr-nav { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin: 0 0 18px; scrollbar-width: thin; }
.tr-nav a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--ap-borde); border-radius: 999px;
    background: var(--ap-superficie); color: var(--ap-texto-2); font-size: 14px; font-weight: 600; text-decoration: none !important; white-space: nowrap; }
.tr-nav a:hover { border-color: var(--tr-c); color: var(--tr-c); }
.tr-nav a[aria-current=page] { background: var(--tr-c); border-color: var(--tr-c); color: #fff; }

.tr .seo-cifras strong { color: var(--tr-c); }
.tr .seo-cifras li { border-top: 3px solid var(--tr-c); }

/* Tarjetas de secciones (índice) */
.tr-secciones { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tr-seccion { position: relative; display: flex; flex-direction: column; height: 100%; padding: 18px; overflow: hidden; border-radius: var(--ap-radio);
    background: var(--ap-superficie); border: 1px solid var(--ap-borde); box-shadow: var(--ap-sombra); color: var(--ap-texto) !important;
    text-decoration: none !important; transition: transform .18s, box-shadow .18s, border-color .18s; }
.tr-seccion::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--tr-s); z-index: 0; }
.tr-seccion > * { position: relative; z-index: 1; }
.tr-seccion:hover { transform: translateY(-3px); box-shadow: var(--ap-sombra-alta); border-color: var(--tr-c); }
.tr-seccion-icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--tr-c); color: #fff; margin-bottom: 12px; }
.tr-seccion-icono svg { width: 28px; height: 28px; }
.tr-seccion h3 { font-size: 18px; margin: 0 0 6px; }
.tr-seccion p { color: var(--ap-texto-2); margin: 0 0 12px; flex: 1; }
.tr-seccion-mas { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--tr-c); }

/* Trucos numerados */
.tr-trucos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tr-truco { position: relative; padding: 18px 18px 6px; border-radius: var(--ap-radio); background: var(--ap-superficie); border: 1px solid var(--ap-borde); box-shadow: var(--ap-sombra); }
.tr-truco-num { position: absolute; top: 12px; right: 16px; font: 800 34px/1 var(--ap-letra-titulos); color: var(--tr-s); }
.tr-truco-icono { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--tr-s); color: var(--tr-c); margin-bottom: 10px; }
.tr-truco-icono svg { width: 22px; height: 22px; }
.tr-truco h3 { font-size: 17px; margin: 0 0 6px; padding-right: 34px; }
.tr-truco p { color: var(--ap-texto-2); line-height: 1.6; }

/* Consejo de profesor */
.tr-profesor { display: flex; gap: 16px; align-items: flex-start; max-width: 860px; margin: 30px 0; padding: 20px 22px; border-radius: var(--ap-radio);
    background: linear-gradient(135deg, var(--ap-marca), var(--ap-marca-2)); color: #fff; box-shadow: var(--ap-sombra-alta); }
.tr-profesor-icono { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ap-oro); color: var(--ap-marca); }
.tr-profesor-icono svg { width: 28px; height: 28px; }
.tr-profesor strong { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ap-oro); margin-bottom: 4px; }
.tr-profesor blockquote { margin: 0 0 6px; padding: 0; border: 0; font-size: 18px; line-height: 1.55; }
.tr-profesor blockquote p { margin: 0; }
.tr-profesor small { color: rgba(255, 255, 255, .7); font-size: 12px; }

/* Barras de % de aptos */
.tr-barras { list-style: none; margin: 0; padding: 0; max-width: 860px; display: grid; gap: 6px; }
.tr-barras a { display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr) 70px 110px; gap: 12px; align-items: center; padding: 7px 10px;
    border-radius: 8px; color: var(--ap-texto) !important; text-decoration: none !important; font-variant-numeric: tabular-nums; }
.tr-barras a:hover { background: var(--ap-superficie-2); }
.tr-barras-etiqueta { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.tr-barras-etiqueta svg { flex: none; width: 20px; height: 20px; color: var(--tr-c); }
.tr-barras-pista { height: 14px; border-radius: 7px; background: var(--ap-borde-suave); overflow: hidden; }
.tr-barras-pista i { display: block; height: 100%; width: var(--tr-ancho); border-radius: 7px; animation: tr-crecer 1s ease-out both; }
.tr-baja { background: linear-gradient(90deg, #f87171, #dc2626); }
.tr-media { background: linear-gradient(90deg, #fbbf24, #d97706); }
.tr-alta { background: linear-gradient(90deg, #4ade80, #16a34a); }
.tr-barras strong { text-align: right; }
.tr-barras small { color: var(--ap-texto-3); text-align: right; }
@keyframes tr-crecer { from { width: 0; } }

/* Intentos (barra 100 %) */
.tr-intentos { display: flex; max-width: 860px; height: 38px; border-radius: 10px; overflow: hidden; box-shadow: var(--ap-sombra); }
.tr-intentos i { display: grid; place-items: center; min-width: 0; font: 700 13px var(--ap-letra); font-style: normal; color: #fff; }
.tr-int-a1 { background: #16a34a; }
.tr-int-a2 { background: #84cc16; }
.tr-int-a3 { background: #f59e0b; }
.tr-int-a5 { background: #dc2626; }
.tr-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 10px 0 0; font-size: 14px; color: var(--ap-texto-2); }
.tr-leyenda li { display: flex; align-items: center; gap: 6px; }
.tr-leyenda i { width: 12px; height: 12px; border-radius: 3px; }

/* Columnas por mes */
.tr-meses { list-style: none; margin: 0; padding: 28px 12px 8px; max-width: 860px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px;
    background: var(--ap-superficie); border: 1px solid var(--ap-borde); border-radius: var(--ap-radio); }
.tr-meses li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tr-mes-col { position: relative; width: 100%; height: 170px; display: flex; align-items: flex-end; }
.tr-mes-col i { position: relative; display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: var(--tr-s); border: 1px solid var(--tr-c);
    border-bottom: 0; animation: tr-subir .9s ease-out both; }
.tr-mes-col b { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); font-size: 12px; color: var(--ap-texto-2); white-space: nowrap; }
.tr-mes-mejor .tr-mes-col i { background: var(--tr-c); }
.tr-mes-mejor .tr-mes-col b { color: var(--tr-c); font-weight: 800; }
.tr-mes-nombre { font-size: 12px; color: var(--ap-texto-3); text-transform: capitalize; }
.tr-mes-mejor .tr-mes-nombre { color: var(--tr-c); font-weight: 700; }
@keyframes tr-subir { from { height: 0; } }

/* Errores */
.tr-errores { list-style: none; margin: 0; padding: 0; max-width: 860px; display: grid; gap: 8px; }
.tr-errores li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--ap-radio-s); background: #fff5f5; border-left: 4px solid #dc2626; }
.tr-errores svg { flex: none; width: 20px; height: 20px; color: #dc2626; margin-top: 2px; }

/* Curiosidades */
.tr-curiosidades { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tr-curiosidades li { display: flex; gap: 12px; padding: 16px; border-radius: var(--ap-radio); background: #fffbea; border: 1px dashed #e8c45a; }
.tr-curiosidades span svg { width: 26px; height: 26px; color: #c58a00; }
.tr-curiosidades p { margin: 0; line-height: 1.55; }

/* Lista rápida (índice) */
.tr-lista-rapida { counter-reset: tr; list-style: none; margin: 0; padding: 0; max-width: 860px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.tr-lista-rapida li { counter-increment: tr; display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: var(--ap-superficie);
    border: 1px solid var(--ap-borde); border-radius: var(--ap-radio-s); line-height: 1.5; }
.tr-lista-rapida li::before { content: counter(tr); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--tr-c); color: #fff; font-weight: 800; font-size: 14px; }

/* Llamada a elegir autoescuela */
.tr-elegir { display: flex; gap: 18px; align-items: flex-start; max-width: 860px; padding: 22px; border-radius: var(--ap-radio); background: var(--ap-verde-suave); border: 1px solid #bfe5cc; }
.tr-elegir-icono { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--ap-verde); color: #fff; }
.tr-elegir-icono svg { width: 30px; height: 30px; }
.tr-elegir h2 { font-size: 20px !important; margin: 0 0 6px; }
.tr-botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }

@media (max-width: 700px) {
    .tr-barras a { grid-template-columns: minmax(0, 1fr) 64px; gap: 4px 10px; }
    .tr-barras-pista { grid-column: 1 / -1; grid-row: 2; }
    .tr-barras small { display: none; }
    .tr-meses { gap: 3px; padding: 24px 6px 6px; }
    .tr-mes-col { height: 130px; }
    .tr-mes-col b { font-size: 10px; }
    .tr-mes-nombre { font-size: 10px; }
    .tr-profesor, .tr-elegir { flex-direction: column; padding: 18px; }
    .tr-profesor blockquote { font-size: 16px; }
    .tr-lista-rapida { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .tr-mes-col b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tr-barras-pista i, .tr-mes-col i { animation: none; }
    .tr-seccion { transition: none; }
}