/* =========================================================
   RENDERSET REPORTING
   Estilos del editor.

   Los del documento están en Renderset.Blazor/wwwroot/css/report-document.css
   y los enlaza App.razor como _content/Renderset.Blazor/...
   ========================================================= */


/* =========================================================
   2. REPORT EDITOR - LAYOUT
   ========================================================= */

/* ---------- Designer page ---------- */
.report-designer-page {
    width: 100%;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}


/*
   El editor es una pantalla completa.
   Usamos 100dvh en lugar de calc(100vh - Xpx) para evitar
   alturas mágicas y diferencias entre viewport/layout.
*/

.report-editor {
    /* El ancho de la barra lateral lo escribe el divisor por JS sobre este
       mismo elemento, y se recuerda en localStorage. */
    --report-editor-sidebar-width: 360px;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, var(--report-editor-sidebar-width)) auto minmax(0, 1fr);
    overflow: hidden;
    background: #eef2f4;
}

    .report-editor.is-resizing {
        cursor: col-resize;
        user-select: none;
    }

/* ---------- Divisor ---------- */

.report-editor-resizer {
    width: 6px;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: #e6ecef;
    cursor: col-resize;
    /* Sin esto el navegador se queda el gesto en táctil y no llega
       el pointermove. */
    touch-action: none;
}

    .report-editor-resizer:hover,
    .report-editor.is-resizing .report-editor-resizer {
        background: #cdd9df;
    }

    .report-editor-resizer span {
        width: 2px;
        height: 28px;
        border-radius: 2px;
        background: #9fb0b9;
        pointer-events: none;
    }

.report-editor-sidebar {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    background: #ffffff;
    border-right: 1px solid #d8e1e7;
}

.report-editor-preview {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    overscroll-behavior: none;
}

/* =========================================================
   3. SIDEBAR HEADER / ACTIONS / TABS
   ========================================================= */

/* ---------- Header ---------- */

.report-editor-header {
    padding: 20px;
    border-bottom: 1px solid #e7ecef;
}

    .report-editor-header h2 {
        margin: 2px 0 0;
        color: #1f2d35;
        font-size: 20px;
    }

.report-editor-eyebrow {
    color: #72818a;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ---------- Configuration actions ---------- */

.report-editor-actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.report-editor-action-primary {
    background: #00285a;
    border-color: #00285a;
    color: #ffffff;
}

    .report-editor-action-primary:hover {
        background: #003b82;
        border-color: #003b82;
        color: #ffffff;
    }

.report-editor-action-button {
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8e1e7;
    border-radius: 6px;
    background: #ffffff;
    color: #52636c;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .report-editor-action-button:hover {
        background: #f1f5f7;
        border-color: #bdcbd2;
        color: #25313a;
    }

.report-editor-import-button {
    position: relative;
    overflow: hidden;
}

    .report-editor-import-button input[type="file"] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

/* ---------- Tabs ---------- */

.report-editor-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    margin: 12px 12px 0;
    padding: 3px;
    border-radius: 9px;
    background: #eef3f6;
}

.report-editor-tab {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6b7c85;
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.15;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .report-editor-tab i {
        font-size: 13px;
    }

    .report-editor-tab span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .report-editor-tab:hover {
        color: #25313a;
    }

    .report-editor-tab.active {
        background: #fff;
        color: #00285a;
        box-shadow: 0 1px 3px rgba(0, 40, 90, .14);
    }

.report-editor-tab-hint {
    margin: 0;
    padding: 8px 16px 10px;
    border-bottom: 1px solid #e7ecef;
    color: #7a8991;
    font-size: 11px;
    line-height: 1.4;
}

/* ---------- Guardar ---------- */

.report-editor-save {
    position: relative;
}

.report-editor-save-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f2b84b;
}


/* =========================================================
   4. EDITOR CONTENT
   ========================================================= */

/* ---------- Blocks ---------- */

.report-editor-block {
    padding: 16px;
    border-bottom: 1px solid #e7ecef;
}

