/* ------------------------------------------------------------------
 * Reglas de bloqueo de campos: constructor (modal de config) + estado
 * bloqueado y banner en el sidenav de la tarjeta.
 * Usa tokens de tema con fallback inline (frescoTheme no define el contrato).
 * ------------------------------------------------------------------ */

/* ===== Constructor de reglas (#rulesConfigTab) ===== */
.fr-builder { padding: 8px 4px 24px; }
.fr-builder-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.fr-builder-title { margin: 0; font-weight: 600; color: var(--text-primary, #263238); }
.fr-builder-sub { margin: 2px 0 0; font-size: .82rem; color: var(--text-muted, #78909c); }
.fr-add-rule { background: var(--accent-primary, #1976d2) !important; color: #fff !important; }

.fr-rules-list { display: flex; flex-direction: column; gap: 16px; }

.fr-rule {
    border: 1px solid var(--border-default, #e0e0e0);
    border-radius: 10px;
    background: var(--bg-elevated, #ffffff);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
}
.fr-rule-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.fr-name {
    flex: 1; border: none !important; border-bottom: 1px solid var(--border-subtle, #cfd8dc) !important;
    font-size: 1rem !important; font-weight: 600; margin: 0 !important; height: 2.2rem !important;
    color: var(--text-primary, #263238) !important; background: transparent !important;
}
.fr-name:focus { border-bottom: 2px solid var(--accent-primary, #1976d2) !important; box-shadow: none !important; }
.fr-rule-delete { cursor: pointer; color: var(--text-muted, #90a4ae); display: flex; }
.fr-rule-delete:hover { color: #e53935; }

.fr-section { margin-top: 14px; }
.fr-label {
    display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
    font-weight: 700; color: var(--text-secondary, #546e7a); margin-bottom: 8px;
}
.fr-sub-label { font-size: .75rem; color: var(--text-muted, #90a4ae); margin: 8px 0 4px; }
.fr-mode-row { margin-bottom: 6px; }
.fr-mode-row label span { font-size: .85rem; color: var(--text-primary, #37474f); }

/* Chips de estado / lista */
.fr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-chip {
    --fr-chip-color: #607d8b;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 16px; cursor: pointer; user-select: none;
    font-size: .8rem; line-height: 1.2;
    border: 1px solid var(--border-default, #cfd8dc);
    background: var(--bg-nested, #f5f7f8);
    color: var(--text-secondary, #546e7a);
    transition: all .12s ease;
}
.fr-chip i.material-icons { font-size: 15px; }
.fr-chip:hover { border-color: var(--fr-chip-color); }
.fr-chip.selected {
    background: var(--fr-chip-color);
    border-color: var(--fr-chip-color);
    color: #fff;
}

/* Campos a bloquear — toggles tipo pill (sin checkboxes de Materialize) */
.fr-field-grid {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px;
}
.fr-field-toggle {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none;
    padding: 5px 11px; border-radius: 16px; font-size: .82rem; line-height: 1.2;
    border: 1px solid var(--border-default, #cfd8dc);
    background: var(--bg-nested, #f5f7f8);
    color: var(--text-secondary, #546e7a);
    transition: all .12s ease;
}
.fr-field-toggle .fr-toggle-ico { font-size: 15px; display: none; }
.fr-field-toggle:hover { border-color: var(--accent-primary, #1976d2); }
.fr-field-toggle.selected {
    background: var(--accent-primary, #1976d2);
    border-color: var(--accent-primary, #1976d2);
    color: #fff;
}
.fr-field-toggle.selected .fr-toggle-ico { display: inline; }
.fr-field-grid.fr-toggles-disabled { opacity: .45; pointer-events: none; filter: grayscale(.4); }

/* "Bloquear todo" y "Bloquear comentarios" como filas-switch */
.fr-lockall-toggle, .fr-lockcomments-toggle {
    display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
    padding: 10px 12px; border-radius: 8px; margin-bottom: 8px;
    border: 1px solid var(--border-default, #cfd8dc);
    background: var(--bg-nested, #f5f7f8);
    transition: all .12s ease;
}
.fr-lockcomments-toggle { margin-top: 8px; margin-bottom: 0; }
.fr-lockall-toggle > i.material-icons, .fr-lockcomments-toggle > i.material-icons {
    font-size: 20px; color: var(--text-muted, #90a4ae);
}
.fr-lockall-text { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.fr-lockall-text strong { color: var(--text-primary, #263238); font-size: .9rem; }
.fr-lockall-text span { font-size: .78rem; color: var(--text-muted, #90a4ae); }
.fr-lockcomments-toggle > span:not(.fr-switch) { flex: 1; font-size: .88rem; color: var(--text-primary, #37474f); }
/* Perilla tipo switch */
.fr-switch {
    width: 38px; height: 20px; border-radius: 20px; position: relative; flex-shrink: 0;
    background: var(--border-default, #cfd8dc); transition: background .15s ease;
}
.fr-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; transition: transform .15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.fr-lockall-toggle.selected, .fr-lockcomments-toggle.selected {
    border-color: var(--accent-primary, #1976d2);
    background: var(--accent-active-bg, #e3f2fd);
}
.fr-lockall-toggle.selected > i.material-icons, .fr-lockcomments-toggle.selected > i.material-icons {
    color: var(--accent-primary, #1976d2);
}
.fr-lockall-toggle.selected .fr-switch, .fr-lockcomments-toggle.selected .fr-switch {
    background: var(--accent-primary, #1976d2);
}
.fr-lockall-toggle.selected .fr-switch::after, .fr-lockcomments-toggle.selected .fr-switch::after {
    transform: translateX(18px);
}

.fr-message { min-height: 2.6rem; }

.fr-preview {
    margin-top: 12px; padding: 8px 12px; border-radius: 8px;
    background: var(--accent-active-bg, #e3f2fd);
    color: var(--text-secondary, #37474f);
    font-size: .82rem; display: flex; align-items: center; gap: 6px;
}
.fr-preview i.material-icons { font-size: 16px; opacity: .7; }
.fr-preview em { font-style: normal; font-weight: 600; }

/* ===== Estado bloqueado en el sidenav ===== */
.fr-lock-banner {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 8px; padding: 10px 14px; border-radius: 8px;
    background: #fff3e0; border-left: 4px solid #fb8c00; color: #6d4c00;
}
.fr-lock-banner i.material-icons { font-size: 20px; color: #fb8c00; }
.fr-lock-banner-text { display: flex; flex-direction: column; line-height: 1.25; }
.fr-lock-banner-text strong { font-size: .9rem; }
.fr-lock-banner-text span { font-size: .82rem; opacity: .9; }

.fr-field-locked,
.fr-field-locked + label {
    opacity: .65 !important;
}
.fr-field-locked {
    cursor: not-allowed !important;
    background-color: var(--bg-nested, #f0f2f3) !important;
}
.fr-quill-locked {
    position: relative;
    opacity: .7;
}
.fr-quill-locked .ql-editor { cursor: not-allowed; background: var(--bg-nested, #f0f2f3); }

/* Botones/switches/etiquetas deshabilitados en bloqueo total (excepto copiar enlace) */
.fr-btn-locked {
    pointer-events: none !important;
    opacity: .5 !important;
    cursor: not-allowed !important;
    filter: grayscale(1);
}

/* Temas oscuros: banner un poco más suave */
body[data-theme="black"] .fr-lock-banner,
body[data-theme="medusa"] .fr-lock-banner,
body[data-theme="nord"] .fr-lock-banner {
    background: rgba(251, 140, 0, .12); color: #ffcc80; border-left-color: #fb8c00;
}
body[data-theme="black"] .fr-preview,
body[data-theme="medusa"] .fr-preview,
body[data-theme="nord"] .fr-preview {
    background: var(--bg-nested, rgba(255,255,255,.06));
}