/* ===== Sección ÚTILES (?section=utiles) — índice por categorías y herramientas  [19-10-2026] =====
   La carga sola `enqueue_assets()` (frontend-<seccion>.css). Cabecera con el mismo dibujo que Potencia. */

.fgp-utiles-section { padding: 32px 24px 48px; max-width: 1320px; margin: 0 auto; }

.fgp-utiles-head { text-align: center; margin-bottom: 30px; }
.fgp-utiles-head h1 {
    margin: 0; font-size: 30px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #1b2735;
}
.fgp-utiles-head h1::after {
    content: ""; display: block; width: 68px; height: 4px; margin: 16px auto 0; border-radius: 4px;
    background: linear-gradient(90deg, #2f9bff, #7b61ff);
}
.fgp-utiles-head p { max-width: 600px; margin: 14px auto 0; color: #5d6b7a; font-size: 15.5px; line-height: 1.6; }

/* ---- índice ---- */
.fgp-utiles-cat { margin: 0 0 28px; }
.fgp-utiles-cat-titulo {
    margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #5d6b7a;
}
.fgp-utiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.fgp-utiles-card {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px;
    background: #fff; border: 1px solid #e5e9f0; border-radius: 14px;
    box-shadow: 0 4px 18px rgba(20, 40, 80, .06);
    color: #1b2735; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.fgp-utiles-card:hover, .fgp-utiles-card:focus-visible {
    border-color: #2f9bff; box-shadow: 0 8px 26px rgba(47, 155, 255, .16); transform: translateY(-1px);
    color: #1b2735; text-decoration: none;
}
.fgp-utiles-card-ico {
    flex: 0 0 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    font-size: 22px; background: #eef5ff; border-radius: 12px;
}
.fgp-utiles-card-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fgp-utiles-card-txt strong { font-size: 15.5px; font-weight: 700; }
.fgp-utiles-card-txt span { font-size: 13.5px; color: #5d6b7a; line-height: 1.45; }
.fgp-utiles-card-ir { color: #2f9bff; font-size: 18px; font-weight: 700; }

/* ---- migas / volver ---- */
.fgp-utiles-migas { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 14px; color: #5d6b7a; }
.fgp-utiles-volver { color: #2f9bff; font-weight: 600; text-decoration: none; }
.fgp-utiles-volver:hover { text-decoration: underline; }
.fgp-utiles-migas-sep { color: #b5c0cc; }

/* ---- iframe (conector) ---- */
.fgp-utiles-frame {
    background: #fff; border: 1px solid #e5e9f0; border-radius: 16px; overflow: hidden;
    box-shadow: 0 8px 30px rgba(20, 40, 80, .08);
}
/* el alto lo pone frontend-utiles.js con el de su contenido; esto es solo lo que ocupa mientras carga */
.fgp-utiles-iframe { display: block; width: 100%; height: 900px; border: 0; }

/* ---- tarjeta de herramienta ---- */
.fgp-util-card {
    max-width: 920px; margin: 0 auto; padding: 26px 28px;
    background: #fff; border: 1px solid #e5e9f0; border-radius: 16px; box-shadow: 0 8px 30px rgba(20, 40, 80, .08);
}
.fgp-util-card h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: #1b2735; }
.fgp-util-card h2 { margin: 0 0 10px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: #1b2735; }
.fgp-util-card-ancha { max-width: none; }
/* tarjetas, iframe y bloques de texto apilados: aire entre ellos */
.fgp-util-card + .fgp-util-card, .fgp-util-card + .fgp-utiles-frame, .fgp-utiles-frame + .fgp-util-card,
.fgp-util-card + script + .fgp-util-card { margin-top: 18px; }
.fgp-util-texto p, .fgp-util-texto li { color: #3d4a58; font-size: 15px; line-height: 1.65; }
.fgp-util-texto ul { margin: 8px 0 0; padding-left: 20px; }
.fgp-util-texto details summary { cursor: pointer; font-weight: 600; color: #1f7ae0; margin: 6px 0 12px; }
.fgp-util-formula {
    margin: 12px 0; padding: 12px 16px; background: #f3f8ff; border-left: 4px solid #2f9bff; border-radius: 8px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14.5px; color: #1b2735;
}
.fgp-util-table a { color: #1f7ae0; font-weight: 600; text-decoration: none; }
.fgp-util-table a:hover { text-decoration: underline; }
/* En los RESULTADOS del buscador VAG el enlace del código P NO va en azul: el azul es solo para la casilla
   que coincide con lo escrito, sea P o VAG; lo demás, en negro (orden del taller, 19-10). El enlace sigue
   ahí: se subraya al pasar por encima. */
#fgp-vag-res td a { color: inherit; font-weight: inherit; }

/* ---- preguntas frecuentes ---- */
.fgp-util-faq details { border-top: 1px solid #eef1f5; padding: 12px 0; }
.fgp-util-faq details:first-of-type { border-top: 0; }
.fgp-util-faq summary { cursor: pointer; font-weight: 700; color: #1b2735; font-size: 15.5px; }
.fgp-util-faq details p { margin: 8px 0 0; color: #3d4a58; font-size: 15px; line-height: 1.65; }

/* ---- otras herramientas ---- */
.fgp-utiles-otras { max-width: 920px; margin: 28px auto 0; }
.fgp-utiles-otras h2 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5d6b7a; }
.fgp-util-lede { margin: 0 0 18px; color: #5d6b7a; font-size: 15px; line-height: 1.6; }
.fgp-util-lede b { color: #1b2735; font-weight: 600; }
.fgp-util-nota { margin: 18px 0 0; color: #7b8794; font-size: 13px; line-height: 1.55; }
.fgp-util-nota b { color: #5d6b7a; }

.fgp-util-input {
    width: 100%; padding: 11px 14px; font-size: 16px; color: #1b2735;
    background: #f8fafc; border: 1px solid #d5dde7; border-radius: 10px; outline: none;
}
.fgp-util-input:focus { border-color: #2f9bff; background: #fff; box-shadow: 0 0 0 3px rgba(47, 155, 255, .15); }
.fgp-util-btn {
    padding: 11px 20px; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer;
    background: linear-gradient(90deg, #2f9bff, #7b61ff); border: 0; border-radius: 10px; white-space: nowrap;
}
.fgp-util-btn:hover { filter: brightness(1.06); }
.fgp-util-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- tabla de resultados ---- */
.fgp-util-tablewrap { overflow-x: auto; }
.fgp-util-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fgp-util-table th {
    text-align: left; padding: 9px 12px; background: #f3f6fa; color: #5d6b7a;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid #e3e8ef;
}
.fgp-util-table td { padding: 10px 12px; border-bottom: 1px solid #eef1f5; vertical-align: top; color: #1b2735; }
.fgp-util-table tbody tr:hover td { background: #f8fbff; }

/* ---- convertidor VAG ---- */
.fgp-vag-form { display: flex; gap: 10px; }
.fgp-vag-estado { min-height: 1.4em; margin: 12px 0 8px; color: #5d6b7a; font-size: 14px; }
.fgp-vag-nota { display: block; margin-top: 4px; color: #9a6400; font-size: 12.5px; }
.fgp-vag-ficha-desc { margin: 4px 0 16px; font-size: 19px; font-weight: 600; color: #1b2735; line-height: 1.45; }
.fgp-vag-ficha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 16px; }
.fgp-vag-ficha div { background: #f6f9fc; border: 1px solid #e5e9f0; border-radius: 10px; padding: 10px 12px; }
.fgp-vag-ficha dt { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7b8794; }
.fgp-vag-ficha dd { margin: 3px 0 0; font-size: 17px; font-weight: 700; color: #1b2735; }
.fgp-vag-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 18px 0 0; }
.fgp-vag-acciones a:not(.fgp-util-btn) { color: #1f7ae0; font-weight: 600; text-decoration: none; }
a.fgp-util-btn { display: inline-block; text-decoration: none; color: #fff; }
.fgp-vag-actual td { background: #f3f8ff; font-weight: 700; }
.fgp-vag-grupos { list-style: none; margin: 10px 0 0; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.fgp-vag-grupos a { display: flex; flex-direction: column; padding: 9px 12px; border: 1px solid #e5e9f0; border-radius: 10px; text-decoration: none; color: #1b2735; background: #fff; }
.fgp-vag-grupos a:hover { border-color: #2f9bff; }
.fgp-vag-grupos b { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 15px; }
.fgp-vag-grupos span { font-size: 12px; color: #7b8794; }

/* ---- pinout EDC15 / MSA15 ---- */
.fgp-conector-modos { margin: 0; padding-left: 20px; color: #3d4a58; font-size: 14.5px; line-height: 1.6; }
.fgp-conector-modos li + li { margin-top: 4px; }
.fgp-conector-tabla thead tr:first-child th { text-align: center; background: #e9f1fb; color: #1b2735; border-bottom: 0; }
.fgp-conector-tabla th:nth-child(4), .fgp-conector-tabla td:nth-child(4) { border-left: 2px solid #d5dde7; }
.fgp-conector-tabla thead tr:first-child th:nth-child(2) { border-left: 2px solid #d5dde7; }
.fgp-util-table td.fgp-conector-cambia { color: #9a6400; font-weight: 700; }
.fgp-util-texto h3 { margin: 22px 0 8px; font-size: 16px; font-weight: 800; color: #1b2735; }
.fgp-conector-solo { margin: 0; padding-left: 20px; }
.fgp-conector-solo li + li { margin-top: 6px; }
.fgp-util-table td.fgp-vag-coincide { color: #1f7ae0; font-weight: 700; }

/* ---- kW ↔ CV ---- */
.fgp-kwcv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fgp-kwcv-campo { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.fgp-kwcv-campo span { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #5d6b7a; }
.fgp-kwcv-campo .fgp-util-input { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fgp-kwcv-aviso { min-height: 1.3em; margin: 10px 0 0; color: #b42318; font-size: 13.5px; }

@media (max-width: 768px) {
    .fgp-utiles-section { padding: 24px 14px 36px; }
    .fgp-utiles-head h1 { font-size: 24px; }
    .fgp-util-card { padding: 20px 16px; }
    .fgp-util-card h1 { font-size: 21px; }
    .fgp-util-card h2 { font-size: 18px; }
    .fgp-vag-ficha { grid-template-columns: 1fr; }
    .fgp-vag-form { flex-direction: column; }
    .fgp-kwcv-grid { grid-template-columns: 1fr; }
}