/*
   Las pantallas de PROBAR: «Qué palabras se repiten», «Quiénes aparecen»,
   «Cómo lo dice cada diario». El molde de cuatro actos de las maquetas de
   audios/prototipos, en el idioma visual de la web (Space Grotesk / Source
   Sans 3 / JetBrains Mono, filetes finos, ámbar para el límite).
   Toma las variables del tema (theme.css): anda igual en claro y oscuro.
*/

.pb {
    --pb-linea: var(--hv2-border, #2a2b30);
    --pb-tenue: var(--hv2-text-muted, #9a978f);
    --pb-acento: var(--hv2-accent, #4dd4c0);
    --pb-aviso: #e0a020;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
}

.pb-wrap { max-width: 760px; margin: 0 auto; padding: 120px 22px 90px; }

.pb-masthead h1 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 .4rem;
}

.pb-tecnico, .pb-rotulo, .pb-acto-n {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pb-tenue);
    margin: 0 0 .6rem;
}

.pb-bajada { color: var(--pb-tenue); margin: 0 0 .8rem; max-width: 62ch; }
.pb-chica { color: var(--pb-tenue); font-size: .9rem; }
.pb-chica a { color: inherit; }

/* ---------- El selector de alcance ---------- */

.pb-alcance {
    position: sticky;
    top: 78px;
    z-index: 5;
    background: var(--hv2-bg, #0b0b0f);
    border-bottom: 1px solid var(--pb-linea);
    padding: 12px 0 10px;
    margin: 1.4rem 0 0;
}

.pb-alcance-ops { display: flex; gap: 6px; flex-wrap: wrap; }

.pb-alcance-ops button, .pb-perilla button, .pb-pasos button {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: none;
    color: var(--pb-tenue);
    border: 1px solid var(--pb-linea);
    border-radius: 999px;
    padding: 6px 13px;
    cursor: pointer;
}

.pb-alcance-ops button[aria-selected="true"], .pb-perilla button[aria-pressed="true"], .pb-pasos button[aria-pressed="true"] {
    color: var(--hv2-bg, #0b0b0f);
    background: var(--hv2-text, #ece9e4);
    border-color: var(--hv2-text, #ece9e4);
}

.pb-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .7rem;
    color: var(--pb-tenue);
    margin: .6rem 0 0;
}

.pb-meta em { font-style: normal; color: inherit; }

/* ---------- Pegar un texto / elegir una nota ---------- */

.pb-texto, .pb-elegir, .pb-preparando {
    border: 1px dashed var(--pb-linea);
    border-radius: 10px;
    padding: 1.2rem 1.3rem;
    margin: 1.6rem 0;
}

.pb-texto textarea, .pb-elegir input {
    width: 100%;
    font: inherit;
    font-size: .95rem;
    padding: .6rem .8rem;
    border: 1px solid var(--pb-linea);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    margin: .5rem 0;
}

.pb-boton {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--hv2-text, #ece9e4);
    color: var(--hv2-bg, #0b0b0f);
    border: 0;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
}

.pb-error { color: #e5484d; font-size: .9rem; margin: 0 0 .5rem; }

.pb-elegir ul { list-style: none; padding: 0; margin: .6rem 0 0; }
.pb-elegir li { border-top: 1px solid var(--pb-linea); }
.pb-elegir li button {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: .6rem 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: .6rem;
    align-items: baseline;
}
.pb-elegir li button:hover { color: var(--pb-acento); }

/* ---------- Los actos ---------- */

.pb-acto { border-top: 1px solid var(--pb-linea); margin-top: 3rem; padding-top: 1.6rem; }
.pb-acto-primero { border-top: 0; margin-top: 1.8rem; }

.pb-acto h2 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -.01em;
    margin: 0 0 .4rem;
}

.pb-caja { border: 1px solid var(--pb-linea); border-radius: 10px; padding: 1.1rem 1.2rem; margin-top: 1rem; }

.pb-aviso {
    border: 1px solid var(--pb-aviso);
    background: color-mix(in srgb, var(--pb-aviso) 9%, transparent);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin: .5rem 0 1rem;
}

.pb-aviso b, .pb-sirve b { font-family: 'Space Grotesk', system-ui, sans-serif; display: block; margin-bottom: .3rem; }
.pb-aviso p, .pb-sirve p { margin: 0; color: var(--pb-tenue); }
.pb-aviso button {
    margin-top: .8rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--hv2-text, #ece9e4);
    color: var(--hv2-bg, #0b0b0f);
    border: 0;
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
}

.pb-sirve {
    border: 1px solid #30a46c;
    background: color-mix(in srgb, #30a46c 9%, transparent);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin: .5rem 0 1rem;
}

.pb-nube { line-height: 2.1; margin: 0 0 .6rem; }
.pb-nube .pb-tocable { margin: 0 .55rem .2rem 0; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 500; }

.pb-tocable {
    display: inline;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--pb-linea);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.pb-tocable:hover { border-bottom-color: var(--pb-acento); color: var(--pb-acento); }
.pb-tocable-abierta { border-bottom: 2px solid var(--pb-acento); color: var(--pb-acento); }

.pb-pasos, .pb-perilla { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem; }

.pb-paso { min-height: 100px; }
.pb-cruda { border-left: 3px solid var(--pb-linea); padding-left: 14px; margin: 0; }

.pb-fichas { margin: 0; line-height: 2; }
.pb-ficha {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .8rem;
    border: 1px solid var(--pb-linea);
    border-radius: 5px;
    padding: 1px 7px;
    margin: 0 5px 4px 0;
}
.pb-ficha-vacia { opacity: .32; text-decoration: line-through; }

.pb-pierde {
    margin: 1rem 0 0;
    color: var(--pb-tenue);
    font-size: .9rem;
    border-top: 1px dashed var(--pb-linea);
    padding-top: .8rem;
}

.pb-tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pb-tabla td { padding: 6px 0; border-bottom: 1px solid var(--pb-linea); vertical-align: middle; }
.pb-barra-celda { width: 42%; }
.pb-barra { display: block; height: 5px; background: var(--pb-acento); opacity: .6; border-radius: 3px; }
.pb-n { text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .85rem; color: var(--pb-tenue); width: 70px; }

.pb-red { max-width: 100%; height: auto; display: block; margin: 0 auto; color: var(--hv2-text, inherit); }

/* ---------- Quiénes: las tres columnas ---------- */

.pb-columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pb-col h3 { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 1rem; margin: 0 0 .4rem; }
.pb-col ol { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.pb-col li { display: flex; gap: .5rem; align-items: baseline; border-top: 1px solid var(--pb-linea); padding: .35rem 0; }
.pb-col li em { font-style: normal; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .78rem; color: var(--pb-tenue); margin-left: auto; }
.pb-col li small { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pb-aviso); }
.pb-fuera > span { text-decoration: line-through; opacity: .45; }

/* ---------- Diarios ---------- */

.pb-chips { margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.pb-chip { border: 1px solid var(--pb-linea) !important; border-radius: 999px; padding: 3px 10px !important; font-size: .9rem; }

.pb-diarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.pb-diario { border: 1px solid var(--pb-linea); border-top: 3px solid var(--c); border-radius: 10px; padding: .9rem 1rem; }
.pb-diario-nombre { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; margin: 0 0 .5rem; display: flex; gap: .5rem; align-items: baseline; }
.pb-propias { margin: 0 0 .6rem; line-height: 1.9; display: flex; flex-wrap: wrap; gap: 0 .7rem; }
.pb-tono { display: flex; align-items: center; gap: .5rem; margin: 0; }
.pb-tono-linea { flex: 1; position: relative; height: 4px; background: var(--pb-linea); border-radius: 2px; }
.pb-tono-linea span { position: absolute; top: -4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--c); }

.pb-veredicto { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; margin: .8rem 0 0; }
.pb-si { color: #30a46c; }
.pb-no { color: #e5484d; }

.pb-cuadrito { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: middle; }

/* ---------- Dónde lo dicen ---------- */

.pb-donde { border: 1px solid var(--pb-linea); border-left: 3px solid var(--pb-acento); border-radius: 8px; padding: .9rem 1.1rem; margin-top: 1rem; }
.pb-donde-top { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .5rem; }
.pb-cerrar { background: none; border: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pb-tenue); cursor: pointer; }
.pb-frases { list-style: none; padding: 0; margin: 0; }
.pb-frases li { border-top: 1px solid var(--pb-linea); padding: .6rem 0; }
.pb-frase-diario { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .2rem; }
.pb-frase-texto { margin: 0 0 .2rem; }
.pb-frase-texto mark { background: color-mix(in srgb, var(--pb-acento) 30%, transparent); color: inherit; padding: 0 2px; }

/* ---------- El límite y las puertas ---------- */

.pb-limite {
    border: 1px solid var(--pb-linea);
    border-left: 3px solid var(--pb-aviso);
    border-radius: 8px;
    padding: 1rem 1.1rem;
}

.pb-como { margin-top: 1.2rem; border: 1px dashed var(--pb-linea); border-radius: 10px; padding: .8rem 1.1rem; }
.pb-como summary { cursor: pointer; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 500; }
.pb-como summary .pb-tecnico { display: block; margin: .2rem 0 0; }
.pb-como-cuerpo { margin-top: .8rem; }

.pb-puertas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.4rem; }
.pb-puerta { flex: 1 1 260px; border: 1px solid var(--pb-linea); border-radius: 10px; padding: 1rem 1.1rem; text-decoration: none; color: inherit; }
.pb-puerta:hover { border-color: var(--pb-acento); color: inherit; }
.pb-puerta b { font-family: 'Space Grotesk', system-ui, sans-serif; display: block; margin-bottom: .2rem; }
.pb-puerta span { color: var(--pb-tenue); font-size: .9rem; }

@media (max-width: 640px) {
    .pb-wrap { padding: 100px 18px 70px; }
    .pb-alcance { top: 66px; }
    .pb-columnas { grid-template-columns: 1fr; }
}