/* ============================================================
   sec_badges.css — Bloque de badges de seguridad
   ============================================================
   Aparece en las páginas públicas del Simulador DatomWorx
   (login, registro, instalar, acerca) para mostrar al visitante
   que el sitio ha pasado análisis públicos. Cada badge enlaza
   a la página oficial del servicio que lo verifica, así que
   el resultado es comprobable en vivo.

   Notas:
   • Diseñado para 2 badges en una sola fila. El contenedor padre
     debe tener un ancho útil de ≥ 380 px para que los dos quepan
     sin desbordarse. En cajas más estrechas, flex-wrap los baja
     a la siguiente línea automáticamente.
   • Cada página inserta el bloque con un `margin-bottom` negativo
     calculado en función del padding-bottom de su caja, para
     dejar los badges pegados al borde inferior con poco
     espacio en blanco debajo.
============================================================ */

.dw-sec-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 10px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 11.5px;
    color: #5a6577;
    line-height: 1.4;
}

.dw-sec-badges a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
    padding: 3px 7px;
    border-radius: 8px;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.dw-sec-badges a:hover {
    background: rgba(0,102,255,0.08);
    color: #0044aa;
}

.dw-sec-ico {
    font-size: 13px;
    line-height: 1;
}

.dw-sec-lbl {
    font-weight: 600;
}

/* "verificado" / "A+" en verde con fondo claro: estado positivo claro
   sin ser estridente. Mismo verde que usa la app para "ok". */
.dw-sec-ok {
    color: #16a34a;
    font-weight: 700;
    background: rgba(22,163,74,0.10);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 10.5px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.dw-sec-sep {
    color: #cbd2dd;
    font-size: 11px;
    user-select: none;
}

/* ── Variante sobre fondo oscuro ──
   Para casos donde el bloque no esté dentro de la caja blanca
   sino directamente sobre un gradiente azul (no la usamos
   actualmente, pero la dejamos lista para futuros usos). */
.dw-sec-badges.on-dark {
    color: rgba(255,255,255,0.78);
    border-top-color: rgba(255,255,255,0.18);
}
.dw-sec-badges.on-dark a:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.dw-sec-badges.on-dark .dw-sec-sep {
    color: rgba(255,255,255,0.3);
}
.dw-sec-badges.on-dark .dw-sec-ok {
    color: #4ade80;
    background: rgba(74,222,128,0.16);
}