/* Constructor visual de formularios (App\Filament\Forms\Components\FormBuilder).
   CSS propio: el panel usa el CSS compilado de Filament, sin tema propio de Tailwind.
   Colores del panel: rgb(var(--primary-600)) etc. */

.fb {
    --fb-line: rgb(229 231 235);
    --fb-ink: rgb(17 24 39);
    --fb-muted: rgb(107 114 128);
    --fb-soft: rgb(249 250 251);
    --fb-accent: rgb(var(--primary-600));
    --fb-accent-soft: rgb(var(--primary-50));
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 900px) {
    .fb { grid-template-columns: 1fr; }
}

/* Paleta */
.fb-palette {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--fb-line);
    border-radius: .875rem;
    background: var(--fb-soft);
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}
.fb-palette__hint { margin: 0; font-size: .75rem; color: var(--fb-muted); }
.fb-palette__title {
    margin: 0 0 .5rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fb-muted);
}
.fb-palette__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; }
.fb-palette__list { display: flex; flex-direction: column; gap: .3rem; }
.fb-palette__empty { margin: 0; font-size: .8rem; color: var(--fb-muted); }
.fb-palette__more { margin-top: .5rem; }

.fb-chip {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .5rem .55rem;
    border: 1px solid var(--fb-line);
    border-radius: .55rem;
    background: #fff;
    color: var(--fb-ink);
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.15;
    text-align: left;
    cursor: grab;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.fb-chip:hover { border-color: var(--fb-accent); box-shadow: 0 2px 8px rgb(0 0 0 / .06); transform: translateY(-1px); }
.fb-chip:active { cursor: grabbing; }
.fb-chip:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 1px; }
.fb-chip__icon { width: 1rem; height: 1rem; flex: none; color: var(--fb-accent); }
.fb-chip--predefined { font-size: .76rem; }
.fb-chip--predefined .fb-chip__icon { color: rgb(var(--warning-500)); }

/* Lienzo */
.fb-canvas {
    min-height: 22rem;
    padding: 1.25rem 1.25rem 1.5rem;
    border: 1px solid var(--fb-line);
    border-radius: .875rem;
    background:
        radial-gradient(circle at 1px 1px, rgb(0 0 0 / .045) 1px, transparent 0) 0 0 / 18px 18px,
        #fff;
}
.fb-canvas__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem; }
.fb-canvas__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--fb-ink); }
.fb-canvas__sub { margin: .15rem 0 0; font-size: .78rem; color: var(--fb-muted); }
.fb-inline-icon { display: inline-block; width: .9rem; height: .9rem; vertical-align: -2px; }

.fb-list { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; display: flex; flex-direction: column; gap: .6rem; }

