/* /metodologia. [B.9]
 *
 * Se monta ENCIMA de hub.css, que es quien trae los tokens, el fondo, .page,
 * .card, .crumbs, .hub-hero y .kpis. Aqui solo esta lo que esta pagina tiene y
 * las demas no: el indice de secciones, la tabla de denominadores, la lista de
 * sesgos y el bloque de falsabilidad.
 *
 * No hay ni una linea de JavaScript detras de esto a proposito: la pagina es
 * texto, y la lee gente que llega con dudas sobre si el sitio es serio. Una
 * pagina que se queda en blanco sin scripts es la peor primera impresion que
 * puede dar justamente esta.
 *
 * .metodo-cols esta repetido de lexico.css a proposito y marcado abajo: son
 * las dos paginas de metodo del sitio, tienen que verse iguales, y cargar
 * lexico.css entero aqui por dos reglas seria peor negocio. */

/* ---------------- las tres tarjetas de arriba ---------------- */
/* .kpi y .kpis los trae hub.css. Alli la tarjeta es <b> + <small>; aqui hace
   falta una linea mas -el titulo de la cifra y, debajo, la advertencia de como
   hay que leerla-, que es justo lo que esta pagina viene a hacer. */
.kpi-label {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--txt);
}

/* ---------------- indice de secciones ---------------- */
.indice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 26px;
}

.indice a {
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--dim);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
}

.indice a:hover {
    border-color: var(--accent-line);
    background: var(--accent-dim);
    color: var(--txt);
}

/* ---------------- secciones ---------------- */
.seccion {
    margin-bottom: 18px;
    /* El ancla de #falsable y compania no puede quedar debajo de la barra
       superior, que es fija. Sin esto, pinchar en el indice deja el <h2> justo
       tapado y parece que el enlace no ha ido a ninguna parte. */
    scroll-margin-top: 80px;
}

.seccion h3 {
    margin: 26px 0 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--txt);
}

.seccion h3:first-of-type {
    margin-top: 20px;
}

.seccion p {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--dim);
    max-width: 78ch;
}

.seccion p b,
.seccion li b {
    color: var(--txt);
    font-weight: 700;
}

.seccion a {
    color: var(--blue);
    text-decoration: none;
}

.seccion a:hover {
    text-decoration: underline;
}

.lista-metodo {
    margin: 0 0 12px;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.lista-metodo li {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--dim);
    max-width: 78ch;
}

.lista-metodo.enlaces li {
    padding-left: 2px;
}

/* Dos columnas para "lo que decide / lo que no toca" y para las reglas del
   mapa. MISMA definicion que la de lexico.css, a proposito: son las dos
   paginas de metodo del sitio y tienen que verse iguales. */
.metodo-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: 8px;
}

.metodo-cols ul {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metodo-cols li {
    font-size: 13px;
    line-height: 1.6;
    color: var(--dim);
}

/* ---------------- la tabla de denominadores ---------------- */
/* Contenedor que hace scroll POR SI MISMO: sin esto, tres columnas de texto en
   un movil empujan la pagina entera hacia la derecha. */
.tabla-scroll {
    margin: 16px 0 6px;
    overflow-x: auto;
}

.tabla-denominadores {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 13px;
}

.tabla-denominadores th {
    text-align: left;
    padding: 0 14px 9px 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--dimmer);
    border-bottom: 1px solid var(--line);
}

.tabla-denominadores td {
    padding: 13px 14px 13px 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--dim);
    line-height: 1.55;
    vertical-align: top;
}

.tabla-denominadores tr td:first-child {
    width: 21%;
    font-weight: 700;
}

.tabla-denominadores tr td:nth-child(2) {
    width: 32%;
    color: var(--txt);
}

