/* Home Builder: estructura y controles compartidos por todos los temas. */
html.hb-edit-mode [data-hb-editable="1"] {
    border-radius: 4px;
    outline: 1px dashed rgba(255, 193, 7, 0.9);
    outline-offset: 2px;
}

html.hb-edit-mode [data-hb-component-index] {
    border: 2px solid rgba(255, 193, 7, 0.7);
    border-radius: 10px;
    position: relative;
}

.hb-component-toolbar {
    align-items: center;
    display: none;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 10px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
}

.hb-component-toolbar > * {
    flex: 0 0 auto;
}

.hb-component-toolbar .hb-container-display-controls {
    margin-left: 0.35rem;
    white-space: nowrap;
}

html.hb-edit-mode .hb-component-toolbar {
    display: flex;
}

.hb-edit-only {
    display: none !important;
}

html.hb-edit-mode .hb-edit-only {
    display: flex !important;
}

html.hb-edit-mode [data-hb-subcomponent-content] {
    cursor: pointer;
}

.hb-subcomponent-frame {
    min-height: 4rem;
}

.hb-subcomponent-frame--spacer {
    height: auto !important;
    min-height: 0 !important;
}

.hb-spacer {
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
}

.hb-action-button {
    align-self: flex-start;
    flex: 0 0 auto;
}

.hb-subcomponent-visual.text-center > .hb-action-button {
    align-self: center;
}

.hb-subcomponent-visual.text-end > .hb-action-button {
    align-self: flex-end;
}

html.hb-edit-mode .hb-spacer {
    background-color: rgba(255, 193, 7, 0.08);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(255, 193, 7, 0.16) 8px,
        rgba(255, 193, 7, 0.16) 16px
    );
    border: 1px dashed rgba(255, 193, 7, 0.9);
    cursor: pointer;
    position: relative;
}

html.hb-edit-mode .hb-spacer::after {
    color: #6c5700;
    content: 'Espaciador · ' attr(data-hb-spacer-height) ' px';
    font-size: 0.75rem;
    left: 50%;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

html.hb-edit-mode .hb-subcomponent-frame {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 1rem;
}

html.hb-edit-mode .hb-subcomponent-frame--spacer {
    padding: 0;
}

html.hb-edit-mode .hb-spacer-editor {
    padding: 1rem;
}

.hb-nested-container,
.hb-nested-cell {
    min-width: 0;
}

[data-hb-layout-direction="horizontal"] > [data-hb-layout-cell="1"] {
    display: flex;
    flex-direction: column;
}

[data-hb-layout-direction="horizontal"] > [data-hb-layout-cell="1"] > [data-hb-layout-direction="vertical"],
[data-hb-layout-direction="horizontal"] > [data-hb-layout-cell="1"] > .hb-subcomponent-frame {
    flex: 1 1 auto;
}

.hb-alignment-controls {
    display: none !important;
}

.hb-alignment-controls.hb-alignment-controls--editing {
    display: flex !important;
    gap: 0.2rem;
}

.hb-subcomponent-delete {
    display: none !important;
}

.hb-subcomponent-delete.hb-subcomponent-delete--editing {
    align-items: center;
    display: inline-flex !important;
    height: 30px;
    justify-content: center;
    padding: 0 !important;
    width: 30px;
}

.hb-subcomponent-delete svg,
.hb-subcomponent-edit-close svg {
    height: 16px;
    pointer-events: none;
    width: 16px;
}

.hb-alignment-controls .btn {
    align-items: center;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.hb-alignment-controls svg {
    height: 17px;
    pointer-events: none;
    width: 17px;
}

.hb-subcomponent-edit-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
}

.hb-subcomponent-edit-toolbar .hb-alignment-controls {
    flex: 0 0 auto;
    margin-right: auto;
}

.hb-subcomponent-edit-toolbar > .btn {
    flex: 0 0 auto;
}

/* El deposito de controles oculto no participa en el layout. */
.hb-subcomponent-controls,
html.hb-edit-mode .hb-subcomponent-controls {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.hb-subcomponent-edit-close {
    align-items: center;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    padding: 0 !important;
    width: 30px;
}