.fb-item {
    position: relative;
    padding: .9rem 1rem .85rem;
    border: 1px solid var(--fb-line);
    border-radius: .75rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.fb-item:hover { border-color: rgb(var(--primary-300)); box-shadow: 0 4px 14px rgb(0 0 0 / .06); }
.fb-item:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; }
.fb-item--selected { border-color: var(--fb-accent); box-shadow: 0 0 0 3px rgb(var(--primary-500) / .15); }
.fb-item--staff { background: repeating-linear-gradient(135deg, #fff 0 10px, var(--fb-soft) 10px 20px); }
.fb-item--drop-after { box-shadow: 0 3px 0 0 var(--fb-accent); }
.fb-item--section { background: var(--fb-accent-soft); border-color: rgb(var(--primary-200)); margin-top: .6rem; }
.fb-item--text_block { background: var(--fb-soft); }
.fb-drop-start { position: absolute; left: 0; right: 0; top: -.4rem; height: 3px; border-radius: 3px; background: var(--fb-accent); }

.fb-item__tools {
    position: absolute;
    top: .45rem;
    right: .45rem;
    display: flex;
    gap: .15rem;
    opacity: 0;
    transition: opacity .15s;
}
.fb-item:hover .fb-item__tools,
.fb-item:focus-within .fb-item__tools,
.fb-item--selected .fb-item__tools { opacity: 1; }
@media (hover: none) { .fb-item__tools { opacity: 1; } }

.fb-tool {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border: 1px solid var(--fb-line);
    border-radius: .45rem;
    background: #fff;
    color: var(--fb-muted);
    cursor: pointer;
}
.fb-tool:hover { color: var(--fb-ink); border-color: rgb(209 213 219); }
.fb-tool--handle { cursor: grab; }
.fb-tool--danger:hover { color: rgb(var(--danger-600)); border-color: rgb(var(--danger-300)); }
.fb-tool__icon { width: 1rem; height: 1rem; }

/* Vista previa de cada tipo */
.fb-label { display: block; margin: 0 5.5rem .4rem 0; font-size: .875rem; font-weight: 600; color: var(--fb-ink); }
.fb-req { color: rgb(var(--danger-600)); margin-left: .1rem; }
.fb-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 2.35rem;
    padding: .45rem .7rem;
    border: 1px solid rgb(209 213 219);
    border-radius: .5rem;
    background: #fff;
    font-size: .82rem;
    color: var(--fb-muted);
    pointer-events: none;
}
.fb-input--area { min-height: 4.5rem; }
.fb-input--file { justify-content: flex-start; border-style: dashed; background: var(--fb-soft); }
.fb-input__icon { width: 1rem; height: 1rem; flex: none; color: var(--fb-muted); }
.fb-placeholder { color: rgb(156 163 175); }
.fb-hint { margin: .35rem 0 0; font-size: .75rem; color: var(--fb-muted); }
.fb-warn { display: inline-block; margin-top: .2rem; font-size: .78rem; color: rgb(var(--warning-700)); }

.fb-options { display: flex; flex-direction: column; gap: .3rem; }
.fb-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--fb-ink); margin-right: 5.5rem; }
.fb-check--small { font-size: .82rem; font-weight: 400; margin-right: 0; }
.fb-box { width: 1rem; height: 1rem; flex: none; border: 1.5px solid rgb(156 163 175); border-radius: .25rem; background: #fff; display: inline-block; }

.fb-matrix { border-collapse: collapse; font-size: .75rem; color: var(--fb-ink); }
.fb-matrix th { font-weight: 600; color: var(--fb-muted); padding: .2rem .5rem; text-align: center; }
.fb-matrix td { padding: .25rem .5rem; border-top: 1px solid var(--fb-line); text-align: center; }
.fb-matrix td:first-child { text-align: left; }

.fb-section__title { margin: 0 5.5rem 0 0; font-size: 1.02rem; font-weight: 700; color: rgb(var(--primary-800)); }
.fb-section__text { margin: .3rem 0 0; font-size: .82rem; color: var(--fb-muted); }
.fb-textblock { margin-right: 5.5rem; font-size: .85rem; line-height: 1.5; color: rgb(55 65 81); }

.fb-tag { display: inline-block; margin-top: .4rem; font-size: .7rem; color: var(--fb-muted); }
.fb-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.fb-badge { padding: .1rem .45rem; border-radius: 999px; font-size: .68rem; font-weight: 600; border: 1px solid transparent; }
.fb-badge--primary { background: rgb(var(--primary-50)); color: rgb(var(--primary-700)); border-color: rgb(var(--primary-200)); }
.fb-badge--gray { background: rgb(243 244 246); color: rgb(55 65 81); border-color: rgb(229 231 235); }
.fb-badge--warning { background: rgb(var(--warning-50)); color: rgb(var(--warning-700)); border-color: rgb(var(--warning-200)); }
.fb-badge--info { background: rgb(var(--info-50)); color: rgb(var(--info-700)); border-color: rgb(var(--info-200)); }
.fb-badge--success { background: rgb(var(--success-50)); color: rgb(var(--success-700)); border-color: rgb(var(--success-200)); }

/* Vacío y zonas de soltar */
.fb-empty {
    max-width: 30rem;
    margin: 2.5rem auto;
    padding: 2rem 1.5rem;
    border: 2px dashed rgb(209 213 219);
    border-radius: 1rem;
    text-align: center;
    background: #fff;
    transition: border-color .15s, background .15s;
}
.fb-empty--active { border-color: var(--fb-accent); background: var(--fb-accent-soft); }
.fb-empty__icon { width: 2.25rem; height: 2.25rem; margin: 0 auto .5rem; color: var(--fb-accent); }
.fb-empty__title { margin: 0; font-weight: 700; color: var(--fb-ink); }
.fb-empty__text { margin: .35rem 0 0; font-size: .82rem; color: var(--fb-muted); }
.fb-drop-end {
    max-width: 46rem;
    margin: .6rem auto 0;
    padding: .8rem;
    border: 2px dashed var(--fb-accent);
    border-radius: .75rem;
    text-align: center;
    font-size: .8rem;
    color: var(--fb-accent);
    background: var(--fb-accent-soft);
}

.fb .fi-sortable-ghost { opacity: .35; }