/* Metodología — el mismo lenguaje que la ficha de componente
   (componente.css, body.ficha-ui): UNA sola superficie elevada con todo
   dentro. Las secciones se separan con una línea grabada en el propio
   panel, no con tarjetas sueltas. El único hueco es la fórmula del
   ejemplo, porque es un dato calculado. */

.met-wrap { max-width: 1180px; }

.met-panel {
    padding: 8px 38px 34px;
    border-radius: 22px;
    background: var(--fic-sup);
    box-shadow: var(--fic-alto);
    margin-bottom: 40px;
}

/* Índice: fila de enlaces arriba del panel, pegajosa al hacer scroll */
.met-indice {
    position: sticky;
    top: 70px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 -38px;
    padding: 18px 38px 16px;
    border-radius: 22px 22px 0 0;
    background: var(--fic-sup);
}
.met-indice a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-secondary);
    background: var(--fic-sup);
    box-shadow: var(--fic-suave);
    transition: box-shadow .16s, color .16s;
}
.met-indice a:hover { color: var(--fic-acc); }
.met-indice a:active { box-shadow: var(--fic-hondo); }
.met-indice a i { font-size: 11.5px; color: var(--fic-acc); }

/* Secciones: línea grabada encima (sombra arriba, luz abajo) */
.met-sec {
    position: relative;
    margin-top: 30px;
    padding-top: 30px;
    scroll-margin-top: 140px;
}
.met-sec::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(var(--fic-sombra), var(--fic-sombra)) top / 100% 1px no-repeat,
                linear-gradient(var(--fic-luz), var(--fic-luz)) bottom / 100% 1px no-repeat;
}
.met-sec h2 {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 14px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-primary);
}
.met-sec h2 i { color: var(--fic-acc); font-size: 14px; }
.met-sec p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.8; color: var(--text-secondary); }
.met-sec p strong { color: var(--text-primary); }
.met-sec a { color: var(--fic-acc); }
.met-sec code {
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--text-primary);
    background: var(--fic-hueco);
}

/* Reglas de compatibilidad: grupos en dos columnas, como las categorías
   de la ficha técnica. Cada regla es una fila; nada de cajas. */
.met-reglas { columns: 2; column-gap: 44px; margin: 24px 0 8px; }
.met-grupo { break-inside: avoid; margin: 0 0 22px; }
.met-grupo h3 {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--fic-acc);
}
.met-grupo ul { margin: 0; padding: 0; list-style: none; }
.met-grupo li {
    position: relative;
    padding: 8px 2px 8px 18px;
    border-bottom: 1px solid var(--fic-linea);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-primary);
}
.met-grupo li:last-child { border-bottom: 0; }
.met-grupo li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 15px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fic-acc);
    opacity: .7;
}

/* Tabla de partidas del consumo: filas con línea, sin caja */
.met-tabla {
    width: 100%;
    margin: 16px 0 22px;
    border-collapse: collapse;
    font-size: 14px;
}
.met-tabla th,
.met-tabla td {
    padding: 11px 2px;
    padding-right: 20px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--fic-linea);
    color: var(--text-secondary);
}
.met-tabla th {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fic-acc);
    font-weight: 700;
}
.met-tabla td:first-child { width: 28%; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.met-tabla tbody tr:last-child td { border-bottom: 0; }

/* Ejemplo: texto normal y la fórmula en un hueco (es el dato calculado) */
.met-ejemplo { margin: 8px 0 4px; }
.met-ejemplo h4 {
    margin: 0 0 8px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--fic-acc);
}
.met-formula {
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    color: var(--text-primary) !important;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--fic-hueco);
    box-shadow: var(--fic-hondo);
    overflow-x: auto;
}
.met-formula strong { color: var(--fic-acc) !important; }

/* Pasos numerados y listas */
.met-pasos { margin: 14px 0; padding-left: 22px; }
.met-pasos li { margin-bottom: 12px; font-size: 14.5px; line-height: 1.75; color: var(--text-secondary); }
.met-pasos li::marker { color: var(--fic-acc); font-weight: 700; }
.met-pasos strong, .met-lista strong { color: var(--text-primary); }
.met-lista { margin: 14px 0; padding-left: 20px; }
.met-lista li { margin-bottom: 10px; font-size: 14.5px; line-height: 1.75; color: var(--text-secondary); }
.met-lista li::marker { color: var(--fic-acc); }

/* Nota al pie de cada sección: texto pequeño, sin caja */
.met-nota {
    position: relative;
    padding-left: 22px;
    margin: 14px 0 0 !important;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    color: var(--text-secondary);
}
.met-nota i { position: absolute; left: 0; top: 3px; color: var(--fic-acc);  }

@media (max-width: 900px) {
    .met-reglas { columns: 1; }
}
@media (max-width: 640px) {
    .met-panel { padding: 4px 18px 24px; border-radius: 18px; }
    .met-indice { position: static; margin: 0 -18px; padding: 16px 18px 10px; }
    .met-tabla td:first-child { white-space: normal; }
}