/* =============================================================================
   SABORA · MÓDULO DE WHATSAPP
   -----------------------------------------------------------------------------
   Extraído de los bloques <style> que vivían dentro de los .razor. Se conserva
   el origen de cada tramo para poder seguir migrándolo a componentes.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Pages/Whatsapp/WhatsappIaConfiguracion.razor
   -------------------------------------------------------------------------- */
    .wa-ia-card-box {
        background: var(--sb-neutral-0);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 18px;
        padding: 24px;
        box-shadow: 0 2px 10px rgba(18, 26, 44, .04);
        margin-bottom: 20px;
    }
    .wa-ia-card-box h3 {
        margin: 0 0 6px;
        font-size: 0.8rem;
        font-weight: 900;
        color: var(--sb-neutral-500);
        text-transform: uppercase;
        letter-spacing: .6px;
    }
    .wa-ia-card-box .sub {
        margin: 0 0 18px;
        color: var(--sb-neutral-400);
        font-size: 0.84rem;
        line-height: 1.5;
    }
    .wa-toggle-group {
        display: flex;
        gap: 10px;
    }
    .wa-toggle-btn {
        flex: 1;
        height: 44px;
        border-radius: 12px;
        border: 1px solid var(--sb-neutral-200);
        background: var(--sb-neutral-0);
        color: var(--sb-neutral-500);
        font-weight: 700;
        font-size: 0.86rem;
        cursor: pointer;
        transition: all .15s ease;
    }
    .wa-toggle-btn.activo {
        background: var(--sb-green-600);
        border-color: var(--sb-green-600);
        color: var(--sb-neutral-0);
    }
    .wa-barra-conf {
        display: flex;
        height: 32px;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid var(--sb-neutral-200);
        margin: 8px 0 10px;
    }
    .wa-barra-conf .zona {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.68rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .3px;
        white-space: nowrap;
        overflow: hidden;
        transition: flex-basis .2s ease;
    }
    .wa-barra-conf .zona.aparta { background: var(--sb-red-100); color: var(--sb-red-800); }
    .wa-barra-conf .zona.revisa { background: var(--sb-amber-100); color: var(--sb-amber-700); }
    .wa-barra-conf .zona.sola   { background: var(--sb-green-100); color: var(--sb-green-800); }

    .wa-regla-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        border: 1px solid var(--sb-neutral-200);
        border-radius: 14px;
        margin-bottom: 12px;
        background: var(--sb-neutral-50);
    }
    .wa-regla-item.inactiva { opacity: .55; }
    .wa-sugerencia-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
        border: 1px solid var(--sb-neutral-200);
        border-radius: 14px;
        margin-bottom: 10px;
        background: var(--sb-neutral-0);
        cursor: pointer;
        transition: all .15s ease;
    }
    .wa-sugerencia-item:hover { border-color: #86efac; background: #f0fdf4; }
    .wa-sugerencia-item.marcada { border-color: var(--sb-green-600); background: #f0fdf4; }
    .wa-check-box {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        border-radius: 6px;
        margin-top: 1px;
        border: 2px solid var(--sb-neutral-300);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--sb-neutral-0);
        font-size: 0.68rem;
        transition: all .15s;
    }
    .wa-sugerencia-item.marcada .wa-check-box { background: var(--sb-green-600); border-color: var(--sb-green-600); }

/* ----------------------------------------------------------------------------
   Pages/Whatsapp/WhatsappIaContactoEditar.razor
   -------------------------------------------------------------------------- */
    .wa-edit-card {
        background: var(--sb-neutral-0);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 18px;
        padding: 24px;
        box-shadow: 0 2px 10px rgba(18, 26, 44, .04);
        margin-bottom: 20px;
    }
    .wa-edit-card h3 {
        margin: 0 0 6px;
        font-size: 0.8rem;
        font-weight: 900;
        color: var(--sb-neutral-500);
        text-transform: uppercase;
        letter-spacing: .6px;
    }
    .wa-edit-card .sub {
        margin: 0 0 20px;
        color: var(--sb-neutral-400);
        font-size: 0.84rem;
    }
    .wa-toggle-group {
        display: flex;
        gap: 10px;
    }
    .wa-toggle-btn {
        flex: 1;
        height: 44px;
        border-radius: 12px;
        border: 1px solid var(--sb-neutral-200);
        background: var(--sb-neutral-0);
        color: var(--sb-neutral-500);
        font-weight: 700;
        font-size: 0.86rem;
        cursor: pointer;
        transition: all .15s ease;
    }
    .wa-toggle-btn.activo {
        background: var(--sb-green-600);
        border-color: var(--sb-green-600);
        color: var(--sb-neutral-0);
    }

/* ----------------------------------------------------------------------------
   Pages/Whatsapp/WhatsappMensajeEditar.razor
   -------------------------------------------------------------------------- */
    .wa-edit-card {
        background: var(--sb-neutral-0);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 18px;
        padding: 24px;
        box-shadow: 0 2px 10px rgba(18, 26, 44, .04);
        margin-bottom: 20px;
    }
    .wa-edit-card h3 {
        margin: 0 0 6px;
        font-size: 0.8rem;
        font-weight: 900;
        color: var(--sb-neutral-500);
        text-transform: uppercase;
        letter-spacing: .6px;
    }
    .wa-edit-card .sub {
        margin: 0 0 20px;
        color: var(--sb-neutral-400);
        font-size: 0.84rem;
    }
    .wa-toggle-group {
        display: flex;
        gap: 10px;
    }
    .wa-toggle-btn {
        flex: 1;
        height: 44px;
        border-radius: 12px;
        border: 1px solid var(--sb-neutral-200);
        background: var(--sb-neutral-0);
        color: var(--sb-neutral-500);
        font-weight: 700;
        font-size: 0.86rem;
        cursor: pointer;
        transition: all .15s ease;
    }
    .wa-toggle-btn.activo {
        background: var(--sb-green-600);
        border-color: var(--sb-green-600);
        color: var(--sb-neutral-0);
    }
    .wa-dia-btn {
        min-width: 48px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid var(--sb-neutral-200);
        background: var(--sb-neutral-0);
        color: var(--sb-neutral-500);
        font-weight: 700;
        font-size: 0.82rem;
        cursor: pointer;
        transition: all .15s ease;
    }
    .wa-dia-btn.activo {
        background: var(--sb-green-600);
        border-color: var(--sb-green-600);
        color: var(--sb-neutral-0);
    }