.report-editor-block-title {
    margin-bottom: 12px;
    color: #25313a;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ---------- Sections ---------- */

.report-editor-section {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid #d8e1e7;
    border-radius: 8px;
    background: #ffffff;
}

    .report-editor-section:last-child {
        margin-bottom: 0;
    }

.report-editor-section-header {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #f4f7f8;
    border-bottom: 1px solid #e5eaed;
}

    .report-editor-section-header .report-editor-toggle-row {
        flex: 1;
        min-width: 0;
    }

.report-editor-section-name {
    font-weight: 700;
}

.report-editor-section-content {
    padding: 10px;
    background: #f8fafb;
}

.report-editor-subtitle {
    margin: 14px 0 7px;
    color: #74838b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.report-editor-section-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
}

.report-editor-section-order-button {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #71828a;
    cursor: pointer;
    font-size: 10px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .report-editor-section-order-button:hover:not(:disabled) {
        background: #e8eef1;
        border-color: #d5dfe4;
        color: #173d4f;
    }

    .report-editor-section-order-button:disabled {
        opacity: .25;
        cursor: default;
    }

/* ---------- Section layout selector ---------- */
.report-layout-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 10px;
    border: 1px solid #e3e9ec;
    border-radius: 6px;
    background: #fff;
}

/* En el compositor ya va dentro de su propio bloque con etiqueta. */
.report-composer-field-group .report-layout-picker {
    margin-bottom: 0;
    padding: 0;
    border: 0;
}

.report-layout-picker-label,
.report-layout-picker-caption {
    color: #6e7e86;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.report-layout-picker-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 2px;
    border-radius: 6px;
    background: #eef3f6;
}

    .report-layout-picker-modes button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 5px 8px;
        border: 0;
        border-radius: 5px;
        background: transparent;
        color: #5d6f78;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    }

        .report-layout-picker-modes button i {
            font-size: 10px;
        }

        .report-layout-picker-modes button:hover {
            color: #173d4f;
        }

        .report-layout-picker-modes button.is-active {
            background: #fff;
            color: #173d4f;
            box-shadow: 0 1px 2px rgba(23, 61, 79, .14);
        }

.report-layout-picker-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

    .report-layout-picker-columns .report-layout-picker-caption {
        margin-right: auto;
    }

.report-layout-picker-stepper {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #d8e1e7;
    border-radius: 6px;
    background: #f8fafb;
}

    .report-layout-picker-stepper button {
        width: 24px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #5d6f78;
        font-size: 9px;
        cursor: pointer;
    }

        .report-layout-picker-stepper button:hover:not(:disabled) {
            background: #edf2f4;
            color: #173d4f;
        }

        .report-layout-picker-stepper button:disabled {
            opacity: .35;
            cursor: default;
        }

    .report-layout-picker .report-layout-picker-stepper input {
        width: 34px;
        min-width: 0;
        padding: 4px 0;
        border: 0;
        border-left: 1px solid #e3e9ec;
        border-right: 1px solid #e3e9ec;
        border-radius: 0;
        background: #fff;
        color: #1f2d33;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
        box-shadow: none;
        -moz-appearance: textfield;
        appearance: textfield;
    }

        .report-layout-picker .report-layout-picker-stepper input::-webkit-outer-spin-button,
        .report-layout-picker .report-layout-picker-stepper input::-webkit-inner-spin-button {
            margin: 0;
            -webkit-appearance: none;
        }

.report-layout-picker-presets {
    display: inline-flex;
    gap: 3px;
}

    .report-layout-picker-presets button {
        min-width: 22px;
        height: 22px;
        padding: 0 5px;
        border: 1px solid #e0e7eb;
        border-radius: 5px;
        background: #fff;
        color: #5d6f78;
        font-size: 10.5px;
        font-weight: 700;
        cursor: pointer;
    }

        .report-layout-picker-presets button:hover {
            border-color: #b9c8d0;
            color: #173d4f;
        }

        .report-layout-picker-presets button.is-active {
            border-color: #173d4f;
            background: #173d4f;
            color: #fff;
        }

.report-layout-picker-preview {
    display: grid;
    gap: 3px;
}

    .report-layout-picker-preview span {
        height: 10px;
        border-radius: 2px;
        background: #dbe5ea;
    }

.report-editor-section-option {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid #e3e9ec;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

    .report-editor-section-option input {
        width: 14px;
        height: 14px;
        margin: 0;
        flex: 0 0 auto;
        accent-color: #2f6b4f;
        cursor: pointer;
    }

    .report-editor-section-option span {
        color: #6e7e86;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .report-editor-section-option:hover {
        border-color: #d3dde2;
    }

/* ---------- Collapse / expand ---------- */

.report-editor-collapse-button {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6f7d85;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .report-editor-collapse-button:hover {
        background: #e9eef1;
        color: #25313a;
    }

.report-editor-chevron {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
}

    .report-editor-chevron.expanded {
        transform: rotate(225deg);
    }


/* =========================================================
   4b. SECCIONES ANIDADAS
   ========================================================= */

/* Los chips van en su propia línea, debajo del título. En una barra lateral
   estrecha, compartir línea con el nombre y los botones dejaba el nombre sin
   ancho y el texto se salía encima de los chips. */
.report-editor-section-header {
    flex-wrap: wrap;
    row-gap: 4px;
}

    .report-editor-section-header .report-editor-section-name {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.report-editor-section-chips {
    order: 3;
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.report-editor-section-chip {
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef3f6;
    color: #4d626d;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

    .report-editor-section-chip.is-repeated {
        background: #e7f1ea;
        color: #2f6b4f;
    }

    .report-editor-section-chip.is-table {
        background: #eaeef7;
        color: #3c4f86;
    }

    .report-editor-section-chip.is-nested {
        background: #f3eef7;
        color: #63497c;
    }

    .report-editor-section-chip.is-custom {
        background: #fbf1e6;
        color: #8a5a1f;
    }

    .report-editor-section-chip.is-path {
        border: 1px solid #e2e9ec;
        background: #fbfcfd;
        color: #6e7e86;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
    }

/* El rail de la izquierda es lo que hace que un albarán se lea como algo
   contenido en la factura y no como otra sección suelta. */
.report-editor-subsections {
    margin-top: 8px;
    padding-left: 10px;
    border-left: 2px solid #d5e0e6;
}

.report-editor-section.is-depth-1,
.report-editor-section.is-depth-2,
.report-editor-section.is-depth-3 {
    border-color: #d2dde3;
    box-shadow: none;
}

    .report-editor-section.is-depth-1 > .report-editor-section-header,
    .report-editor-section.is-depth-2 > .report-editor-section-header,
    .report-editor-section.is-depth-3 > .report-editor-section-header {
        padding: 8px 10px;
        background: #eff4f6;
    }

    .report-editor-section.is-depth-1 > .report-editor-section-header .report-editor-section-name,
    .report-editor-section.is-depth-2 > .report-editor-section-header .report-editor-section-name,
    .report-editor-section.is-depth-3 > .report-editor-section-header .report-editor-section-name {
        font-size: 12px;
    }

.report-editor-section.is-repeated > .report-editor-section-header {
    border-left: 3px solid #2f6b4f;
}

.report-editor-section.is-table > .report-editor-section-header {
    border-left: 3px solid #3c4f86;
}


/* =========================================================
   5. FIELD / COLUMN CARDS
   ========================================================= */

.report-editor-item {
    margin-bottom: 6px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e1e7eb;
    border-radius: 7px;
    background: #fff;
}

    .report-editor-item:last-child {
        margin-bottom: 0;
    }

    .report-editor-item:hover {
        border-color: #c3d0d7;
        background: #fbfcfd;
        box-shadow: 0 1px 3px rgba(37, 49, 58, .04);
    }

.report-editor-item-disabled {
    background: #f6f8f9;
    border-color: #e5eaed;
}

    .report-editor-item-disabled:hover {
        background: #f6f8f9;
        border-color: #d9e0e4;
        box-shadow: none;
    }

    .report-editor-item-disabled .report-editor-toggle-label {
        color: #89969d;
    }

.report-editor-item-header {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
}

.report-editor-item-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.report-editor-item-title {
    cursor: pointer;
}

.report-editor-item-expand-button {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #71828a;
    cursor: pointer;
}

    .report-editor-item-expand-button:hover {
        background: #edf2f4;
        color: #173d4f;
    }

.report-editor-item-properties {
    padding: 10px;
    border-top: 1px solid #e8edef;
    background: #f8fafb;
}


/* =========================================================
   6. TOGGLE
   ========================================================= */

.report-editor-toggle-row {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.report-editor-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.report-editor-toggle {
    position: relative;
    width: 34px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #b8c3c9;
    transition: background-color .15s ease, box-shadow .15s ease;
}

    .report-editor-toggle::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
        transition: transform .15s ease;
    }

.report-editor-toggle-input:checked + .report-editor-toggle {
    background: #217346;
}

    .report-editor-toggle-input:checked + .report-editor-toggle::after {
        transform: translateX(14px);
    }

.report-editor-toggle-input:focus-visible + .report-editor-toggle {
    outline: 2px solid #00285a;
    outline-offset: 2px;
}

.report-editor-toggle-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   7. DRAG & DROP
   ========================================================= */

.report-editor-drag-handle {
    width: 16px;
    flex: 0 0 auto;
    color: #a0adb4;
    cursor: grab;
    user-select: none;
    font-size: 15px;
    line-height: 1;
    letter-spacing: -3px;
    transition: color .15s ease;
}

.report-editor-item:hover .report-editor-drag-handle {
    color: #667780;
}

.report-editor-drag-handle:active {
    cursor: grabbing;
}

.report-editor-item-dragging {
    opacity: .55;
    border-style: dashed;
    border-color: #7d9bb0;
    background: #f3f7f9;
}


/* =========================================================
   8. FORM CONTROLS
   ========================================================= */

/* ---------- Generic properties ---------- */
.report-editor-property {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

    .report-editor-property label {
        font-size: 11px;
        font-weight: 600;
        color: #52636c;
    }

    .report-editor-property input[type="text"],
    .report-editor-property input[type="url"],
    .report-editor-property textarea,
    .report-editor-property select {
        width: 100%;
        min-width: 0;
        padding: 7px 9px;
        border: 1px solid #d8e1e7;
        border-radius: 6px;
        background: #f8fafb;
        color: #1f2d33;
        font-size: 12px;
        line-height: 1.35;
        outline: none;
        transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }

        .report-editor-property input[type="text"]:focus,
        .report-editor-property input[type="url"]:focus,
        .report-editor-property textarea:focus,
        .report-editor-property select:focus {
            background: #fff;
            border-color: #8ba4b3;
            box-shadow: 0 0 0 2px rgba(65, 105, 125, .10);
        }

        .report-editor-property input::placeholder,
        .report-editor-property textarea::placeholder {
            color: #98a6ad;
        }

    .report-editor-property textarea {
        resize: vertical;
    }

/* ---------- Theme editor ---------- */

.report-editor-color {
    margin-bottom: 12px;
}

    .report-editor-color:last-child {
        margin-bottom: 0;
    }

    .report-editor-color > label {
        display: block;
        margin-bottom: 5px;
        color: #56656d;
        font-size: 12px;
        font-weight: 600;
    }

.report-editor-color-controls {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
}

    .report-editor-color-controls input[type="color"] {
        width: 42px;
        height: 34px;
        padding: 2px;
        border: 1px solid #d8e1e7;
        border-radius: 5px;
        background: #ffffff;
        cursor: pointer;
    }

    .report-editor-color-controls input[type="text"] {
        min-width: 0;
        padding: 6px 8px;
        border: 1px solid #d8e1e7;
        border-radius: 5px;
        font-family: monospace;
    }


/* =========================================================
   9. PREVIEW
   ========================================================= */

/* ---------- Toolbar ---------- */

.report-editor-preview-toolbar {
    min-height: 58px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-bottom: 1px solid #d8e1e7;
}

    .report-editor-preview-toolbar strong {
        display: block;
        color: #25313a;
    }

    .report-editor-preview-toolbar span {
        color: #7a8991;
        font-size: 12px;
    }

.report-editor-preview-badge {
    padding: 5px 10px;
    background: #e4f3e9;
    color: #217346;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

/* ---------- Canvas ---------- */

.report-editor-preview-canvas {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overflow-anchor: none;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 24px;
    background: #394044;
}

/* ---------- Paper ---------- */

.report-editor-paper {
    width: 210mm;
    min-height: 297mm;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 10mm;
    overflow-anchor: none;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}


/* =========================================================
   10. RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .report-editor {
        --report-editor-sidebar-width: 340px;
        grid-template-columns: minmax(260px, var(--report-editor-sidebar-width)) auto minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .report-editor {
        height: auto;
        min-height: 100dvh;
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .report-editor-resizer {
        display: none;
    }

    .report-editor-sidebar {
        max-height: none;
        overflow: visible;
    }

    .report-editor-preview {
        min-height: 100dvh;
    }
}

/* =========================================================
   11. BODY COMPOSER / ADD CONTENT
   ========================================================= */

.report-editor-block-title-row {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.report-editor-block-title-row .report-editor-block-title {
    margin-bottom: 0;
}

.report-editor-add-content {
    position: relative;
}

.report-editor-add-content-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    width: 220px;
    padding: 6px;
    border: 1px solid #d8e1e7;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(37, 49, 58, .16);
}

    .report-editor-add-content-menu > button,
    .report-editor-existing-blocks > button {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 8px 9px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #25313a;
        cursor: pointer;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
    }

        .report-editor-add-content-menu > button:hover,
        .report-editor-existing-blocks > button:hover {
            background: #f1f5f7;
        }

    .report-editor-add-content-menu i {
        width: 14px;
        color: #60737d;
        text-align: center;
    }

.report-editor-existing-blocks {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #e7ecef;
}

    .report-editor-existing-blocks button span {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .report-editor-existing-blocks button strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
    }

    .report-editor-existing-blocks button small {
        color: #7a8991;
        font-size: 10px;
        font-weight: 500;
    }

.report-editor-empty-menu {
    padding: 8px 9px;
    color: #7a8991;
    font-size: 11px;
}

.report-editor-placed-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.report-editor-add-content-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid #cfd9de;
    border-radius: 6px;
    background: #ffffff;
    color: #173d4f;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    transition: background-color .15s ease, border-color .15s ease;
}

.report-editor-add-content-button:hover {
    background: #f2f6f8;
    border-color: #aebfc8;
}

.report-editor-add-content-menu {
    margin-bottom: 12px;
    padding: 6px;
    border: 1px solid #d8e1e7;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(37, 49, 58, .08);
}

.report-editor-add-content-option {
    width: 100%;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #25313a;
    text-align: left;
    cursor: pointer;
}

.report-editor-add-content-option:hover {
    background: #f3f6f8;
}

.report-editor-add-content-option strong,
.report-editor-add-content-option small {
    display: block;
}

.report-editor-add-content-option strong {
    font-size: 11px;
}

.report-editor-add-content-option small {
    margin-top: 2px;
    color: #7b8990;
    font-size: 9px;
    line-height: 1.25;
}

.report-editor-add-content-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #edf3f5;
    color: #173d4f;
    font-size: 12px;
}

.report-editor-existing-blocks {
    margin: 4px 4px 2px 38px;
    padding-top: 6px;
    border-top: 1px solid #edf1f3;
}

.report-editor-existing-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #34454d;
    cursor: pointer;
    text-align: left;
    font-size: 10px;
}

.report-editor-existing-block:hover {
    background: #f3f6f8;
}

.report-editor-existing-block small {
    color: #89969d;
}

.report-editor-empty-state {
    padding: 8px;
    color: #89969d;
    font-size: 10px;
}

.report-editor-content-item {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid #d8e1e7;
    border-radius: 8px;
    background: #ffffff;
}

.report-editor-content-item:last-child {
    margin-bottom: 0;
}

.report-editor-content-item-header {
    min-height: 44px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #f4f7f8;
    border-bottom: 1px solid #e5eaed;
}

.report-editor-content-item-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-editor-content-item-heading > div {
    min-width: 0;
}

.report-editor-content-item-heading strong,
.report-editor-content-item-heading span {
    display: block;
}

.report-editor-content-item-heading strong {
    overflow: hidden;
    color: #25313a;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-editor-content-item-heading span {
    margin-top: 1px;
    color: #85929a;
    font-size: 9px;
}

.report-editor-content-item-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: grid !important;
    place-items: center;
    margin: 0 !important;
    border-radius: 6px;
    background: #e8eff3;
    color: #173d4f !important;
    font-size: 11px !important;
}

.report-editor-content-item-body {
    padding: 10px;
    background: #f8fafb;
}

.report-editor-danger-button:hover:not(:disabled) {
    background: #fbecec;
    border-color: #efcaca;
    color: #a23535;
}

.report-editor-custom-section-placeholder {
    display: grid;
    place-items: center;
    gap: 3px;
    min-height: 70px;
    padding: 12px;
    border: 1px dashed #ccd7dc;
    border-radius: 6px;
    background: #ffffff;
    color: #71828a;
    text-align: center;
}

.report-editor-custom-section-placeholder i {
    margin-bottom: 2px;
    color: #9aa8af;
}

.report-editor-custom-section-placeholder span {
    font-size: 10px;
    font-weight: 700;
}

.report-editor-custom-section-placeholder small {
    color: #95a1a7;
    font-size: 9px;
}

/* ---------- Rendered body text blocks ---------- */

.dynamic-report-content-block {
    margin-bottom: 18px;
}

.dynamic-report-text-block {
    padding: 11px 13px;
    border: 1px solid var(--report-border);
    border-left-width: 3px;
    background: #fafbfc;
}

.dynamic-report-text-block-title {
    margin-bottom: 5px;
    color: var(--report-text);
    font-size: 11px;
    font-weight: 700;
}

.dynamic-report-text-block-content {
    color: var(--report-text);
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.dynamic-report-text-block-default {
    border-left-color: var(--report-primary);
}

.dynamic-report-text-block-information {
    border-left-color: #4f7f9a;
    background: #f4f8fa;
}

.dynamic-report-text-block-warning {
    border-left-color: #b58224;
    background: #fffaf0;
}

.dynamic-report-text-block-success {
    border-left-color: #4e8164;
    background: #f4f9f6;
}

/* ---------------------------------------------------------------
   Selector de idioma del diseñador
   --------------------------------------------------------------- */

.report-editor-culture {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem 0 .25rem;
    padding: .4rem .6rem;
    border: 1px solid var(--report-border, #d8e1e7);
    border-radius: 6px;
    background: #fff;
}

.report-editor-culture i {
    color: var(--report-muted, #6d7b83);
    font-size: .85rem;
}

.report-editor-culture select {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: .85rem;
    color: var(--report-text, #25313a);
    outline: none;
    cursor: pointer;
}

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 40px 60px;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

    .page-header h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        color: #172b35;
    }

    .page-header p {
        margin: 7px 0 0;
        color: #74858d;
        font-size: 13px;
    }

.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 13px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.primary-button {
    border: 1px solid #173d4f;
    background: #173d4f;
    color: white;
}

    .primary-button:hover {
        background: #224f63;
    }

.secondary-button {
    border: 1px solid #d8e1e5;
    background: white;
    color: #455b65;
}

    .secondary-button:hover {
        background: #f5f8f9;
    }

.blocks-toolbar {
    display: flex;
    gap: 5px;
    margin-bottom: 18px;
}

.filter-button {
    padding: 6px 11px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #75868e;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

    .filter-button:hover {
        background: #edf2f4;
    }

    .filter-button.active {
        background: #e4edf1;
        color: #173d4f;
    }

.blocks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 16px;
}

.block-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #dde5e8;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.block-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #edf1f3;
}

.block-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #edf3f5;
    color: #496a78;
}

    .block-icon.header {
        background: #e9f1f4;
        color: #28586b;
    }

    .block-icon.footer {
        background: #f1f2f4;
        color: #5e6870;
    }

.block-heading {
    min-width: 0;
    flex: 1;
}

    .block-heading h2 {
        margin: 0 0 3px;
        font-size: 14px;
        font-weight: 700;
        color: #1e333d;
    }

    .block-heading code {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #89979d;
        font-size: 10px;
    }

.block-type {
    padding: 4px 7px;
    border-radius: 5px;
    background: #f0f4f5;
    color: #64777f;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.block-content {
    flex: 1;
    padding: 16px;
}

    .block-content pre {
        margin: 0;
        max-height: 105px;
        overflow: hidden;
        color: #718188;
        font-family: "Cascadia Code", Consolas, monospace;
        font-size: 10px;
        line-height: 1.5;
        white-space: pre-wrap;
        word-break: break-word;
    }

.block-card-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid #edf1f3;
}

.page-state,
.empty-state {
    padding: 60px 30px;
    text-align: center;
    color: #778990;
}

.empty-state {
    border: 1px dashed #d8e1e5;
    border-radius: 10px;
    background: #fafcfc;
}

.empty-state-icon {
    margin-bottom: 14px;
    color: #82979f;
    font-size: 26px;
}

.empty-state h2 {
    margin: 0 0 6px;
    color: #334d58;
    font-size: 16px;
}

.empty-state p {
    margin: 0 0 18px;
    font-size: 12px;
}

.block-icon.text {
    background: #f3eef8;
    color: #72558a;
}


/* =========================================================
   HEADER: título / subtítulo con interruptor
   ========================================================= */

.report-editor-property-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.report-editor-toggle-row.is-compact {
    gap: 6px;
    color: #74838b;
    font-size: 10.5px;
    font-weight: 600;
}

    .report-editor-toggle-row.is-compact .report-editor-toggle {
        width: 28px;
        height: 16px;
    }

        .report-editor-toggle-row.is-compact .report-editor-toggle::after {
            top: 2px;
            left: 2px;
            width: 12px;
            height: 12px;
        }

    .report-editor-toggle-row.is-compact .report-editor-toggle-input:checked + .report-editor-toggle::after {
        transform: translateX(12px);
    }

.report-editor-property.is-hidden-text input[type="text"] {
    color: #98a6ad;
    text-decoration: line-through;
    cursor: not-allowed;
}


/* =========================================================
   TABLE COLUMNS
   ========================================================= */

.report-editor-columns-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 14px 0 7px;
}

    .report-editor-columns-heading .report-editor-subtitle {
        margin: 0;
    }

.report-editor-columns-count {
    color: #93a0a5;
    font-size: 10.5px;
}

.report-editor-columns-bar {
    display: flex;
    gap: 2px;
    height: 18px;
    overflow: hidden;
    border-radius: 4px;
}

    .report-editor-columns-bar span {
        min-width: 0;
        flex-grow: 0;
        flex-shrink: 1;
        display: grid;
        place-items: center;
        overflow: hidden;
        background: #3c4f86;
        color: #fff;
        font-size: 9.5px;
        font-weight: 700;
        white-space: nowrap;
    }

        .report-editor-columns-bar span.is-auto {
            background: repeating-linear-gradient(135deg, #c9d3ea 0 4px, #dbe2f1 4px 8px);
            color: #3c4f86;
        }

    .report-editor-columns-bar.is-overflowing span:not(.is-auto) {
        background: #b4553c;
    }

.report-editor-columns-summary {
    margin: 5px 0 8px;
    color: #7a8991;
    font-size: 10.5px;
    line-height: 1.35;
}

    .report-editor-columns-summary.is-overflowing {
        color: #9a3d3d;
    }

.report-editor-columns {
    overflow: hidden;
    border: 1px solid #e1e7eb;
    border-radius: 7px;
    background: #fff;
}

.report-editor-column {
    display: grid;
    grid-template-columns: 14px auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #edf1f3;
}

    .report-editor-column:last-child {
        border-bottom: 0;
    }

    .report-editor-column:hover {
        background: #fbfcfd;
    }

        .report-editor-column:hover .report-editor-drag-handle {
            color: #667780;
        }

    .report-editor-column.report-editor-item-dragging {
        border: 1px dashed #7d9bb0;
    }

    /* Sin botón de restablecer, el ancho ocupa su hueco. */
    .report-editor-column > :last-child {
        grid-column: -2;
    }

.report-editor-column-name {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

    .report-editor-column-name input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 3px 6px;
        margin-left: -6px;
        border: 1px solid transparent;
        border-radius: 5px;
        background: transparent;
        color: #1f2d33;
        font-size: 12px;
        font-weight: 600;
        outline: none;
        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    }

        .report-editor-column-name input:hover:not(:disabled) {
            border-color: #e1e7eb;
            background: #f8fafb;
        }

        .report-editor-column-name input:focus {
            border-color: #8ba4b3;
            background: #fff;
            box-shadow: 0 0 0 2px rgba(65, 105, 125, .10);
        }

    .report-editor-column-name small {
        overflow: hidden;
        color: #93a0a5;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 9.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.report-editor-column-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin-top: 2px;
}

    .report-editor-column-meta small {
        min-width: 0;
        margin-left: 2px;
    }

/* Selector con aspecto de etiqueta: tipo y total de la columna sin abrir
   un panel aparte. Resaltado cuando no es el valor de partida. */
.report-editor-chip-select {
    max-width: 92px;
    padding: 1px 16px 1px 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #eef1f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236e7e86'/%3E%3C/svg%3E") no-repeat right 5px center;
    color: #4d5f8c;
    font-family: system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

    .report-editor-chip-select:hover:not(:disabled) {
        border-color: #c9d3ea;
    }

    .report-editor-chip-select:focus {
        border-color: #8ba4b3;
        outline: none;
    }

    .report-editor-chip-select.is-overridden {
        background-color: #3c4f86;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23ffffff'/%3E%3C/svg%3E");
        color: #fff;
    }

    .report-editor-chip-select:disabled {
        opacity: .5;
        cursor: default;
    }

    .report-editor-property select.is-overridden {
        border-color: #3c4f86;
    }

.report-editor-column-reset {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #93a0a5;
    font-size: 10px;
    cursor: pointer;
}

    .report-editor-column-reset:hover {
        background: #edf2f4;
        color: #173d4f;
    }

.report-editor-column-width {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #d8e1e7;
    border-radius: 5px;
    background: #f8fafb;
    cursor: text;
}

    .report-editor-column-width:focus-within {
        border-color: #8ba4b3;
        background: #fff;
        box-shadow: 0 0 0 2px rgba(65, 105, 125, .10);
    }

    .report-editor-column-width input {
        width: 38px;
        padding: 4px 2px 4px 7px;
        border: 0;
        background: transparent;
        color: #1f2d33;
        font-size: 11.5px;
        font-weight: 600;
        text-align: right;
        outline: none;
        -moz-appearance: textfield;
        appearance: textfield;
    }

        .report-editor-column-width input::placeholder {
            color: #a6b2b8;
            font-weight: 500;
        }

        .report-editor-column-width input::-webkit-outer-spin-button,
        .report-editor-column-width input::-webkit-inner-spin-button {
            margin: 0;
            -webkit-appearance: none;
        }

    .report-editor-column-width span {
        padding-right: 7px;
        color: #93a0a5;
        font-size: 10.5px;
    }

.report-editor-column-hidden-tag {
    padding: 2px 7px;
    border-radius: 10px;
    background: #eef1f3;
    color: #8a999f;
    font-size: 9.5px;
    font-weight: 700;
}

.report-editor-column.is-hidden {
    background: #f8fafb;
}

    .report-editor-column.is-hidden .report-editor-column-name input {
        color: #98a6ad;
        font-weight: 500;
        cursor: default;
    }


/* =========================================================
   THEME EDITOR
   ========================================================= */

.report-theme-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.report-theme-group {
    min-width: 0;
    margin: 0;
    padding: 10px 12px 12px;
    border: 1px solid #e1e7eb;
    border-radius: 8px;
    background: #fff;
}

    .report-theme-group legend {
        padding: 0 5px;
        margin-left: -5px;
        color: #6e7e86;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .report-theme-group .report-editor-color > label {
        font-size: 11px;
    }

    .report-theme-group .report-editor-property select {
        font-size: 12px;
    }

.report-theme-optional {
    margin-bottom: 12px;
}

    .report-theme-optional > small {
        display: block;
        margin: 3px 0 0 34px;
        color: #93a0a5;
        font-size: 10.5px;
    }

    .report-theme-optional.is-on .report-editor-color {
        margin-top: 6px;
    }

    /* El interruptor ya hace de etiqueta. */
    .report-theme-optional .report-editor-color > label {
        display: none;
    }

.report-theme-editor.is-disabled .report-theme-group {
    background: #f8fafb;
}

.report-theme-editor.is-disabled input,
.report-theme-editor.is-disabled select {
    cursor: not-allowed;
}


/* ---------- Selector de tema en el diseñador ---------- */

.report-theme-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.report-theme-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e1e7eb;
    border-radius: 8px;
    background: #fff;
    color: #25313a;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .report-theme-option:hover {
        border-color: #b9c8d0;
    }

    .report-theme-option.is-active {
        border-color: #173d4f;
        box-shadow: 0 0 0 2px rgba(23, 61, 79, .12);
    }

    .report-theme-option strong {
        display: block;
        overflow: hidden;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .report-theme-option small {
        color: #8a999f;
        font-size: 10.5px;
    }

    .report-theme-option > i {
        color: #173d4f;
        font-size: 12px;
    }

.report-theme-swatches {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 5px;
}

    .report-theme-swatches span {
        width: 12px;
        height: 22px;
    }

.report-theme-linked {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #d6e3ea;
    border-radius: 8px;
    background: #f3f8fa;
    color: #4d626d;
    font-size: 11.5px;
    line-height: 1.45;
}

    .report-theme-linked > i {
        margin-top: 2px;
        color: #4f7384;
    }

    .report-theme-linked a,
    .report-theme-linked button {
        padding: 0;
        border: 0;
        background: none;
        color: #173d4f;
        font: inherit;
        font-weight: 600;
        text-decoration: underline;
        cursor: pointer;
    }


/* =========================================================
   SUBSECCIONES: entrar a editar en vez de desplegar niveles
   ========================================================= */

.report-editor-child-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
    padding: 8px 8px 8px 10px;
    border: 1px solid #e1e7eb;
    border-radius: 8px;
    background: #fff;
}

    .report-editor-child-row:last-child {
        margin-bottom: 0;
    }

    .report-editor-child-row:hover {
        border-color: #c3d0d7;
    }

    .report-editor-child-row.is-hidden {
        background: #f6f8f9;
    }

        .report-editor-child-row.is-hidden strong {
            color: #89969d;
        }

.report-editor-child-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: #f3eef7;
    color: #63497c;
    font-size: 11px;
}

.report-editor-child-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .report-editor-child-text strong {
        overflow: hidden;
        color: #25313a;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .report-editor-child-text small {
        overflow: hidden;
        color: #8a999f;
        font-size: 10.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.report-editor-child-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid #d3dde3;
    border-radius: 6px;
    background: #fff;
    color: #173d4f;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

    .report-editor-child-edit i {
        font-size: 9px;
    }

    .report-editor-child-edit:hover {
        border-color: #173d4f;
        background: #173d4f;
        color: #fff;
    }

/* ---------- Migas ---------- */

.report-editor-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid #dfe6ea;
    border-radius: 8px;
    background: #f4f7f9;
    font-size: 11.5px;
}

    .report-editor-breadcrumb button {
        padding: 2px 4px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: #4f7384;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

        .report-editor-breadcrumb button:hover {
            background: #e6edf1;
            color: #173d4f;
        }

    .report-editor-breadcrumb strong {
        color: #173d4f;
    }

.report-editor-breadcrumb-back i {
    margin-right: 3px;
    font-size: 10px;
}

.report-editor-breadcrumb-sep {
    color: #a6b2b8;
    font-size: 8px;
}


.report-editor-property > small {
    display: block;
    margin-top: 4px;
    color: #74858d;
    font-size: 11px;
    line-height: 1.4;
}

/* Aviso dentro de una propiedad del editor (p. ej. marcadores del QR que
   no están en los datos de ejemplo). */
.report-editor-property small.report-editor-warning {
    color: #9a5b12;
}


/* Quitar un campo de una sección personalizada: mismo tamaño que el botón
   de desplegar, para que la fila sea igual que en las secciones de datos. */
.report-editor-item-remove {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #9aa9b1;
    font-size: 11px;
    cursor: pointer;
}

    .report-editor-item-remove:hover {
        background: #fbecec;
        color: #b23b3b;
    }