/* Elementos de las guias que ayudan tanto a quien lee como a quien resume:
   resumen extractable, indice y anclas por seccion. */

/* Bloque "En resumen": hechos autocontenidos, faciles de citar */
.datos-clave {
    background: var(--brand-soft);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    border-radius: var(--radius);
    padding: 22px 26px;
    margin: 0 0 30px;
}
.datos-clave h2 {
    font-size: .74rem !important;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--brand-2);
    margin: 0 0 12px !important;
    font-weight: 800;
}
.datos-clave ul { margin: 0; padding-left: 20px; }
.datos-clave li {
    color: var(--text);
    font-size: .95rem;
    line-height: 1.62;
    margin-bottom: 8px;
}
.datos-clave li:last-child { margin-bottom: 0; }

/* Indice de la guia */
.indice {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin: 0 0 34px;
    background: var(--panel);
}
.indice h2 {
    font-size: .74rem !important;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--text-3);
    margin: 0 0 11px !important;
    font-weight: 800;
}
.indice ol { margin: 0; padding-left: 20px; }
.indice li { margin-bottom: 6px; font-size: .92rem; }
.indice li.nivel-h3 { padding-left: 16px; font-size: .87rem; opacity: .82; }
.indice a { color: var(--text-2); }
.indice a:hover { color: var(--brand-2); }

/* Ancla junto a cada titulo: aparece al pasar el raton */
.cuerpo-articulo h2, .cuerpo-articulo h3 { scroll-margin-top: 84px; }
.ancla {
    color: var(--text-3);
    text-decoration: none;
    opacity: 0;
    margin-left: 8px;
    font-weight: 400;
    transition: opacity .15s;
}
.cuerpo-articulo h2:hover .ancla,
.cuerpo-articulo h3:hover .ancla,
.ancla:focus { opacity: 1; }
.ancla:hover { color: var(--brand-2); text-decoration: none; }

/* Enlace a la version en texto, dentro de la linea de metadatos */
.meta-articulo a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.meta-articulo a:hover { color: var(--brand-2); }

/* ================================================================== *
 *  Micro-herramientas publicas
 * ================================================================== */

.util-sellos { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 0; }
.util-sellos span { display: inline-flex; align-items: center; gap: 6px;
                    font-size: .82rem; color: var(--text-3); font-weight: 600; }

.util-caja {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px; margin: 0 0 30px;
}
.util-caja label { font-size: .92rem; color: var(--text); margin-bottom: 9px; }
.util-caja textarea { min-height: 160px; }

.util-resultado {
    border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
    border-radius: var(--radius); padding: 26px; margin: 0 0 36px;
    background: color-mix(in srgb, var(--brand) 5%, var(--panel));
    scroll-margin-top: 80px;
}
.util-resultado h2 { font-size: 1.3rem !important; margin: 0 0 18px !important; }
.util-resultado h3 { margin: 26px 0 10px; }
.util-resultado table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.util-resultado th { text-align: left; padding: 9px 12px; background: var(--panel-2);
                     font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
                     color: var(--text-3); border-bottom: 1px solid var(--border); }
.util-resultado td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); }
.util-resultado td.num { text-align: right; font-variant-numeric: tabular-nums; }

.bloque-salida { margin: 0 0 20px; }
.bloque-salida textarea { margin-top: 9px; background: var(--bg); }

.grupo-resultado {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 13px 16px; margin-bottom: 9px; background: var(--panel);
}
.grupo-resultado summary { cursor: pointer; display: flex; align-items: center;
                           gap: 10px; flex-wrap: wrap; list-style: none; }
.grupo-resultado summary::-webkit-details-marker { display: none; }
.grupo-resultado pre.log { margin-top: 12px; }
.grupo-resultado .tabla-envoltura { margin-top: 12px; }

/* Veredicto del analizador de dominio */
.veredicto {
    display: flex; align-items: center; gap: 20px;
    border-radius: var(--radius); padding: 20px 24px; margin-bottom: 24px;
    border: 1px solid var(--border);
}
.veredicto.ok     { background: var(--ok-soft);     border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.veredicto.warn   { background: var(--warn-soft);   border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.veredicto.danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.veredicto-nota { font-size: 2.6rem; font-weight: 750; line-height: 1; letter-spacing: -.03em; }
.veredicto-nota small { font-size: 1rem; opacity: .55; font-weight: 600; }
.veredicto b { font-size: 1.06rem; }
.veredicto p { margin: 4px 0 0; color: var(--text-2); font-size: .92rem; }

.registros { display: grid; gap: 12px; }
.registro { border: 1px solid var(--border); border-radius: var(--radius-sm);
            padding: 15px 18px; background: var(--panel); }
.registro-cab { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.registro-valor { font-size: .84rem; color: var(--text-2); word-break: break-all;
                  background: var(--bg); padding: 9px 12px; border-radius: 6px; }
.registro-ayuda { font-size: .84rem; color: var(--text-3); margin-top: 8px; line-height: 1.6; }

/* Compartir */
.compartir { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
             border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
             padding: 18px 0; margin: 40px 0; }
.compartir-et { font-size: .88rem; font-weight: 650; color: var(--text-2); }
.compartir div { display: flex; gap: 8px; flex-wrap: wrap; }
.compartir a, .compartir button {
    font-size: .84rem; font-weight: 600; padding: 7px 14px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--panel); color: var(--text-2);
    cursor: pointer; font-family: inherit; transition: all .15s;
}
.compartir a:hover, .compartir button:hover {
    border-color: var(--brand); color: var(--brand-2); text-decoration: none;
}