/* ---------------- sesgos ---------------- */
.sesgos {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.sesgos li {
    padding: 14px 0;
    border-top: 1px solid var(--line-soft);
}

.sesgos li:first-child {
    border-top: 0;
    padding-top: 4px;
}

.sesgos>li>b {
    display: block;
    font-size: 14px;
    color: var(--txt);
}

/* La direccion del sesgo. Es lo que hace util a la lista, asi que se lee antes
   que el parrafo y por eso va en su propia linea y con color. */
.sesgos .dir {
    display: inline-block;
    margin: 6px 0 8px;
    padding: 3px 9px;
    border: 1px solid rgba(245, 165, 36, .3);
    border-radius: var(--r-pill);
    background: rgba(245, 165, 36, .09);
    color: var(--warm);
    font-size: 11.5px;
    font-weight: 700;
}

.sesgos p {
    margin: 0;
}

/* ---------------- falsabilidad ---------------- */
/* La seccion que separa esta pagina de una nota de metodo normal. Va marcada
   con un borde propio porque es lo que hay que poder enlazar y citar. */
.falsable {
    border-color: var(--accent-line);
    box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 59, 70, .06);
}

.condiciones {
    margin: 18px 0 0;
    padding-left: 0;
    list-style: none;
    counter-reset: cond;
}

.condiciones>li {
    position: relative;
    counter-increment: cond;
    padding: 16px 0 16px 46px;
    border-top: 1px solid var(--line-soft);
}

.condiciones>li:first-child {
    border-top: 0;
}

.condiciones>li::before {
    content: counter(cond);
    position: absolute;
    left: 0;
    top: 18px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--accent-line);
    background: var(--accent-dim);
    color: #ffc9cc;
    font-size: 13px;
    font-weight: 800;
}

.condiciones h3 {
    margin: 4px 0 10px;
    font-size: 14.5px;
}

/* "No medido todavia". Tiene que verse que es un estado y no una conclusion:
   publicar la condicion es el compromiso, inventar el resultado seria lo
   contrario de lo que defiende esta pagina. */
.pendiente {
    margin-top: 10px !important;
    padding: 9px 12px;
    border-left: 2px solid var(--warm);
    background: rgba(245, 165, 36, .06);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: 12.5px !important;
}

/* ---------------- movil ---------------- */
@media (max-width: 760px) {

    .metodo-cols {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .condiciones>li {
        padding-left: 0;
        padding-top: 46px;
    }

    .condiciones>li::before {
        top: 8px;
    }
}

/* ---------------- los tres escalones de la fecha ---------------- */
/* Es una lista NUMERADA y no una tabla porque lo que hay que leer es el ORDEN:
   se usa la primera de las tres que exista. Una tabla las pondria al mismo
   nivel, que es justo lo contrario de lo que dice la regla. */
.escalones {
    margin: 14px 0 14px;
    padding-left: 0;
    list-style: none;
    counter-reset: paso;
}

.escalones>li {
    position: relative;
    counter-increment: paso;
    padding: 12px 0 12px 40px;
    border-top: 1px solid var(--line-soft);
}

.escalones>li:first-child {
    border-top: 0;
}

.escalones>li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 13px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--dim);
    font-size: 11.5px;
    font-weight: 800;
}

.escalones>li>b {
    font-size: 14px;
    color: var(--txt);
}

/* Cuantos sucesos se colocan por este escalon. Va pegado al titulo y no en un
   parrafo aparte porque es la cifra que convierte la explicacion en un dato:
   sin ella, el tercer escalon parece una nota al pie y no la advertencia que
   es. */
.escalones .cuantos {
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--dim);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* El ultimo escalon es el unico que no dice nada del suceso. Se marca en ambar,
   el mismo color con el que la pagina senala la direccion de un sesgo. */
.escalones>li:last-child::before {
    border-color: rgba(245, 165, 36, .35);
    background: rgba(245, 165, 36, .1);
    color: var(--warm);
}

.escalones>li:last-child .cuantos {
    border-color: rgba(245, 165, 36, .3);
    background: rgba(245, 165, 36, .09);
    color: var(--warm);
}

.escalones p {
    margin: 6px 0 0;
}

@media (max-width: 760px) {
    .escalones>li {
        padding-left: 34px;
    }
}